Over the past few years, single page application (SPA) technology has taken the web by storm. Terms like ‘headless content management systems’, ‘web applications’, ‘React’ and ‘Vue’ are gaining traction and more and more business owners are cottoning onto the power and efficiency of the SPA.
But if all of the above just reads like a foreign language, we’re here to help. This article is designed to share the fundamentals, cut through the confusing jargon and ultimately, help you decide whether your next website should be a single page application or not.
Let’s dive in…
To understand what a single page application is, we first have to understand how a classic website works, also often referred to as dynamic websites.
Until recently, classic websites usually required template engines which compiled entire webpages on the server, html and content combined, and sent them to the browser to render whenever a new page or request was made. This is why you’ll often see the full page flash as it re-renders on every page change. You’ll also often see a full page re-render even if only a small component on the page changes. This results in a browsing session that feels more akin to the clunky experience of flicking through a PDF than what you’d hope and expect from an interactive website.
Hard page changes: Sky News is a classic server side website
Much like mobile native apps, single page applications work by downloading the initial resources needed to run the entire app to the browser. Then, as new data is queried, the app will adapt just the components affected by that data. This means that even if you click on a new section of the app, it’ll give the illusion of a page change, but only re-render the contents of the section rather than the header, footer and any other global elements that remain unaffected. And this is why they’re called ‘single page applications’, because the html page never actually changes — just the elements that need to.
Mobile apps have been around for over a decade, but with JavaScript technologies like React, Angular and Vue.js, we can now introduce this same experience to the browser (which is a huge step forward in web development).
These single page applications allow more interactivity and app-like transitions, which results in fantastic, seamless browsing experiences.
These javascript technologies are not so new, and we’ve had our eye on them for a while, but until recently there was one key component lacking that’s required for production-ready SPA websites to really take flight… a headless content management system.
Seamlessly fluid page transitions: Our Positive Group website is a single page application
Existing content management systems such as Craft Cms, Shopify and Wordpress (although we’ll caveat here that we’ve never been fans of WordPress) have introduced headless APIs as a core part of their system.
Brand new headless only content management systems like Sanity and Strapi, have been introduced, completely revolutionising how content management is approached.
Graphql
Usability
As we’ve mentioned before, a primary benefit is usability — SPA websites are completely seamless. Developers can engineer silky smooth transitions as the content changes or sections are navigated which makes for a seriously enhanced user experience.
Modular
Another fantastic benefit is that developing in a single page application allows us to build using components. The framework dynamically injects different components based on what is needed which means growing and evolving a website is much more efficient as we can drop or change a component without affecting others.
JavaScript based
Existing SPA frameworks use JavaScript. This is already a core front end development language, meaning it's much easier to maintain and employ developers as they’re proficient in it. Whereas server side websites often require multiple different coding languages on different stacks.
Decoupled
Decoupling the front end app from the content management system means we’re not limited to the capabilities of that particular content management system. We can pull in what we need, but still use other services or software APIs. It also means it’s possible to refactor one or the other without changing the whole stack.
Freedom
Before headless content management systems, we rarely considered website content as data — it was always associated directly with how it would be rendered in the context of a webpage. But now we’re re-thinking how we structure our content and considering more ways to make it reusable as accessible data that can not only populate a single page application, but many other solutions too. For example, an online shop may list all of their products, descriptions and pricing on their website — but if they create this information in a headless content management system, they can tap into that data from more places (such as stock management tools, online ads, customer relationship management tools etc.).
It’s no exaggeration to say I’m seriously excited about the state of the web at the moment.
Single page applications have made things fun again. Thanks to the SPA we can offer our clients more, while ensuring end users get the dynamic, interactive and seamless browsing experiences they deserve.