What are single page applications? Examples & frameworks

What are single page applications and how do they work?

Web applications that load a single HTML page and update the content as users interact with it are known as single page applications, or SPAs. 

With SPAs, all of the necessary resources are loaded when the user first accesses the application, instead of loading separate HTML pages for different parts. As the user engages with the single page, content dynamically updates, without needing to perform a full page reload. 

Single page application vs multi-page application

Where single page applications load one HTML page and update the content as the user interacts with the app, a multi-page application (or MPA) consists of multiple pages that load separately for different elements of the app, with each page having its own URL.

The single page option enables a more seamless and interactive user experience as there are generally faster and smoother transitions between different parts of the app. 

The downside to SPAs is that they can be more challenging to optimise for search engines and might need additional effort to ensure accessibility and performance boxes are ticked. 

When it comes to search engine optimisation (SEO), multi-page applications have it easier, however navigation between the pages can be slower and less streamlined than with a single page app, meaning managing the state of the application can be more complex. 

The specific needs of the application and the target audience should dictate the choice of which to go with. High level interactivity and real-time updates apps are well suited to a single page approach, where multi-pages are better for a more static and traditional approach to navigation and content organisation. 

SPA Advantages:

• More seamless and responsive user experience
• Faster page loads
• Reduced server load
• Developers enabled to build complex apps

SPA Disadvantages:

• Search engine optimisation (SEO) challenges
• Browser compatibility and performance on older devices
• Increased reliance on JavaScript makes them a greater security risk
• Not great for content-heavy or SEO focused sites

Angular vs React vs Vue – which framework is best for single page applications?

Several factors such as the specific needs of the project, the team’s expertise and personal preferences all need to be considered when deciding on which framework to use for your single page application. 

Let’s take a closer look at the options. 

Angular.JS

A solid choice for larger teams or projects that need a high level of structure and scalability, Angular.JS is a full-featured framework. Offering an extensive range of tools for creating complex applications, there’s also robust support for TypeScript, dependency injection and reactive programming.

React.JS

With a focus on reusable components and a virtual DOM, React is a popular JavaScript library that offers a more flexible and lightweight approach to building single page apps. If you’re after a highly customisable option for a project that requires a high degree of flexibility and responsiveness, React.JS could be the right approach for you. 

Vue.JS

The best features of Angular and React come together to create a newer framework, Vue.JS. This option is all about ease of use and simplicity. It’s a great choice for smaller teams and projects that need a balance between structure and flexibility. The best of both worlds!

Examples of single page applications

Some well known and popular single page applications include:

• Grammarly: helping users to improve their writing by providing suggestions for grammar, spelling and style is this well loved writing assistant tool.
• Gmail: developed by Google, the web-based email service that enables you to send and receive emails, organise your inbox and manage your contacts.
• Netflix: streaming service providing subscribers with a wide range of television and film options, personalised recommendations and advanced search features.

Other popular single page applications include social platforms such as Twitter and Facebook and project management tools, Asana and Trello. Online marketplaces are also known to opt for a SPA with the likes of Airbnb and Etsy being popular sites.