Ruminating on Single Page Applications

In the past, I had blogged about the categorization of UI frameworks and the design philosophy behind them.
Of late, the open source market has been flooded with a plethora of SPA (Single Page Application) JavaScript frameworks. Most of these frameworks implement the MVC, MVP or the MVVP patterns on the client side and integrate with the back-end services using REST & JSON.

We are evaluating the following frameworks, that have gained popularity over the past few months. IMHO, Gmail is still the best SPA application out there :)

http://spinejs.com/
http://knockoutjs.com/
http://durandaljs.com/ (based on knockout.js)
http://angularjs.org/ (Google's baby for SPA)
http://backbonejs.org/
http://marionettejs.com/ (based on backboneJS)
http://emberjs.com/

A good comparison of the various frameworks is given here. IMHO, so many frameworks cause a lot of confusion and developers spend a lot of time comparing the features and choosing the best fit.

In SPA, all of the HTML, JS and CSS is downloaded in the first request. All subsequent requests are AJAX requests and only retrieve data from services and update the UI. The browser loads the JS files, requests the data from servies and then generates the HTML DOM dynamically.
The obvious advantage of SPA is the high performance of the web application and the seamless look-n-feel of the website as that of an mobile app. For SPA, there are challenges around SEO and browser history (back button) that needs to be addressed within the app. 

UI Framework Classification

Today there are a plethora of frameworks and technologies available for create RIAs. Our customers often ask us to advice them on the best fit technology framework for their needs.

To help our customers, we have classified UI frameworks into the following broad categories:

1. Action based frameworks: These frameworks rely on the HTTP request-response paradigm and are designed around it. Many popular frameworks such as Struts, Spring MVC, ASP.NET MVC belong to this category. These frameworks typically implement the MVC design pattern and are light-weight in nature. They also have a easy learning curve for developers familiar with HTTP semantics.

2. Server Side UI component frameworks: These frameworks abstract away the HTTP protocol semantics and allow developers to work with UI components. The developer drags-n-drops UI controls on the page and writes event handling code for the components. Thus the paradigm is similar to thick client programming (e.g. VB, Power Builder). The most popular server side UI frameworks are JSF based open source projects such as ICEFaces, PrimeFaces, etc. Also classic ASP.NET is server side component based. These frameworks emit JavaScript and AJAX code during the rendering process.

3. Client Side UI component frameworks: In this category, the entire client is downloaded into the browser during the first request and then-after communication with the server is through AJAX requests. Either JSON or XML is the preferred data format for the payload. Examples of these frameworks are Flex/Flash, Ext-JS, MS Silverlight, etc.