Web - Single page application (SPA)

A Single Page Applications (SPAs) is one HTML page where the modification due to user interaction is completely managed by the browser script (ie javascript)

Static web apps that require only a single load in a web browser are referred to as Single page web apps.

Backend data is accessed via GraphQL or REST APIs that fetch content from a data store and update the UI without requiring a page reload.

It allows to browse different pages on a web site without having to fully load the page.

A SPA website may also change the URL in the browser via the History Web API, even though the page is not being reloaded.

This kind of application follows generally the progressive enhancement concept where the idea is to start small and then progressively adds up functionality. Therefore, they are also generally known as progressive web applications.

The definition of the code logic is found in the javascript code.

• Virtual DOM: React
• Javascript Library: Jquery
• Pure Javascript

Logic:

• The definition of the code logic is declared in HTML attributes
• A standard library understand this attributes
• The library fetches the HTML fragment (hypertext) on the server
• Replace the targeted element

Motivation:

• no client-side router to maintain,
• no client state to manage.
• maintainability. (Directives live inside HTML rather than in separate JavaScript files, which enables to see how a component behaves without referring to an external .js file)

Library:

• https://htmx.org/examples/ ¹⁾
• https://alpinejs.dev/ (Spruce for state management)
• https://turbo.hotwired.dev/
• Remix (React based, not really hypertext based but in-between)

• Ga