With the advent of new technologies / frameworks to provide more user-friendly websites, there is a growing competition among the web based solution providers & social sites to offer better experience to their application users. Gone are the days when one has to click a link & wait for the new page to load. Nowadays, end-users expect experience in Web, equivalent to their native apps in Tablet and smartphones, rich and prominent UI, fewer things to type, more items to see, fast to navigate & the most important of all – NO REDIRECTION.

Google Plus, Gmail, Facebook, Twitter, Quora, etc are some of the best example of social websites which have a huge user base & rich user experience. Almost all of these websites have reduced redirection to the minimum. Even Yahoo revamped Yahoo Mail in order to stay in the competition. Thus, the industry as well as the end-users is progressing towards a newer kind of front-end architecture most commonly called- Single Page Application.

Let’s dwell upon the different front-end architectures available in the industry & the major problems faced, from various perspectives.

Type 1:

This is where things on internet started off with; It is the traditional, simplest as well as the most popular model & is extensively used by the web-developers till date.

From a user’s perspective:

• In this model, as soon as there is a state change there are back & forth calls to the server which leads to redirection which in turn causes longer waiting time & hence, reduces usability. Thus, it lacks in performance mainly because back & forth calls,  are actually HTTP requests which are invoked even for small operations.
• The user experience is completely deteriorated if the page is too long or complex.

From a developer & tester’s perspective:

• Even though being easy to learn & develop it’s not favoured by the modern developers’ community majorly because it doesn’t promote reuse.
• Also to provide rich user-experience developers have to entangle JS in it but most of the times it creates more problems than it solves.
• Furthermore, porting the server side language to some other language becomes too difficult as it’s not API driven.
• The tester too has a hard time in testing the application built on this type of architecture as the data layer & the presentation layer have to be tested together.
• Moreover, the UI code is on the server & most of the tasks on the page are achieved by links & form being submitted.  So, updating the data on the web-page in real-time is almost impossible as it requires a redirection & a HTTP request to reflect any new changes on the page. For e.g.: Wikipedia.

Type 2:

The second type internally comprises of two types of models- Server side including AJAX & the other being PJAX. In the former, the initial pages are loaded on the server while subsequent state changes occur on the client side whereas in the latter, the initial pages & state changes happen on the server side but it is injected into DOM on the client side.  Nevertheless, it’s not as good as it sounds because it comes with its own set of drawbacks.

• Even though there is reduction in the number of page reloads many of the times the loading indicator which is used to depict the loading of JS, is not applied correctly & hence it creates a lot of confusion to the end-users.
• Besides, JS brings in more complexity & issues with it which has to be addressed separately which subsequently results in the increase in the effort involved; there is already a big learning curve for the developers as in order to develop such architecture one has to learn some JS frameworks like JQuery.
• Apart from this, JS at times is slow to process, so the loading indicator just keeps loading & the end-user has no way to figure out as to what went wrong. The major disadvantage of this kind of architecture is its non-friendly nature with SEO because search bots aren’t familiar with JS.
• Another pain-point comes from the testers as there is phenomenal increase in the number of test cases which range from templates to test events to test sequence of events.  Examples include- Facebook, Twitter, etc.

Type 3:

The third & the trending type is the Single Page Application – SPA. This model is an advanced version of the aforementioned 2^nd type & solves many of the issues faced in the above two & hence the popularity & demand.

• In this model, the server sends a skeleton of static page while every change happens on the client side. The UI code is on the client side and the rest of the data exchanges are managed through the server APIs.
• Starting with performance, there is a phenomenal increase in performance & usability as users don’t feel the frustration of page redirection on every click of a link. This is achieved by just loading the newer components on that page instead of loading the full page again.
• Since the content is loaded incrementally, there is no extra HTTP calls for small operations. In terms of usability, using SPA it’s possible to deliver real-time updates on the page without redirection.
• Furthermore, he/she will be able to do many actions on the same page.
• Even though developers have to learn the JS frameworks to develop this kind of architecture but the real benefits comes in the form of API driven approach which increases reusability such that the same code can be used for other platforms like mobile, tablets, etc. Also there are numerous ways to improve modularity too.
• In contrast to this, the SPA is not good with bots thus there are glitches with SEO; also developers have to learn new frameworks. Though there are a number of ways of improving SEO in SPA – using pretty & ugly URLs, using tools like PhantomJS, differentiating between full requests & asynchronous requests.
• The testing too becomes more difficult considering the different states. Examples include Google Plus, Gmail, etc. However, using tools like Jasmine, Mocha & QUnit based unit Testing can be implemented in Single Page Application.

Given below are some of the unique characteristics of SPA, which makes it more robust and trending topic of software development

• Chunking – loading the page in small chunks of HTML fragments & JSON data using JS frameworks
• Controllers – separation of views & models using MVC architecture
• Templating – Declarative binding of data to HTML
• Routing – the views & navigations are selected , in order to avoid redirection page state thus preserving  page state, elements & data
• Real Time Communication – to achieve faster loading of page two-way communication is replaced by single request to server
• Local Storage – data is stored in browser for improving performance & offline access

To summarize, the trend is moving towards modernization of the applications to be more friendly and intuitive to be used. There are various tools and frameworks for implementation of SPA in all platforms of software development.