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.
– 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
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.
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).