Single Page Application (SPA)

What are single page applications (SPAs)?

Single page applications, or SPAs, are web applications that dynamically rewrite the current webpage with data from the web server so new pages don’t need to be loaded. In other words, SPAs can load new content without loading a new page url. Like progressive web apps (PWAs), SPAs feel and act like native apps. To mimic native apps, all necessary HTML, JavaScript, and CSS load with the initial download, meaning that the page never reloads or transfers control to different pages. However, developers can use tools like the location hash or the HTML5 History API to make SPAs appear to have separate pages. SPAs employ a number of JavaScript frameworks—including AngularJS, Ember.js, ExtJS, Meteor.js, React, Vue.js, and Svelte—to develop the user interface, run application log, and communicate with servers. Data is transported via XML, JSON, or Ajax, while requests to the server result in either raw data (XML or JSON) or new HTML.Unlike standard web pages, SPAs make asynchronous requests to a server for XML or JSON data. Ajax, the most prominent technique to create this effect, uses jQuery and other JavaScript libraries to manipulate the Document Object Model (DOM) in order to edit the HTML elements. Older SPAs used outdated browser plug-ins such as Silverlight, Flash, and Java to create asynchronous calls. The latest tool, The Websocket API, is a bidirectional, real-time client-server communication technology that is available with HTML5.With SPAs, backend developers focus on APIs, whereas frontend developers ensure they are building a good user experience.Some popular examples of SPAs include Facebook, Google Maps, Gmail, Twitter, and GitHub.

What are the downsides to using single page applications (SPAs)?

SEO Ranking

While SPAs can deliver a standout user experience, they are not always helpful for search engine rankings. If SEO is part of your strategy, single page applications might not be the best fit. 

Browser History

Single Page Applications make it difficult to keep track of your browser history. If you accidentally exit out of the SPA, you might lose all of your progress. And SPAs only register as a single page on your browser history. Some SPAs, however, use the HTML5 history API to add additional pages in the browser history. 

Memory Usage

Many SPAs run for hours at a time. This means that they can consume large amounts of memory and slow down your device, if you’re not careful.

JavaScript

Many users disable JavaScript, especially on mobile devices. This makes it impossible to run SPAs. 

Security

Single page applications use cross-site scripting (XSS), so no new pages are loaded. This means that hackers can easily inject scripts on the client-side. To mitigate security concerns, SPAs should not have sensitive data on the initial page load. 

Tracking Issues

Traditional analytics tools like Google Analytics track metrics by executing on page load. Since SPAs don’t load a new page url when content refreshes, traditional analytics tools fail to track most user interactions. For SPAs, teams should seek more advanced analytics platforms, such as Quantum Metric.

Page Load Speed

SPAs have a slower initial page load speed than most server-based applications, though they generally load faster for return visitors. The initial page speed is slower because SPAs must download the framework and application code before they can render the view as HTML. SPAs download small fragments, screen modules, and other features as they become necessary to continue using the application. undefined

Advantages for SPAs

• Developers building SPAs don’t need to write code that renders pages on the server. They can start with a simple file, no server necessary.

• Debugging is easy with the Chrome browser plug-in.

• Single page applications (SPAs) are a good option for SaaS platforms, closed communities, and social networks. They are also a great choice for people who need to build a dynamic business or personal website with lower data volume.

• SPAs only send one caching request, so people can use the app even when connectivity is poor.