SPA : Single Page Application – What, Why and How

It’s been some time since my last post, I feel a little rusty, but I was busy working and learning new stuff. This post will be an abstract thing, and I’m going to quit thinking of a song title-like post titles from now on…

So, What is SPA? Single Page Applications or One Page Applications are something very interesting today. The idea is to have something like desktop app look-and-feel in the browser.

The common web sites work like that (using HTTP):
1. Client makes HTTP request to the server, server responds with the page.
2. User click a link on the current page – new request, new page from the server and so on.
The idea is that the client gets the information on pages, request – whole page, request whole page. But if there is a little change on the current page and we want to see that change, we will have to reload this whole page by following this model. So what to do?

Enter the AJAXAsynchronous JavaScript and XML).
I’m not going to get in the details here, but the browser’s give you the XMLHttpRequest javascript object and you can use it to make request to the server, without reloading the current page or loading a new page. With AJAX we are able to load parts of the current page from the server. Cool.
So imagine a single initial request that downloads a page. This page is the application. Everything else is AJAX requests and loading data represented in some format from the server.
So the model here is:
1. Client makes HTTP request to the server, server responds with the application.
2. The client application asks server for data and markup when it is needed.
So your page can look alike a desktop application with menu bar, status bar, tabs and screens, that are changed via javascript on user actions, the data and the markup for that are provided dynamically by the server.

 

OK, now why we need such a thing?
We can take a look back and we’ll see that the Single Page Application for the web is not a new idea, for example the Java Applets were exactly desktop apps in the browser, the Flex/Flash applications too, Microsoft has their Silverlight, etc.
We can see that people tend to use the browser for almost everything, as time passes I realize that I don’t want to install desktop applications and I want my apps to be OS independent, the browsers are getting more and more capable to be Operating System in the Operating System, OS in the OS if you want… We use Gmail (SPA), mail client (I prefer it over Thunderbird), we use Google Drive, we use Pivotal Tracker, we use e-book readers for the browser, we use MP3 players for the browser, there is the Chrome Store (Every browser tends to have something as a store for plugins and apps), there are the Chrome Book Notebooks (ahead of their time in my opinion, btw)…
Additionally, as a developer I see how the clients want more and more Single Page Applications. They are more flexible and easy to use by their employees and users.
So my thoughts are that the Single Page Applications are tightly bound to the future of the web.

 

But how to code something like this. It is not so easy as a common web site.
Yes it is not, you’ll have to write more and more Javascript or Cofeescript or something that translates to Javascript :).
But as it was for the server side in the recent past : PHP, JSP, ASP – one application is written entirely in one layer and in one file – BAD;
VS
The applications is divided to layers and files, convention over configuration, do not repeat yourself, test driven, etc – Rails, Django, Spring, Symphony, Play, etc – GOOD,
we have frameworks that will help us code a good Single Page Application now.
We have Ember JS (by some contributors to Rails), Angular JS (by Google), Can JS, Backbone, GWT, etc.
The web is growing and everything is getting more complex, the needs of the clients are changing, and there are frameworks to help us, as developers, to adapt.

So I wanted write about the Single Page Apps, because I’m doing a lot of applications like that nowadays and maybe I’ll write about Ember Js and its integration with Rails or Node’s Grunt soon… I hope you found something new in this post. Cheers until the next one!!!

PS. I didn’t forget the Websocket protocol (it is for another post).

Useful Links:

  1. Single Page Application in Wikipedia – http://en.wikipedia.org/wiki/Single-page_application
  2. Ember JS – A Framework For Creating Ambitions Web Apllications – http://emberjs.com
  3. Angular JSHTML Enhanced For Web Apps – http://angularjs.org
  4. Can JS – Build Better Apps Faster – http://canjs.com/
  5. The Bulgarian Twitter page for Ember JS – https://twitter.com/emberjsbulgaria
  6. A SPA for reading ePUB books from Chrome (offline capability), Safari, Android and Windows 8, written by me and my colleges from Astea Solutions – Livemargin Reader Beta
Advertisements

4 thoughts on “SPA : Single Page Application – What, Why and How

  1. Tanya Kavrakova (@tanya_kavrakova)

    Great article! Reading it I started thinking what is the difference between RIA (Rich Internet Application) and SPA? I made some research and reached to the conclusion that in the past when the applications were created using technologies like Silverlight and Flex the term “RIA” was used and today when the applications are created mostly with HTML5, JS and CSS – the term “SPA” is used. I don’t know if I’m right but I think the technology comes with its term and this is the main big difference between RIA and SPA.

    Reply
  2. Pingback: Ember.js tutorial for beginners | php tutorial

  3. sushant saraswat

    Single Page design has been gaining interest in the web designing community recently. With many people accessing net on mobile devices, single page apps have emerged as the new significant shift in web design.

    In my quest to learn more about the SPA, I have registered for a webinar on Benefits of developing Single Page Web Applications using AngularJS, it looks a promising one http://j.mp/1a9aK6t

    Reply
    1. meddle0x53 Post author

      I’m an Ember.js fan, I’m interested in angular too, but one framework at a time, I have worked on two production used projects with ember and I’m very happy with it!

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

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