Single Page Application (SPA) is an old, yet only lately popular way of creating programs for the web. The idea is to fetch most of the resources from the server when user loads a website and then, as the user interacts with the site, fetch and store data via calls to an API endpoint (typically REST). In effect, page is never reloaded, wich makes the expecience more smooth than with traditional webpage. This article highlights main characteristics of SPA and specifies conditions under which the concept is preferably applicable.
With recent advent of client-side frameworks (AngularJS, EmberJS, MeteorJS, ReactJS), SPA gained much more attention in the community. New frameworks provide new abstractions that force good client-side programming techniques. Creating rich web clients is now much easier and faster. Despite the benefits that come with new frameworks, SPA isn't always considered the right way to write software for the web and not all new web projects end up being SPA.
- Application can be usable when offline. An example of popular SPA, that is connection-aware, is GMail. When user goes offline, functionality is very limited, but the app is still usable. This makes the client fault-tolerant. Things can be taken one step further. Since HTML5 brings multiple client-side storage technology to the table, server-side storage may be used only as backup and synchronization medium1.
- Application can respond very fast after each click. According to research done at Google, user feels that application is fast and responsive only if it gives him a feedback after less than 200 ms. If operation lasts longer (potentially), an indication of operation in progress should appear (e.g. spinner or progress bar). These requirements may be hard to achieve with traditional server-side HTML rendering. SPA makes it much easier.
- API is a well defined boundary that slows down software entropy. Sole fact that there is an API to be designed forces a very good practice of actually designing the software. Lack of well defined boundaries may (in time) lower maintainability of a system, because of accidental inter-dependencies being added.
- Moving presentation logic to the client reduces the need for server resources. Total cost of the system may be reduced significantly, depending on the technology at use and size of the part that handles presentation3. This point gains weight with rescent popularization of many IaaS solutions, where payments are directly dependent on resources at use.
- Modern ways of creating sofware increase morale. New things are more exciting and give people a space to grow. This can be a big factor affecting team's productivity.
When to use SPA?
Following conditions can be considered as favorable for SPA:
- Required high responsiveness,
- Required connection awareness of the client,
- Heterogenous client applications,
- Code base estimated to be large (> 100kLOC),
- Experienced development team.
Under following conditions SPA may be not advisable:
- Web-app without additional client applications,
- Required compatibility with very old browsers.
- Jose Maria Arranz Santamaria (ItsNat Java Web Framework) wrote a document titled The Single Page Interface Manifesto, where he advises on how to transition from server-side thinking to modern SPA.
- Personal website of Douglas Crockford (member of ES standards committee) contains article on causes of memory leaks in IE and how to avoid them.
- Report on research of client-side template engines written by Veena Basavaraj can be found on LinkedIn's engineering blog.