Optimizely goes in the SPA direction – check out our review

What are SPAs?

To be honest, Single Page Applications (SPAs) aren’t really a new thing. Web developers have been creating those for many years now. However, we can see an increasing tendency regarding their popularity. The same trend applies to frameworks associated with them. But what exactly are SPAs?

In a traditional approach, in so-called MPAs (Multi Page Applications) whenever the user wants to display new content (for example open an article displayed on the news page), the browser redirects them to that given article and reloads the website. This means that the browser has to download the entire page content from the server and parse it from scratch. If you want to see how that works in practice, go to The Times website, and click any given article.

It looks a bit different in the case of SPAs. Here, the page loads only once during the entire visit. SPA interacts with the user by dynamically rewriting the current page content using new data from the server. In other words, every piece of new content (e.g., the article mentioned in the previous paragraph) is dynamically downloaded from the server and presented to the user within the same screen.

The SPA approach allows you to build more organic and interactive pages, where the user experience is not interrupted by the browser's loading. Some of the most famous examples of SPAs are:

• Facebook
• Gmail
• Google Drive
• Netflix
• Pinterest

SPAs in the eyes of developers, clients and the website visitors

Now, let us think for a few moments what this approach means to the website developer, client and the end user/visitor.

WHAT DO SPAs MEAN FOR WEBSITE VISITORS?

• Improved UX: For starters, SPAs offer improved user experience. SPAs usually work more smoothly and are quicker to navigate. They load faster and present the content to the user in a shorter time. This is especially true when it comes to complex, multi-level apps and websites.
• Native app feeling: In many instances, SPAs feel more like a native application (desktop or mobile), not a traditional website. It makes them natural to use and intuitive.

WHAT DO SPAs MEAN FOR WEBSITE OWNERS?

• Improved conversions: Because SPAs offer native app feel and enhanced user experience, they have everything it takes to convert better. They are “nicer” to use; hence, users are more eager to use them.
• A versatile tool: There are only just a few steps from SPAs to PWAs (Progressive Web Applications). In fact, it is even possible to create a SPA web page that can be downloaded and installed on the mobile device, making them a versatile and flexible tool. Such a downloaded SPA looks and feels like a typical mobile application. And it can work offline, too!
• The problematic SEO issue: There is one significant downside, though. In regard to SEO friendliness, it can be a bit more challenging to make a SPA fully SEO-friendly. This is where MPAs gain a slight advantage. Naturally, it is still possible to achieve the same SEO results as with the MPAs, but it requires more experience and work.

WHAT DO SPAs MEAN FOR DEVELOPERS?

• More straightforward dev work: If you are a web developer, you surely know that both SPAs and MPAs can provide the same functions and features. However, as our experience shows, it’s a bit easier to build some features for the Single Page Applications. But yes, we have to admit that some apps won’t benefit from being a SPA. Such a solution will give you nothing but code complexity. However, there are many cases where we think SPAs can vitally accelerate the development process. And again, yes, it is harder to learn SPA development. But once you get familiar with the patterns and available tools, it is speedy and straightforward work.
• Work divided into front and back-end: It is also essential to notice that SPA applications allow splitting the two specialised teams' responsibilities. The front-end team works on the SPA application, while the back-end team can work on the back-end. This provides more elasticity and also accelerates the dev process.

[1] https://world.optimizely.com/blogs/remko-jantzen/dates/2020/5/introducing-foundation-spa-react/