That’s my series of posts on a SPA subject .

Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>



wiki – Single-page application

pros :

  • Expected reaction even without wifi
  • Fluid UX Experience
  • Usually with single page load



Definition of a SPA :

  1. Maintain Navigation ,
  2. Maintain History ,
  3. Deep Linking- when going from page to page it’s not really going to another page, it’s loading a different information on the same page .
  4. Persisting important state on the client  – for instance data that is not likely to be changed (code tables) . Not the whole database but still.
  5. Fully\mostly loaded in the initial page load
  6. Progressively downloads features as required
    Additionally handled issues that we meet in RIA plug-in apps :
  • Async services
  • Client-side application & business logic
  • Long-lived client-side state
  • 2-way data binding (MVVM)
  • Tombstoning /dropped connections – when your app crushes to get back to the point you stopped the last time .


    Code Camper overview :


  • Using SamiJS for rodding in history feature – allowing to go back and forth in pages
  • Using fade-in on JQuery animation
  • The idea with the star grade for the speaker is to intercept on the transition and check out is it ok to leave the current page or not
  • Tombstone – remembers the uri  and the filters , so even if we close the browser when we come back it’ll open the wright page and the filter that you’ve find before.


Technologies of the SPA




Server Technologies

  • DB used SQL CE


  • ORM as EF Code First through POCO Models
  • Repositories implementing CRUD (create update delete)  per sessions
  • Unit of Work is the way to aggregate to CRUD data with multiple different Repositories


  • Web API Exposing the API to the client – interact through Ajax and return JSON.




  • Web Optimization – turn on the minification and bundling for js and css files
  • Ninject IOC  – lets you decouple your classes on the server



Client Technology

  • Html5 pros – tags such as section , article , placeholder and a validation attribute
  • Modernizr  – deals with fallbacks, if the browser doesn’t support some HTML5 feature
  • Html5 Boilerplate – gives you the start for developing the HTML5 apps (for instance includes Modernizr in the project )




Javascript Patterns

  • AMD – Resolve our dependencies through our JavaScript modules.

from wiki

Asynchronous module definition (AMD) is a JavaScript API for defining modules such that the module and its dependencies can be asynchronously loaded. It is useful in improving the performance of websites by bypassing synchronous loading of modules along with the rest of the site content.

In addition to loading multiple JavaScript files at runtime, AMD can be used during development to keep JavaScript files encapsulated in many different files. This is similar to other programming languages, for example java, which support keywords such as import, package, and class for this purpose. It is then possible to concatenate and minify all the source JavaScript into one small file used for production deployment.


  • Revealing Module Pattern – reveal only the needed parts of the modules publicly
  • Prototypes – improving the performance , reduce some code and save memory space
  • MVVM – model-view-viewmodel –

separate our models – which is our data

and our views  – which are our html

from our viewmodels – which are our JavaScripts







jquery.mockjson – creates a mock data

jquery.activity – can create commands under the ui layer

toastr.js – setting the message throughout the application


Connection to the next post in the series :

                                                               SPA 1.1 – Getting Started with code –>