Ever wondered, how many pages are loaded when you use Facebook, Netflix, Gmail, Google maps, etc. Just one! Yes, you read that right. Traditionally the Internet has always produced multi-page websites. We’re now in the era of Web-apps. With Internet Browsers getting powerful by the day, developers have been able to do things which were unheard before. All the examples above are the result of such tremendous developments.
Case in Point- Single Page Apps
In simple terms, a SPA is nothing but whatever we do, wherever we do, however we do, the action takes place on the same page and no second page is loaded in the whole interaction. Technically, they do not update the whole DOM but only some parts of it without refreshing the page. There are, of course, exceptions to this rule and they can be easily covered.
So what exactly happens? In traditional multi-page websites, web browser sends requests to the server to load a page and server replies with the page contents and it gets loaded. When you click on another link, the same cycle is executed. In contrast to this, in SPAs, the page is loaded once and while you click on different links on the page only sections of the pages are updated using JavaScript and AJAX.
In this, APIs/web-services acts as a glue between client side and server side. Client side is where all the navigation is done. This results in saving both time and data transfer between the server and the client. The client (the browser, in our case) also takes care of UI rendering, data/state management and data access via APIs.
Server is the place where all the core business logic resides like data validation, file handling, and database access among other things. Most importantly, the backend exposes an API for the clients to consume using JS/AJAX.
Things like authentication are usually done using JWT (JSON Web Tokens). These tokens are generated on the server and sent to the client on successful authentication. The client is required to send this token with each request it makes to the server. This is similar to having a session in traditional websites.
The JavaScript community at large has worked a lot on developing different frameworks for SPAs. React,
Why build a SPA?
SPAs comes with their own advantages. Here are a few of them-
- They are faster than traditional websites. Reloading only a section of the page saves those extra page reload minutes. Also, the main page resources are loaded only once. Did you happen to notice the progress bar that comes when you log into Gmail? It’s actually downloading the whole JavaScript (which has all the templates in HTML) to the browser for one time. Once that’s done, Gmail
become extremely fast to operate because only JSON is exchanged between the server and the client. - The overall development cycle is simplified. While the backend team can work on their logic, the front-end team puts together the HTML templates from the design team. Everybody has limited areas of focus which results in
a better quality code. - Since the backend is returning only one kind of response (JSON/XML), one can use the same APIs in mobile apps and even on IoT devices.
- These can easily be modified to Progressive Web Apps, which allows local data caching and using it for offline application access.
Why not to build a SPA?
With advantages, there are some disadvantages as well-
- It’s very difficult to have to do SEO in a SPA due to the major use of AJAX and JavaScript. Search engine crawlers need static content in order to index them. They can’t understand AJAX calls (yet). There have been some improvements in this regard though. One can use Server Side Rendering (SSR) to create static pages on the server and serve them to the browsers. It’s rather hard to set up but it gives the same performance as a SPA would.
- The major use of JavaScript increases the risk of excessive memory leaks on the clients. However, there have been many improvements in both the browsers as well as in the client side frameworks to mitigate these issues.
- It is highly dependent on JavaScript and can affect user experience where JavaScript is disabled (for eg, in corporate environments)
Conclusion
SPAs are great when it comes to UX. The whole app becomes snappy which makes users happy. However, they’re not that great at handling SEO. But then, there is work being done to mitigate this as we speak. We prefer using SPAs when we’re building backend systems. We feel that since the businesses are moving fast, their applications should be fast as well.
The next version of SPAs are Progressive Web Apps (PWAs). PWAs are a step further in the sense that they enable offline caching and better mobile usability. Essentially, they act like they are native apps because of these two qualities.
We, at CitrusLeaf, use VueJS & Laravel to build SPAs. These two frameworks allowed us to achieve unprecedented productivity. This combo is winning the heart of developers all around the world too!
Your business software should be a Single Page App. Reach out to us at hello@citrusleaf.in and we’ll help you out.