Is there a canonical definition of SPA or is SPA a broadly agreed-on architecture with fuzzy edges?

Question

Is there a canonical definition of SPA which would exclude the software architecture model described below?

I'm working on an app with a new web-architecture model (new to me, at any rate) which has features that differentiate it from a Single Page Application (SPA) as the term is conventionally understood.

Since the model uses server-side and client-side variables which always automatically mirror each other, I would like, at least provisionally, to give the model a label something like Reflective SPA (or veSPA for short) but I'm concerned that due to its reliance on server-side processes, it may not qualify as an SPA at all and, as such, this name would be misleading and/or nonsensical.

Towards the end of the Wikipedia entry on Single Page Applications there is a statement:

A SPA is fully loaded in the initial page load and then page regions are replaced or updated with new page fragments loaded from the server on demand. To avoid excessive downloading of unused features, a SPA will often progressively download more features as they become required, either small fragments of the page, or complete screen modules.

I'd strongly subscribe to this as a conventional definition of an SPA. This is absolutely what I think of when I read the acronym SPA.

---

What differentiates veSPA is that instead of:

page regions are replaced or updated with new page fragments loaded from the server on demand

veSPA repeatedly responds to user interactions by updating the queryString, either via:

1. Updating the URL (including the queryString), using:

• window.history.pushState({}, document.title, 'https://example.com/' + queryString); (Javascript)

2. Reloading the URL (using a new queryString), using:

• window.location.href = 'https://example.com/?' + queryString; (Javascript)

3. Redirecting the URL Request (using a new queryString) at server level, using:

• header('Location: https://example.com/'.$Query_String); (PHP)

When the page is actually reloaded, various custom-data attributes in the root HTML element are populated from the queryString, using the super global variable $_GET in PHP.

When the URL queryString is updated, the same custom-data attributes in the root HTML element are populated from the queryString, using new URLSearchParams(window.location.search) in Javascript.

Either way - and this is the most important culmination of everything described above - the app-view is then rendered via CSS from the values in the custom-data attributes in the root HTML element.

Does this repeated use of page-reloads and server-side PHP (described above) mean this model is too differentiated from SPA (as conventionally understood) to have the term SPA meaningfully applied to it (or to use SPA in its name)?

Is there a canonical definition of SPA which would exclude the model described above?

Answer 1

There is no canonical definition of a single page application, since there is no governing body that defined it. Instead, it is a name that got applied to web applications that exhibit a number of characteristics about how client and server interact.

• Reduced or eliminated page reloads: this is the quintessential difference between traditional web apps and SPAs. The user does not navigate away from the page, or does so infrequently, when they perform an action.

• Rendering logic is pushed to the client: HTML is rendered on the server in traditional web apps. This logic is written in JavaScript and is executed on the client in SPAs.

• Service-oriented or micro services architecture on the server: with clients responsible for rendering logic, server logic is reduced, and the data exchange format is most often changed to JSON. Web API end points are exposed as data services.

• More complex client side architecture: with more logic on the client, JavaScript code tends to adhere to one of the MVC or MVVM style architectures in order to promote testability and organization.

Your application does not need all of these attributes. In fact, it may have more than exist in this list. The definition of a single page application is not exact, so don't get to hung up on it. If you use a client side framework like ReactJS or AngularJS, then you could be creating an SPA — if it has the characteristics above. Then again, you can have an SPA without using one of those frameworks if your application has the characteristics above.

The definition is in the behavior and architectural style — how client and server interact — rather than the specific code you write or the frameworks you use.

Since the model includes both server-side processes and client-side processes, ... I'm concerned that due to its reliance on server-side processes, it may not qualify as an SPA at all...

It is common for both server and client to have models. Client side models tend to have more data than logic. Server side models tend to have more business logic. What you describe does not eliminate "SPA" as a description of your application.

Does this use of page-reloads and PHP (described above) mean this model is too differentiated from SPA (as conventionally understood) to have the term SPA meaningfully applied to it (or to use SPA in its name)?

The answer is "it depends." If every user interaction, or a majority of interactions cause a page reload then your application is not an SPA. Page reloads are common in SPAs when the user navigates from one major "application module" to another. Here again we have some fuzziness. What constitutes an application module largely depends on the application and business functions it encapsulates.

Answer 2

There is no canonical definition of SPA, but the common understanding is that in a SPA, a full HTML page is only loaded once, while a regular web site have multiple full page loads.

Since your architecture reloads the whole page (and not just updates/replaces parts of the DOM via code) it is not a SPA as it is normally understood. An important characteristic of SPA's is that you have persistent state on the client side. But this state gets wiped with a page reload, so this changes the programming model fundamentally.

While nobody owns the term SPA, you will just confuse people if you call your architecture a SPA.