Single Page Application (SPA)

In this blog, I’m explaining single page application.                                                    

A single page application is also known as single page interface, is a web application or a website that loads for single time and dynamically updates that page a user interacts with the application.

Most web applications use a server - templating model. This model relies on an application server that processes data and sends it out as HTML, which is rendered on the client in the end. When the user clicks a button or a link on that page, a HTTP POST or GET operation is executed on the application server and a brand new HTML page is returned to the client browser to be rendered again.

AJAX came into play to minimize page re-rendering by updating only the page area that changed. Despite this huge improvement, AJAX still does not stand as a complete solution.

The main problems web applications are facing today are:

·         Bad user experience – Continuous page re-rendering has a negative impact on the user experience because network latency cannot be hidden from the user.

·         Poor performance – Unnecessary re-transmission of data over the wire occurs because the page completely reloads on each user interaction.

·         Lack of offline support – A web application ‘is alive’ as long as there is server connectivity. If the server connectivity drops, the web application is practically worthless.

The Single Page Application tries to solve all of the problems mentioned above, by requiring no-page reload from the browser during an application session. The user interaction and changes of the application state are handled in the context of a single Web document. Thus, the user experience improves tremendously.

A SPA can deliver the rapidity of a desktop application and the portability of a website. Here is a list of the main characteristics of a SPA:

·         It renders like a desktop application – The SPA has the ability to redraw any part of the UI without requiring a server round-trip to retrieve HTML.

·         It responds like a desktop application – The SPA minimizes the response time by moving working data and processing as much as possible from the server to the browser. It has the necessary data and business logic to make most decisions on client. Only data validation, authentication, authorization, and permanent storage occur on the server.

·         It notifies users of its state, like a desktop application – When a SPA has to wait on a server, it will render a progress bar or a busy indicator to prevent the user from getting confused by the delay. Also, navigation between different areas is smooth and continuous. Compare this to a traditional website, where the user actually has to guess when the page is loaded and usable.

·         It is accessible, like a website – Unlike most desktop applications, users can access SPAs from anywhere they have an Internet connection and a decent browser. Today, this includes smart phones, tablets, laptops and desktop computers.

·         Can go offline – Unlike the traditional web application, a SPA can go offline if the connectivity to the server drops. When the connection is on again, it synchronizes the local data with the server. Just think of mobile devices and you’ll know how useful this feature is.

·         It is instantly updated and distributed, like a website – Users don’t need to take any action. All they need to do is reload the browser and it works.

·         It is cross-platform, like a website – Unlike most desktop applications, a SPA works on any operating system that provides a decent browser. This is mainly considered a developer benefit, but think of users who use many devices.

The bandwidth is reduced – The communication with the server is done in small chunks. Data is packaged up in small objects (for example JSON) which are great for traffic-limited or slow connections (i.e. mobile environments).

Leave Comment