The single page application (SPA) architecture

In 2004, the World Wide Web Consortium (W3C) started working on the new HTML standard, which was to be the precursor to HTML5. In 2010, HTML5 started to pick up speed, and features from the specification started to make their way into the major web browsers and the HTML5 functionality became very popular.

The major selling point for HTML5 was to introduce capabilities that would allow web applications to behave more like native applications. A new set of APIs that were accessible through JavaScript were introduced. These APIs included the functionality to store data locally on the user's device, better control of the forward and back button (using the web browser's History API), a 2D canvas for rendering graphics, and the second version of the XHR object that included greater capabilities than its predecessor:

Figure 1.6: The Single Page Application (SPA) Architecture

In the early 2010s, JavaScript frameworks began to emerge, which facilitated in the development of a new type of architecture, the SPA architecture. This architecture, as depicted in Figure 1.6, focuses on a fat client and thin server strategy. The idea was to remove the responsibility of any type of template rendering from the server side and assign all User Interface(UI) rendering to the client side. In this architecture, there is a clear separation of concerns between the duties of the server and the client.

The SPA architecture removes the duplication of efforts for user interface responsibilities. It does so by consolidating all UI code to the client. Doing so eliminates the duplication of efforts on the server side in terms of the user interface. As depicted in Figure 1.6, the responsibility for the user interface rests solely with the client.

The server initially returns a payload containing JavaScript and client-side templates. The JavaScript payload could possibly be aggregated, which means that all JavaScript source files that comprise the web application can be combined into one JavaScript source file. In addition to that, the JavaScript payload might also be minified.

Minification is the process of removing any unnecessary characters from the source code, which may include renaming identifiers in the source code without changing the functionality of the source code, in order to reduce its storage footprint.

Once the web browser has fully downloaded the JavaScript payload, the first order of business for the JavaScript code is to bootstrap the JavaScript application, rendering the user interface on the client side.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.83.151