What is Single Page Application (SPA)

Long long back I read about Rich Internet Applications (RIA). As per the Wikipedia, RIA is a web application that has many characteristics of desktop application. RIA was to some extent achieved by using proprietary tools such as Silverlight, Flash, but this wasn’t truly achieved in Internet targeting larger audience. Up to now building a RIA using simple Html and JavaScript is a big pain and is not guaranteed to work on all browsers. Now-a-days the web technology has matured to certain extent that we can reliably develop RIA on Internet (cough..cough)

Single Page Application (SPA) is one of the recent tools that aids developers to bring RIA into reality for larger audience. It promises to provide better user experience and more closer look to the desktop applications which is what RIA’s goal is.

SPA by definition means one page application, in other words there will be only one page in the entire application or website. You can ask me, for any size application how this can be possible, how my entire site can has one page. Every site I have built or viewed has at least few pages and can spawn to several hundred pages. Then let me ask you this question, what does page mean to you?

As per definition a page is one which loads and unloads. If you count the number of pages loads and unloads in an application, then that application has that many pages. In SPA there will be only one page load and unload. If you observe gmail, yahoo mail or several other sites, there are no unloads and everything works on the same page.

This is paradigm shift of what you think of a page. Once we get a hang of this notation, SPA seems simpler. So in a SPA we load the page only once and all subsequent page changes or transitions are done through ajax or javascipt. As long the page structure (menus, footers, headers etc) does not change there is no need to change the page but we can change the page content through javascript.

Hence SPA is a single page application which shows different content based on the user needs without changing the base page or structure.