SPA
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.
In an SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
SPA Frameworks
- React (library not a framework)
- Vue.js: https://vuejs.org
- Angular.js: https://angular.io
- Ember.js: https://emberjs.com
- ExtJS: https://www.sencha.com/products/extjs/
- Meteor: https://www.meteor.com
- Svelte: https://svelte.dev
But what about routing?
Routing occurs - quite sneaky - within the SPA. We will zoom in on this when discussing the React Router. But what basically happens is that JavaScript "hijacks" our addressbar en routes slugs into the SPA.
Architecture
We can visualize the SPA and Single Way Dataflow concept in this diagram:
