How single page applications work and when to use them

The three most popular SPA tools are:

• Angular: developed by Google and now almost ten years old;
• React: created by Facebook a few years later;
• Vue: developed by an ex-Google employee and which has enjoyed a surge in popularity over the past few years.

Before the introduction of single page apps, applications were built and rendered on the server-side and delivered – fully formed – to the client device: as the user navigated through the application, each page was created from scratch and so required to be constantly refreshed, leading to a ‘flickery’ screen. Data intensive web apps, which pulled data from multiple different sources, could also be slow to load.

With single page applications, presentation logic is rendered on the client-side and the visual structure of the web app remains consistent for the duration of the session, with newly requested data being refreshed in the background. This provides a much smoother experience to the user.

Advantages of single page applications

Here are some of the advantages of single page apps that make this type of application so popular and adopted by some of the industry giants like Facebook, Gmail, Google Maps, LinkedIn, and Netflix:

Loading speed

The biggest single advantage of the SPA is speed. Numerous studies from Google and others have shown that slow load times will hurt user satisfaction, causing shoppers to abandon carts and reducing the willingness of visitors to come back to your site. Once the single page app is loaded, the amount of data traveling between the client device and the server is very small, so load times are minimized.

Straightforward development

When developing a single page application, the server-side code is re-used and is effectively decoupled from the front-end UI. This means back-end and front-end teams can focus on doing their jobs without worrying about what’s being developed elsewhere.

Easy to debug

It’s very easy to test and debug single page apps using the Dev Tools provided by Google in their Chrome browser.

Can be distributed as a progressive web app

Once created, the SPA can easily be distributed as a progressive web application to deliver a very similar experience to a mobile app but with a massively reduced footprint.

Single page application vs. multi-page application

Differences between single page application and multi-page application.

The traditional multi-page app (MPA) approach requires no JavaScript expertise within your development teams (although the coupling of front and back-end means that sites tend to take longer to build).

You can scale the content as much as you want by adding another page and, because the content on each page is static, Search Engine Optimization (SEO) is generally straightforward. On the downside, MPAs are much slower in operation as every new page is loaded from scratch. However, if your web content is (largely) read-only, then MPA may provide you with all you need.

As for single page apps, their primary advantage is their speed. In addition to that, SPAs are much better suited to exposing rich functionality than MPAs and they also cache information so the application can be used offline.

The biggest downside of SPAs is that the dynamic nature of its content does make SEO and discoverability more complex. However, as more companies adopt SPAs, crawlers and search engines have been evolving to better deal with this type of app.

That said, it’s not really a case of single page apps being better than multi-page apps or vice versa. Both approaches have their merits. It’s important to note, though, that as the web crawler and indexing issues traditionally associated with single page apps are resolved, the advantages of MPAs over SPAs will start to fade, and the latter will indeed become the de facto standard for modern web apps.

Want to give single page apps a try?

If you want to rip the benefits of single page apps in your next app project, why don’t you give OutSystems a try? With the OutSystems low-code platform you can deploy single page applications for web and mobile using its Reactive Web Model and mobile development capabilities.

Sign up for OutSystems free edition and experience it for yourself, or schedule a demo to see the platform in action.

Learn the fundamentals of modern development

SPA frequently asked questions