Single Page Application Concepts

Single-Page Applications (SPAs)

A Single Page Application is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience (UI) between successive pages, making the application behave more like a desktop application. In an SPA, either all necessary code - HTML, JS, CSS - is retrieved with a single page load, or the appropriate resources are dynamically loaded and addd to the page as necessary usually in response to user actions.

Examples of SPAs are Twitter, Facebook (almost), and GMail.

There are many different parts to making an SPA (and also mentioning the alternatives). These are:

Technical Approaches (frameworks etc)
Page Lifecycles
Multi-Page Applications (alternatives)

Technical Approaches

There are many ways in how SPAs can be made. These are usually made with a mixture of the following programs:

JavaScript Frameworks - AngularJS, Rect, Vue.js, Knockout.js etc can be used to as Model View Controllers and as Components and states to allow SPAs to load and unload data seamlessly.
AJAX - This is the most prominent technique being used at the moment. This is being utilised with the XMLHttpRequest Object from JavaScript, there are other approaches such as IFrames and script HTML elements.
Web Sockets - These are a bidirectional real-time client server communication technology part of the HTML5 specification, better than AJAX in terms of performance and simplicity.
Browser Plugins - Asynchronous calls to the server may also be achieved using browser plug-in technologies such as Silverlight, Flash or Java Applets.
Data Transport - XML, JSON and AJAX can all be used together to create a data transport system where the DOM is used to create a SPA.
ASP.NET and C# - These can also be ued to create SPAs

An Example of the stucture of an SPA:

Page Lifecycles

An SPA is fully loaded in the initial page load and then page regions are replaced or updated with new page fragments loaded from the server on demand. To avoid excessive downloading of unused features, an SPA will often progressively download more features as they become required, either smal fragments of the page, or complete screen modules. In this way an analogy exists between "states" in an SPA and "pages" in a traditional website. Because "state navigation" in the same page in analogous to page navigation, in theory, any page-based web site could be converted to single-page replacing in the same page only the changed parts result of comparing consecutive pages in a non-SPA. The SPA approach on the web is similar to the Single Document Interface (SDI) presentation technique popular in native desktop applications.

An Example of how Page Lifecycles work, in both SPAs and Traditional pages:

Multi-Page Applications

Multiple Page Applications (MPAs) work differently to SPAs in that they work in a traditional manner, meaning every change, like displaying or submitting data back to the server requests renders a new page from the server in the browser.

MPAs are larger than SPAs because they need to be, due to the amount of content, they have many levels of UI. AJAX helps with maintaining the UI and other server requests as well as data transferal.

An Example of how MPAs work:

These are the main points of SPAs and other related items. SPAs are becoming more and more popular, however MPAs and traditional web applications are still in use and have been modernised with the use of AJAX, JSON and other technologies and web standards. It is adviseable to learn how to make SPAs as they may be the norm in the future.