Single Page Web Applications
On a traditional website, each page in the site is the result of an HTTP request to the server. When the user clicks on a link, a new page is requested and displayed once the response arrives from the server. Users submit form data to the server to carry out actions and again, see the results when a new page is returned via an HTTP request. Each of these requests takes some time, so interaction with the website is slowed because it has to wait for requests to complete.
The Technology Behind an SPA
An SPA is enabled by a combination of the core web technologies we have been learning about used in a particular way.
HTML and CSS
The basis for any web page is HTML and CSS but in an SPA, the initial HTML page that is loaded can be very simple and might not have any content at all. Here's an example:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <meta name="Description" content="A single page web application."> <base href="/"> <link rel="stylesheet" href="/static/style.css"> <script type="module" src="/static/main.js" defer></script> <title>My Own SPA</title> </head> <body> <div id="content"></div> </body> </html>
When this page loads it will contain only the empty placeholder
element and show no content at all to the user. The browser will
will be shown to the user.
In the example above, the script
main.js is loaded from the initial
HTML page. Note that the script tag has the
defer attribute set which
means that it won't be executed until after the page has loaded. This
means we know that the
content div will be in place in the DOM when the
script runs. The first job of the script is to inject some content into
that element. A trivial example would be:
const element = document.getElementById('content'); element.innerHTML = '<h1>Hello World</h1>'
Now the page will display the Hello World message rather than being totally blank. Since the execution of this code is generally very fast, the user won't notice that there was an initial blank page.
This brings us to another important part of the SPA which is the use of Web APIs. These are web servers that provide information and services, generally delivering results as JSON documents in response to HTTP requests.
The server that delivered the initial HTML page for the single page application may also offer an API to provide information to be included in the pages. An example might be a blogging service that has an API endpoint to allow the application to get the most recent list of blog posts.
Alternately, the application can use APIs from anywhere else on the web that are configured to allow cross-domain requests (so that an SPA served from https://example.com/ is allowed to make API requests to https://api.com/). This means that the front-end application can bring together information and services from other places on the web and integrate them into an application.
Tool-kits for SPAs
Tools like React, Angular and Vue allow you to write higher level code defining components that
implement different information displays and user interactions. The code you write
However, your browser isn't generally able to run this higher level code directly.