Single page applications are known as SPAs.
There was a time when the server fulfilled each page request by sending an entirely new page to the browser.
The technology for creating such an application remains generally the same. The only thing that changes is the philosophy and the components of the application.
Popular Single Page Applications
Some of the most notable single pages application examples are:
- Google Maps
- Google Drive
Ever noticed, you are searching for a location on google maps it keeps on updating on its own. As you move around the maps, new locations start to pop up without any page refresh. This is one of the best examples of a SPA application.
The same goes for google drive, Facebook and Twitter.
How This All Works
Let us start with the concept of a traditional website.
A traditional web app makes a call to its server. The server in response renders a new HTML page. This rendering triggers the browser to refresh itself to show the newly rendered page.
Now, let us look at a single page application example.
In a SPA the first page renders and is sent to the browser. Now all the requests from here on out will happen through AJAX calls.
AJAX call return only data instead of HTML (Rendered Page) from the server. The returned data populates the fields on the webs page that are already on the browser thus updating itself with new data without reloading.
There are innumerable positive aspects associated with Single Pages Applications. Let me list down the top benefits.
1. Fast Response
Since there is no need to reload the whole page and no need to receive a fully rendered page, the application feels much faster than any traditional web app.
2. Fewer Resources Consumed
In this case, the server does not have to utilize many resources. For SPAs, the focus is not on building a number of layouts on the server side. The focus is on making use of proficient APIs to send and receive data instead.
3. Great For Developers
When you are working with a team of developers, developing such an application yields great results. Front-end developers can focus all of their efforts on making the web app look good. The back-end developers, on the other hand, can fully focus on the API without worrying about the front.
The negative aspects are few but still, we need to consider them before making a decision.
2. Poor Performance On Low Power Devices
With these applications, all the processing is happening on the client's end. If a device is old or has low processing power then the app might not work properly. It will work slow and glitch along the way.
3. Employing SEO Tactics Are Tad Bit Difficult
Implementing SEO on SPA is no easy feat. Too many technicalities are associated with this. This topic needs a blog of its own.
Here I will mention a few things. For a successful SEO implementation, the application is pre-rendered in the back-end. After that, on the client’s side, Angular bootstrap needs to take over the page.
Future Of SPA Applications
Imagine that one website you have to visit daily. It might be a company's website or an e-commerce website.
Let us take the example of an e-commerce website and say you have to buy a cell phone. You swift through 100 pages in order to find the perfect cellphone. Each time you click on a link, your browser refreshed and new page loads.
For each page reload, you have to wait on an average of 10 seconds. In total, a hundred pages will take you back nearly 16 minutes. Instead of browsing, you just spend 16 minutes waiting for the browser to load.
This is where a single page application can work its magic. The waiting time is radically reduced with the help of the SPA.
You get the picture now? How fast the searching and loading on their website would be? The answer is, very fast.