jspωiki
Single-Page Application

Overview#

Single-Page Application (SPA) is a web application or website that interacts with the user-agent by dynamically rewriting the current page rather than loading entire new pages from a server.

Single-Page Application approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application.

Single-Page Application will either all necessary code – HTML, JavaScript, and CSS – is retrieved 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. The page does not reload at any point in the process, nor does control transfer to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.

Single-Page Application interaction often involves dynamic communication with the web server behind the scenes.

Single-Page Application is not a single technology, but rather a group of technologies. HTML, JavaScript, and CSS can be used in combination to markup and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the Single-Page Application object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Requests are doen using HTML, XML, JSON, XMLHttpRequest to the server typically result in either raw data (e.g., XML or JSON), or new HTML being returned. In the case where HTML is returned by the server, JavaScript on the client updates a partial area of the DOM (Document Object Model). When raw data is returned, often a client-side JavaScript XML / (XSL) process (and in the case of JSON a template) is used to translate the raw data into HTML, which is then used to update a partial area of the DOM.

More Information#

There might be more information for this subject on one of the following: