Single Page Application – What is it all about?

I heard the term Single Page Application for the first time sometime in March, 2012 from Vaidy. Though, I read a little bit about it at that time, I never thought it as something mainstream till the time I saw the new Hotmail application a couple of months back. my first impression was WoW. I am really impressed with the way Hotmail works now and IMHO it is much better than any of the email applications in the market.

So what is this Single Page Application (SPA) all about?
A single-page application is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. The main aim of the SPA is to make the web application work seamlessly. All the necessary code is retrieved with a single page load and changing only elements on the page, depending on the actions taken by the user. The page does not automatically reload during user interaction with the application, nor does control transfer to another page.

How does this really help?
SPA is all about providing better user experience. It ensures a fine-grained control over the user experience as it eliminates network latencies and disruptions caused by page redraws, which result in a more native-app styled experience to the user.

Characteristics of a Single Page Application
• Almost no page reloads, UI built by JavaScript
• Most of the logic is executed on the client-side
• Richer Interaction between UI Components, which makes the web application work seamlessly
• No URL Change other than #
• Back Button works as expected
• Bookmark-able Links
• Ability to go Offline

Single Page Application

How does it really work?
The first time you access the SPA the application does the following
1. Downloads all the HTML, CSS and JavaScript.
2. Process the JavaScript.
3. Download the data from server.
4. Download templates needed to render the data.
5. Generate HTML from the template.
6. Inject HTML into the DOM.

I will try to post the following in the future posts

  1. How do i decide whether i need a SPA?
  2. What are the differences between SPA and Rich Internet Plug-In Apps?
  3. What is the technology stack should I choose for building my SPA?

Modern Web applications require different skill set. HTML5 and JavaScript will become the order of the day. IMHO, If you are already into this you will at least have a better mileage for the next couple of years.

Some Useful Pointers

Single Page Interface Manifesto
Building Single Page Apps with ASP.NET MVC4
Building Single Page Applications with RoR
Single Page Application Architecture
Single Page Application with Backbone.js and ASP.NET Web API
Sharepoint as SPA
Trello Architecture
Architecting Single Page Front end Applications
JS Web App Essentials
Single Page Web Apps with Backbone.Js

Happy Learning!!!