As we briefly mention in our previous post, modern web apps are being developed with a heavier focus on the frontend layer. A trend founded on Single Page Applications (SPA). SPAs are built using modern Javascript frameworks like Vue, ReactJS and AngularJS that have developed a browser-level data layer to temporarily hold data for a user while they use the web app.
SPAs have found popularity for many reasons; frontend developers find the increased power grab in the app development life-cycle alluring; SPAs are more intuitive and easy to use for users; and they also offload some stress from the backend (server-side) application.
So let’s discuss a few pointers on making your SPA work better for your backend server.
Making SPAs work better for server-side scalability
- Use the data layer to store all server-side responses for reuse. It is most tragic to see an SPA make repeated calls to the backend API when the API responses could be easily stored in the reducer for future use.
Frontend teams should make a concerted effort to make API calls wisely and understand that the AJAX requests to their services is a privilege and not a right! - Look for ways to make fewer API requests with bulk data retrieval. In addition to repeated requests; Frontend SPAs can save unnecessary calls to the server API by bulking expected data requests together and retrieving them in one go.
As an example; in this SPA for our website; we make a bulk request to the WordPress Restful API for the first one-hundred images and store them in the reducer with easy key references so that each media item is not queried for its URL separately. This happens near the beginning of the app load. All throughout the remainder of the app, the components first check to see if the media item needed is already present in our reducer, and if not; only then is an additional API call made to request media details.While some might argue that we’re making the backend app work extra hard to generate a list of one-hundred media items when half of them may not be used by the user; we argue that we are saving on work that the web server and all associated servers (including the database) would have to do to produce independent responses to each media query! Remember latency is a big problem with networked applications!
By Mustafa Ghayyur,
July 4th, 2018
