Saturday 16th July, 2022
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 a 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.
There are various techniques available that enable the browser to retain a single page even when the application requires server communication.
HTML authors can leverage element IDs to show or hide different sections of the HTML document. Then, using CSS, authors can use the `#target` selector to only show the section of the page which the browser navigated to.
Web browser JavaScript frameworks and libraries, such as AngularJS, Ember.js, Ext.JS, Knockout.js, Meteor.js, React, Vue.js, and Svelte have adopted SPA principles. Aside from ExtJS, all of these are free.
AngularJS is a fully client-side framework. AngularJS’s templating is based on bidirectional UI data binding. Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
The HTML template is compiled in the browser. The compilation step creates pure HTML, which the browser re-renders into the live view. The step is repeated for subsequent page views. In traditional server-side HTML programming, concepts such as controller and model interact within a server process to produce new HTML views.
In the AngularJS framework, the controller and model states are maintained within the client browser. Therefore, new pages are capable of being generated without any interaction with a server.
Ember.js is a client-side JavaScript web application framework based on the model–view–controller (MVC) software architectural pattern. It allows developers to create scalable single-page applications by incorporating common idioms and best practices into a framework that provides a rich object model, declarative two-way data binding, computed properties, automatically updating templates powered by Handlebars.js, and a router for managing application state.
ExtJS is also a client side framework that allows creating MVC applications. It has its own event system, window and layout management, state management (stores) and various UI components (grids, dialog windows, form elements etc.).
It has its own class system with either dynamic or static loader. The application built with ExtJS can either exist on its own (with state in the browser) or with the server (e.g. with REST API that is used to fill its internal stores).
ExtJS has only built in capabilities to use localStorage so larger applications need a server to store state.
Knockout.js is a client side framework which uses templates based on the Model-View-ViewModel pattern.
Meteor.js is a full-stack (client-server) JavaScript framework designed exclusively for SPAs. It features simpler data binding than Angular, Ember or ReactJS, and uses the Distributed Data Protocol and a publish–subscribe pattern to automatically propagate data changes to clients in real-time without requiring the developer to write any synchronization code.
Full stack reactivity ensures that all layers, from the database to the templates, update themselves automatically when necessary. Ecosystem packages such as Server Side Rendering address the problem of Search Engine Optimization.
React is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. React uses a new language which is a mix of JS and HTML (a subset of HTML).
Several companies use React with Redux (JavaScript library) which adds state management capabilities, which (with several other libraries) lets developers create complex applications.
Vue.js is a JavaScript framework for building user interfaces. Vue developers also provide Vuex for state management.
Svelte is a framework for building user interfaces that compiles Svelte code to JavaScript DOM (Document Object Model) manipulations, avoiding the need to bundle a framework to the client, and allowing for simpler application development syntax.
You can learn more by following my social media:
Support my blog by this link: https://buymeacoffee.com/edx126
Posted by Edgar Hovhannisyan