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
ASP.NET SPA
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
SPA
JS Web App Essentials
Single Page Web Apps with Backbone.Js

Happy Learning!!!

Advertisements

6 thoughts on “Single Page Application – What is it all about?

  1. Great you are writing on this topic. Single page application is actually pretty challenging. First, you cannot really ship large amount of code to the client side. Anything larger than a few mega bytes make your site slow to load. Second, browser compatibility is a huge issue, especially when you want to use some advanced HTML 5 features. Client side storage is also not mature, unless you mean cookie which is too small for any serious storage need. Security is also more chanllenging…

    Any plan to write a post on the challenges?

  2. Hi, Good Points. On the Complexity part, my opinion is that its more towards what we are used to. Of course, i agree its not straight forward.
    The browser market is maturing, so over a period of time, i hope the compatibility will be better.

    I will try to consolidate my view points on these challenges and will write in a new post.

    I looked at your blog and the star script template looks like a cool concept. Will try to play with it sometime. 🙂

    Cheers,
    Prakash J

  3. Pingback: URL Design, Routing, Navigation and History « Sendhil's Cyber Home

  4. Pingback: An introduction to Backbone | Daniela Remogna

  5. Pingback: An introduction to Backbone | Daniela Remogna

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s