|
|
|
|
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 loading entire new pages. The goal is faster transitions that make the website feel more like a native app. The origins of the term single-page application are unclear, though the concept was discussed at least as early as 2003 by technology evangelists from Netscape. Earlier forms were called rich web applications. JavaScript can be used in a web browser to display the user interface (UI), run application logic, and communicate with a web server. Mature free libraries are available that support the building of a SPA, reducing the amount of JavaScript code developers have to write. 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 pseudo-class 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, ExtJS, 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. SPA Framework developed by Google after AngularJS. It is several steps ahead of Angular and there is a strong community of developers using this framework. The framework is updated twice every year. 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. Full stack reactivity ensures that all layers, from the database to the templates, update themselves automatically when necessary. 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 syntax extension for JavaScript, named JSX, 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 Pinia 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.
As of 2006, the most prominent technique used was Ajax. Ajax involves using asynchronous requests to a server for XML or JSON data, such as with JavaScript's XMLHttpRequest or more modern fetch() (since 2017), or the deprecated ActiveX Object. In contrast to the declarative approach of most SPA frameworks, with Ajax the website directly uses JavaScript or a JavaScript library such as jQuery to manipulate the DOM and edit HTML elements. Ajax has further been popularized by libraries like jQuery, which provides a simpler syntax and normalizes Ajax behavior across different browsers which historically had varying behavior. WebSockets are a bidirectional real-time client-server communication technology that are part of the HTML specification. Server-sent events (SSEs) is a technique whereby servers can initiate data transmission to browser clients. Once an initial connection has been established, an event stream remains open until closed by the client. SSEs are sent over traditional HTTP and have a variety of features that WebSockets lack by design such as automatic reconnection, event IDs, and the ability to send arbitrary events.
|
|
