SPA vs MPA

Web development has evolved significantly over the decades, leading to the rise of different architectural paradigms. One of the most popular architectures that emerged in the 2000s is the Single Page Application (SPA).

What is a SPA?

The concept of an SPA is that it's a single page that downloads all of the application code in its first request - generally within an index.html - and then heavily relies on JavaScript to hook events to all links and forms, so the browser never actually navigates away from the original page. Instead, the browser re-draws areas of the page only when they need to be updated. This creates a smooth, fast, and modern application, and has become a staple development methodology of many front-end frameworks like React, Angular, Vue, and Svelte. But there are many downsides: firstly all of the benefits of the web as a platform are removed when the platform is reimplemented within a single page. It's fine when there are only links being clicked and forms being submitted, but there's a lot of hidden complexity that is solved for free by the web as a platform: how do you handle keyboard navigation, resizing browser windows, or visually impaired users reading the page with screen reader software?

SPAs contradict the core principals of WebEngine: the web is the best platform, so we should take advantage of its many capabilities. It's possible to gain all the benefits that come with an SPA without having to change the way the web was designed to work through a development process called progressive enhancement.

Modern MPA development

A WebEngine application is built as a Multi Page Application (MPA), where each page has its own individual HTML and PHP file - but by using progressive enhancement, MPAs can have gain a fluid user experience without introducing the complexities and downsides of SPAs.

This way, the web application can be built using simpler technology, it works for everyone, but provides a richer experience for those with available technology.

MPAs can take advantage of 30 years of tried-and-tested technology, with no need to fix nuances that were solved in the web platform decades ago.

Progressive enhancement

Progressive enhancement is a web development approach that prioritises making a website or application accessible to everyone, regardless of their device, browser or user capabilities. It starts with a basic, functional version of the site using simple, reliable technologies like HTML, PHP and CSS. This ensures that all users can access the core content and functionality as it was developed, without adding lots of extra fragile layers to the application.

Then, when the application is working nicely, a small layer of client-side logic can be added to enhance the way links load, or forms submit, for example. This can be coded manually using JavaScript, or read the fluid user experience to see how this is automatically handled in WebEngine applications.

Distinct logic authority

MPAs maintain a clear separation of concerns with a single, predictable entry point for each page. This enhances code readability and maintainability, making it easier for developers to understand and manage the application logic.

In WebEngine applications, this is further enforced by using go and do functions to indicate the entry point of the application logic.

Read more about the distinct logic authority concept and how it's applied through WebEngine.

---

Read about how a fluid user experience library is shipped by default in WebEngine.