Single Page Applications

After recently going through a Large Single Page Application (SPA) Development, [when I say a large SPA I mean everything :- a page where user can select a case to work on, the working case page, a message center page, a dashboard module, an admin module, a reports module, a graph module, and more] mentioning some of the points I found to be taken utmost care of.

Starting off with the simplest concept of SPA. Simplifying a SPA Can be defined as Client side rendering [that is the HTML we load] and client side routing [routing users as per call requests without server calls to load the page again]. Less calls to the sever will ultimately provide a fluid and ultimately awesome experience to the end user which is the penultimate goal for any application. An example of SPA which we use often in our day to day life: GMAIL. There has to be a point why big players like Google Moved to SPA.

Some of examples of the benefits different companies have seen of Quick Page load are:

Walmart found that every 100ms reduction time in page loading time leads to an increase in incremental revenue by as much as 1%.
Mozilla saw increase in downloads of firefox by 5 million per month after making their page 2.2 seconds quicker.
Bing found that a 2 second slowdown changed queries/user by -1.8% and revenue/user by -4.3%.
Google Search found that a 400 millisecond delay resulted in a -0.59% change in searches/user. What’s more, even after the delay was removed, these users still had -0.21% fewer searches, indicating that a slower user experience affects long term behaviour.
Phil Dixon, from Shopzilla, had the most takeaway statistics about the impact of performance on the bottom line. A year-long performance redesign resulted in a 5 second speed up (from ~7 seconds to ~2 seconds). This resulted in a 25% increase in page views, a 7-12% increase in revenue, and a 50% reduction in hardware.

Single Page Application

Pros of SPA

Let’s see some of the advantages of SPA:

Performance Improvement

All the files are loaded in the first time. All the assets such as HTML/ Javascritpt /CSS/Images files are loaded on the first call. On subsequent calls only parts of the page are regenerated and that too through Java-Script. That’s where performance is boosted to a great Level. Another factor here is the user Experience. Without refreshing the page, HTML is rendered which gives user fluid and smooth experience. Javascript has the power to redraw the page without making calls to the server for each page refresh request. The requests to the server are only for Saving or showing data i.e. XHR requests only.Javascript renders the part to be shown. The only calls to the server are for fetching data in JSON format which is just a light weight file. Performance is enhanced to a great level through client side rendering pages. Further the network transmission can be made to almost zero through options like caching which is provided by HTML-5 App Cache.

“Application like” interaction even though only a single page is involved.

Even though everything is just a single page, Javascript has ability to draw the page as per user interactions. Considering a most basic Example: Say a calculator. If SPA was not there then for every operation on the calculator a request would go to server to show me the result of an operation.If calculator implemented in SPA then everything would be handled by Javascript giving the same application like experience.

Ability to go offline

Advent of HTML-5, feasibility in caching the application and loading the entire app in the first go will ultimately give an advantage of offline web applications, where loaded javascript will ultimately help in redrawing the content of the pages.

Cons of SPA

Seeing all those advantages and the enhanced performance factor, an obvious thing arises: “there has to be a catch somewhere, there must be some features I will be missing.” Well, there are few features you may loose as well.

SEO

All web crawlers prevent Javascript execution, thus SEO will be a major Problem faced for anyone who wants to adopt the SPA Model. We come up with the question : How will google read my Contents.?

Need to have javascript enabled

With almost all modern browsers having Javascript support, still there may be some exteme cautious persons who disable JavaScript. Now that’s where the Single Page application is going to fail.

But Each of the Cons has effective Solutions. All these challenges are effectively Handled.

KNOWARTH has extensively worked on Single Page Application in many projects covering vast domains. For more details feel free to contact us.

Stay Tuned…!!

Coming up in next blog: how challenges are handled, which frameworks are used for Single Page Applications & common mistakes to avoid in Single Page Applications.