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.
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.
Why build a SPA?
SPAs comes with their own advantages. Here are a few of them-
becomeextremely 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 betterquality 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-
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 email@example.com and we’ll help you out.