What are single-page applications?

Single-page applications or SPA load a single web document to the browser and update this document accordingly to display different content to the user. We are already in the habit of using these applications — Netflix and Gmail are all examples of SPA. We may notice how the sidebars and headers stay the same on these pages. The content does not change much; SPA brings this about. It essentially makes the user experience smooth and seamless because, after the initial load of the website, little data transfer is required to change the web display on user request. The process was slower with multi-page applications or MPA, where a simple user request reloaded the entire web page. Not only is developing multi-page applications tedious and complex but because of the large data size, transferring it more often slows down the web app’s performance. With single-page applications, dynamic content is made available more readily and at faster speeds, with fewer requests being made to the server.

Pros and cons of using SPA

Using SPA has its advantages and disadvantages as follows:

Pros

SPA has several advantages, as listed below:

• SPA is faster as most web content, including the main HTML, style sheets, and JavaScript, is loaded on the first web page load. After that, minimal content is transferred back and forth to the server on user request.

• Developing websites is simplified with no need to write code for server-side rendering. We can even start development without acquiring a server by mentioning the file name in the URL as file://URI.

• SPA can be easily debugged on the browser with developer tools.

• Local storage can be leveraged to run the application even when the server is offline by storing data fetched from the server on the first load.

• SPA offers cross-platform compatibility. Thus, web applications on our desktops are easily accessible on mobiles and tablets.

• These apps have a decoupled setup, allowing developers to link the front-end with the back-end services via APIs. This makes app development and deployment faster.

Cons

SPA has several disadvantages as well. These are listed below:

• These apps cannot function without JavaScript. JavaScript is the backbone of SPA apps; without it, features like input handling, interactivity, and dynamic content updation won’t work. All the popular frameworks like ReactJS, AngularJS, and Vue.js that help create SPA are based on JavaScript.

• Because of a heavy dependency on JavaScript, browsers with JavaScript disabled cannot host SPA, reducing user engagement from the audience using these browsers.

• Initial load time for web apps is higher because JavaScript is loaded and parsed before the page is rendered. After that, SPA is ready to provide it’s smooth user experience.

• SPA-based applications are insecure and are more vulnerable to cross-site scripting.

• They also require a lot of browser resources and cannot function without them.

What technologies are required for SPA

Many JavaScript frameworks make use of SPA, as listed below:

• ReactJS: React’s efficient state management and virtual DOM properties enable dynamic content updation faster.

• AngularJS: Development is simplified with two-way binding and dependency injections.

• Vue.js: Computed properties, data-binding, and virtual DOM make SPA development less complex.

• Meteor.js: This framework can integrate with all the mentioned above and provides cross-platform support to enhance the development of SPA.

Example of SPA

The following is an example of SPA using AngularJS. In the example below, ng-submit, ng-model, and ng-app are directives that enhance HTML elements’ functionality and simplify the development process. The ng-model directive, in particular, offers the data-binding property mentioned earlier by binding input field data to form variables — the variable data can be accessed anywhere in the index.html file.

Differences between MPA and SPA

There are several differences between multi-page applications and single-page applications. Some of them are tabulated as follows.