Single Page Applications have been the talk of the town for some years now. A single page displaying all the information a user might ever want. No pesky HTTP requests, no time delays, no page reloads. The Single Page Application paradigm has made browsing the web a better experience. But has it really?

To be able to answer that question properly, we need to first delve into what exactly is SPA.

The most common and probably the most widely used Single Page Application is Google’s e-mail client – Gmail. If you haven’t been living under a rock for the past decade, then surely you’d have used Gmail to send or receive electronic mail. Now the next time you are looking at the heaps of unread mails in your inbox and click open one of them, pause for a moment. You’d notice that the page doesn’t reload to show you the mail’s contents. Instead only a certain part of the browser window changes from a long list of mails to the content of the mail you selected. For the lack of better words, this is what a Single Page Application or SPA is all about.

A single-page application (SPA), is a web site that fits on a single web page with the goal of providing a more fluid user experience. The web page does not reload in its entirety at any point of time nor is the control ever transferred to any other page. To be able to achieve the required fluidity in performance, developers rely on what are called ‘Frameworks’.

Now what are these magical frameworks that fold the entire website into a ‘single page’?

Single Page App Frameworks

As beautiful as a SPA looks, it is equally complex to design it so that it works flawlessly. The two major technologies that are used in SPA development are – Javascript and AJAX.

JavaScript and AJAX frameworks are employed that allow the SPA website to locally load the website’s contents without requiring a server round trip to retrieve HTML every time a user requests a new page.

JavaScript has been historically used to display and retrieve content dynamically on the websites which makes it just perfect for the development of Single Page Applications. And the active participation of tech giants like Microsoft and Google has only helped the SPA cause. Developers employ a wide set of different Javascript Frameworks to bring Single Page Applications to life.

Some of the most common frameworks used are :

Angular JS

Angular JS or simply Angular is an open-source JavaScript framework maintained largely by Google to tackle the challenges faced in the development of Single Page Applications. Angular is based on the MVC/MVVM view where it works on the binding and templating principle. The two-way binding feature of Angular JS helps a web application to interact with the browser directly to open a web page instead of retrieving it from the server whenever an updated view of the web page is requested.

BackBone JS

Backbone.js is an open-source JavaScript framework that gives structure to web applications by pulling the ‘model’ — out of the DOM and into Backbone’s Model, Collection, and View objects.

Now you must be wondering if SPAs are all that sweet and sugar, then why isn’t the whole web just a bunch of SPAs already. Well, that is because Single Page Apps have their downsides too with the major one being with Search Engine Indexing.

SPAs & SEO

SPA or not, a website’s primary aim is almost always to attract as many eyeballs as possible, in this case visitors. There’s no point in developing a complex fluid website that only a few users visit in a month. This is where the SPA takes a step backwards. Since search engine crawlers don’t parse Javascript elements in a website, this renders most of the SPA’s content non-indexed in search engine results, thereby ultimately defeating the purpose of making a website.

Over the years as the JavaScript based web content has become popular, various fixes have also appeared that aim to tackle this SEO scenario. Google in its algorithmic updates has updated its crawlers to index Javascripts well. Though this still doesn’t completely solve the SEO conundrum that SPAs face but it is still step in the right direction.

There are multiple ‘fixes’ that developers have come up to solve this issue. Some of them include enabling the ‘hashbang’ on the client side; rendering the web pages with escaped_fragment to cache pages on the server side and many others. Some of them are partially effectively while some of them can be a bit shady.

But the best thing to come out of this SEO-SPA fiasco, is the Isomorphic JS.

Isomorphic JavaScript

Isomorphic JavaScript applications are applications written in JavaScript that can run both on the client and on the server. This means that a code written once can be executed simultaneously on both the client-side and the server-side allowing for faster interactions and rendering of static pages respectively. Below is an excellent illustration from a popular AirBnB post that details how Isomorphic Javascripts work.

Isomorphic JS renders the content on the server-side only at the first load instance after which the website behaves like a pure SPA allowing for a seamlessly fluid user experience.

There are various Isomorphic JavaScript frameworks most of which run on ‘Node.js’

Node.js is an open source cross-platform run time environment for server side and network applications. Node.js enables the developers to run isomorphic javascript frameworks such as Meteor and React.

Meteor JS

Meteor is an open source real-time Javascript web application framework written on top of Node.js. Meteor allows for rapid prototyping that allows the developers to “Build apps that are a delight to use, faster than you ever thought possible”. Using its ‘Data On The Wire’ characteristic Meteor only sends the minimum required data to re-render only that section of the page that has to be updated after a user action. This makes Meteor a top contender for designing faster yet lighter SPAs.

React JS

While the Meteor can be understood as the ‘Model’ part in the MVC Software Paradigm, then ReactJS is the View part. ReactJS is an open source Javascript library that allows the developers to build large scale web applications that largely deal with dynamic data. ReactJS aims to be simple, reactive and is highly adaptable as it can easily be used in conjunction with other Javascript libraries as well as with bigger MVC frameworks such as AngularJS.

But even after crossing the SEO hurdle, web developers unanimously agree that the web in its current form isn’t all ready for going Single Page yet. Wondering if you should take your website and fold it in a Single Page? Continue reading to know if you should jump on the SPA bandwagon.

Should You Go For SPA?

There is little doubt that Single Page Applications have everything that might make the users think that it is the future of the web. But like every coin has two sides, SPAs is after all just another coin. SPAs though a welcoming change also step on the toes of the traditional way of retrieving information from the annals of web.

Dependency on JavaScript is what provides a SPA its characteristic fluidity, but Javascript is also the culprit behind many of the drawbacks of Single Page Applications. First of all, to be able to view your SPA, the clients must have Javascript enabled on their device.

As mentioned above, SPAs are not really SEO friendly because of the inability of web crawlers to index Javascript content. Yes there are solutions to this problem but none of them can be called straightforward.

Another major bone of contention in adopting SPA as the future is the issue of security. Since most of the computations in a SPA occurs at the client side, it becomes imperative that there is only entry point to the website and that the client data is secure at all times.

Lastly, it is not considered a bright idea for your SPA to have ‘many’ pages. If an SPA grows to a significant size, loading the entire application on the first page load becomes akin to loading all pages of a website when only the home page was requested. Unfortunately, this leads to unnecessarily increased page load time and thus proves to be a detriment to a good User Experience.

No Ecommerce usage of these Single Page Application has been found yet. Web still relies on traditional Ecommerce Opensource Frameworks for development of applications that mint money. The focus of these SPA, in present day is limited to user experience primarily.

If a SPA would be better for you or not completely depends on the kind of content that you host on the internet. If you need one developed for your business, there are several leading web development agencies that specialize in creating these Single Page Applications. A SPA means better user experience but only upto a certain extent and that too not always.

Don't forget to share this post!