What is a Single Page Application?

These days, SPAs “Single Page Apps” are on the rise in the world of web technologies.

Single page apps are those apps which work inside a browser and don’t require page reload while they are being used. SPAs make requests to the DOM/markup & data independently and render the page directly in the browser. Some of the popular SPAs that we use everyday includes - Gmail, Google Maps, Github, Airbnb or even the Medium itself.

In more technical words, SPA uses HTML5 & Asynchronous Server calls (Ajax) to give a smooth response to user’s request and allowing content to be updated whenever a user performs an action. Once the page is fully loaded with HTML & Javascript code the user can interact with the page seamlessly as all the data is loaded via API calls in the form of JSON from the server and no page reload is been observed which helps SPAs to serve the best User experience (UX).

The following are some of the most popular & open-source frameworks which helps you to build SPAs:

• React
• Ember
• Vue
• Backbone
• Angular
• Aurelia
• Polymer
• and many more…

Pros & Cons of SPA:

Pros:

• They are tremendously fast.
• The static assets/resources (say: HTML, CSS, JS) are only loaded once in its lifespan.
• As no HTML/CSS/JS is passed from server to client every time the app is used, the SPAs only fetch data (JSON payload) in the form of API calls, which improves the User interaction.

Cons:

• Compared to traditional applications, SPAs are less secure as they enable hackers to inject client-side scripts using Cross Site Scripting (XSS) techniques.
• Memory leaks in Javascript may cause the system to slow down.
• One of the biggest disadvantage of SPA is difficulty in the implementation of SEO (Search Engine Optimisation). The app-page in the single page app never refreshes, since the data is fetched over API calls, thereby making it very hard for the page to be optimised for search engines.

As you’ve noticed that one of the major cons of SPAs is the implementation of SEO features. But to make it possible we can handle SEO using the technique of server-side rendering, which I’ll cover in my next article (How to implement server-side rendering using Angular 4).