When the web was born it was originally only hypertext documents linked together. Then there was an introduction of a forms tag which started the “web applications” era.
In recent times, there has been huge demand for more advance web applications which are readily replacing the old desktop applications. Although the world is gradually abandoning the browser-based web applications for their mobile domain counterparts, there are still two major design patterns that is employed to develop web applications. They are multi page web applications (MPA) and single page web applications (SPA).
What is a Single Page Application?
A Single Page Application is a web application that requires only a single page load in a web browser. It is a web application or web site that fits on a single web page with the goal of providing a user experience similar to that of a desktop application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
Single page apps are distinguished by their ability to redraw any part of the User Interface without requiring a server round-trip to retrieve HTML. This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.
A standard web app is structured from three different perspectives:
Architecture: what (conceptual) parts does our app consist of? How do the different parts communicate with each other? How do they depend on each other?
Asset packaging: how is our app structured into files and files into logical modules? How are these modules built and loaded into the browser? How can the modules be loaded for unit testing?
Run-time state: when loaded into the browser, what parts of the app are in memory? How do we perform transitions between states and gain visibility into the current state for troubleshooting?
However, according to Wikipedia.org there are various techniques available that enable the browser to retain a single page even when the application requires server communication. They include using:
AngularJS is a fully client-side framework. AngularJS’s templating is based on bidirectional UI data binding. Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. In the AngularJS framework, the controller and model states are maintained within the client browser. Therefore, new pages are capable of being generated without any interaction with a server.
Web-Sockets are a bidirectional real-time client-server communication technology part of the HTML5 specification, although, superior to Ajax in terms of performance and simplicity.
• Server-sent events
Server-Sent Events (SSEs) is a technique whereby servers can initiate data transmission to browser clients. Once an initial connection has been established, an event stream remains open until closed by the client. SSEs are sent over traditional HTTP and have a variety of features that Web-Sockets lack by design such as automatic reconnection, event IDs, and the ability to send arbitrary events.
Advantages & Challenges of SPAs
Considering the level of technological improvements on Single Page Applications there are still some few major demerits and challenges it exhibits.
• These cons could take any form such as:
– Heavy client frameworks which are required to be loaded to the client.
– UI code is not compiled, so it makes debugging difficult, thereby risking exposure to potential malicious users.
– Search Engine Optimization problems because the search engine crawler only sees a different version of the page than that of the users.
– Cancelling navigation is difficult.
– Inaccurate history data.
– The browser does most of the heavy lifting, which means performance can be a problem especially on less capable mobile devices thereby causing the user’s data allowance could be eaten up unnecessarily.
• Meanwhile the advantages of SPAs cannot be underrated as well. These include:
– Faster page loading times.
– Improved user experience because server load is reduced.
– No need to write the code to render pages on the server.
– Decoupling of front-end and back-end development.
– Simplified mobile development; you can reuse the same backend for web application and native mobile application.
Web browsers have come a long way. Modern ones offer a variety of APIs that enables the creation of the best user experiences software has to offer. Invariably, the work of ensuring a suitable user experience with a single page application still falls on the developer.
Also, recall that the Single Page Applications came into play because the web wasn’t designed for such richly interactive apps but soon enough browsers will catch up with the way apps are now being designed.
Without much doubts, its obvious core building blocks of the web (HTTP, URLS, HTML) are probably here to stay, as they’ve proven to be a strong foundation for several generations of web-apps.
We can see that major SPA concepts such as routing, partial loading, and data-binding, are gradually migrating upwards into the web browser.
It is actually up to the browsers to adopt latest techniques and features.