Single page web application

from Wikipedia, the free encyclopedia

As a single-page application ( English single-page application , short SPA ) or single-page Web application is a Web application called that of a single HTML is -Dokument and their content dynamically be recharged. This type of web architecture is in contrast to classic web applications, which consist of several linked HTML documents. However, this creates the basis for developing a web application in the form of a rich client or fat client distribution. An increased client-side execution of the web application enables a reduction of the server load as well as the implementation of independent web clients that offer offline support, for example.

Goals and requirements

Outline of the flow of a single-page web application

By using a single website as the foundation for a complete web application, client-server communication can be reduced. This website is only dynamically expanded while the application is running. In this way there is no need to navigate between different websites. As a result, waiting times can be reduced and the flow of presentations in the client is not stopped. With the otherwise usual change of web pages in the context of a web application in the web browser, all client-side presentation logic is ended and restarted on the next web page. Such behavior prevents long-running client-side processes and the use of a continuous WebSocket connection.

Another feature of SPAs is often referred to as "offline-friendly". As the presentation layer is fully implemented on the client, it is possible to create persistent caches using the web storage function. In the event that the user data server cannot be reached, data from the cache can be used. The application can therefore continue to be operated on the client without having to be connected to the server. The use of client-side persistence can go beyond the creation of intermediate storage and lead to distributed persistence. In such distributed data storage, each client can be viewed as an individual data node, which synchronizes its data stock with other subscriber nodes when there is an existing communication connection. The “offline-friendly” property also refers to the portability of single-page applications to mobile devices. So-called HTML5 mobile offline apps are largely based on the same infrastructure as SPAs.

It can be seen that single-page web applications are decentralized. In previous approaches, the web server was always the central unit for controlling the presentation. In the case of SPAs, this only provides user data. The web application is completely segmented into two separate systems. The following three rules for segmentation in single-page web applications can be defined:

  • The session status is saved in the client application, not in the server.
By implementing the web application on the basis of a single HTML document, the status of the application in the web client is always retained. Reloading this HTML document is equivalent to restarting the application. In addition, HTTP is a resource-oriented and stateless protocol. The otherwise usual artificial emulation of session states based on cookies is no longer necessary for single-page web applications. The type of session management is a classic design problem in distributed applications, which can have a strong impact on the scalability and performance of the application. The server-side functionalities can be implemented statelessly through the client-side session management. This means that any server node can respond to load balancing. Furthermore, no resources are used on the server side per active client session.
  • The web client is an independent unit and is based on various services.
This allows the web client to react independently to user actions. A large number of client-server round trips can be dispensed with, which reduces data traffic, the application reacts more quickly and the user experience increases. Furthermore, the client can be developed separately from a server and only needs to use the services when they are needed.
  • The services used do not make any assumptions about how the web client uses the services offered.
The server side can also be implemented and tested separately from the client. This decoupling means that the services provided can also be used in various other projects.

Application scenarios

Large numbers of users
Areas of application with large numbers of users are the typical standard scenario for single-page web applications. Successful projects such as Facebook, Google Gmail, Google Maps and Twitter have done pioneering work here. All examples are represented in the B2C market. Large numbers of users are to be expected here. The SPA paradigm is ideal for reducing the server load and at the same time realizing optimal scalability of the application. The operation of an exclusively client-side presentation and session management relieves the server-side infrastructure and allows scaling without distributed caches at the level of the application server ("decentralization").
Offline scenarios
The implementation of offline scenarios is also possible for classic web applications on the basis of the HTML5 application cache , but in such a scenario only a client-side storage of server-side generated HTML documents takes place. Business logic cannot be executed. In contrast, offline scenarios based on the SPA paradigm allow the execution of client-side technical concept logic in an offline scenario. Ultimately, this is only limited by the availability of the required data. For client-side data provision, the SPA paradigm allows the implementation of data provision strategies such as caching, replication or hoarding. In this way, productive use of a web application can be offered in an offline scenario.
Small projects
A straightforward technical concept, such as for company appearances or "product landing pages", is ideal for implementation according to the SPA paradigm. Due to the small technical concept, the amount of business logic that is implemented on the client side is limited. The main focus of the implementation is on the presentation layer. The SPA paradigm can offer a high level of interactivity in this area of ​​application and allows the implementation of an appealing user interface.
High interactivity
For applications such as computer games, the web browser offers a platform-independent infrastructure, especially in the 2D area. In this area of ​​application, high interactivity and short latency times are required. The implementation of such applications has already been carried out in the past as a plug-in supported SPA with Adobe Flash or Microsoft Silverlight. With the advent of HTML5, Canvas, WebSockets and WebGL , RIA / JS-SPAs represent an alternative. The JavaScript-based implementation offers the advantage that only web standards are used which are also available on mobile devices. In this way, several target systems can be addressed with one implementation.
Hybrid web apps
The SPA paradigm is suitable for embedding in native mobile applications. In so-called hybrid applications , a web client is embedded using a framework such as Apache Cordova . The implementation of such a web app is client-oriented and mostly according to the SPA paradigm.

Possible JavaScript frameworks for SPAs

The following MV * frameworks (MV * as a placeholder for MVC , MVVM , MVP , ...) can be used to implement a SPA web client:

techniques

There are different approaches to enable SPAs even when interaction with the server is required, such as:

See also

Web links

Individual evidence

  1. ^ [1] , Experiences on a Design Approach for Interactive Web Applications by Janne Kuuskeri