Frameworks for your Single Page Application (SPA)
Author : John Prabhu 14th Feb 2019
A correct decision made in choosing your technology and framework makes your application development easy. Choose your framework wisely since this decision has the potential to make or break your project. In the development community, there is room for the constant evolution of technology and so is it for frameworks. SPA frameworks have been in here for a while, and yes, they are evolving with every new version.
Let’s see what a single page application is and their pros before looking for a framework.
WHAT IS A SINGLE PAGE APPLICATION (SPA)?
When a web application loads only a single HTML page and dynamically updates the content of that page as the user interacts with the app, it is called Single Page Application. What were MPAs doing that SPAs don’t?
Let’s have a look at the traditional multiple page application (MPA) in brief. Earlier with server-side request and response, a browser receives HTML from the server in the first place and then renders it. A full page refresh is required to process/support navigation from one URL to another, and the server sends again a new HTML for the new page.
Now, with client-side rendering, a browser loads the initial page from the server with the scripts (frameworks, app codes, and libraries) and stylesheets for the entire app. This doesn’t require a full page refresh in order to process navigation from one URL to another.
The HTML5 API helps to update the URL of a page. The information of the new page are generally stored in JSON format, and browsers send AJAX requests to servers and retrieve them. Since the frameworks (e.g. JavaScript) are downloaded in the initial page load, the SPAs update seamlessly once the server responds to AJAX requests.
PROS OF ADAPTING TO SPAs:
USER EXPERIENCE
Snappier user experience due to faster load time during navigation within the app.
Highly richer and advanced applications can be built with SPA framework.
With server-side rendering, the time taken to initialize the application can be well taken care of.
DEVELOPMENT
It ensures code reusability down to the level of UI elements and is used for developing mobile applications.
Since SPAs are new, many developers are eager to work on them and they are likely to be used at a higher rate in the future.
WHAT ARE THE RECOMMENDED FRAMEWORKS?
Depending on the project, you may have to wisely select your framework to avoid backfires. A typical SPA backfire is discussed in the coming section.
1. React
2. Aurelia
3. EmberJS
4. MeteorJS
5. PolymerJS
6. AngularJs
7. Backbone
8. Knockout
9. Dojo Toolkit
10. Batman JS, CanJs, Spine
WHAT HAPPENED WITH TWITTER?
Twitter incorporated the new Single Page Application architecture back in 2010 and built pressure on the client-side JavaScript with all the UI rendering and logic.
As the client-side library had to be loaded up front, it resulted in slow initial page-load times. Also, the SPAs transferred quite a huge processing power from the servers to the user devices. This failed miserably and resulted in poor user experience and inconsistency across a variety of browsers. Soon, Twitter changed their mind and re-architected it to the PWA (Progressive Web Application), which is again a new technology, for seamless user experience across browsers.
Thus, not every project you take up necessarily require SPAs. Hence, it is very important to clearly understand the brief and develop a product that operates effectively and serve all the needs.
Your focus on the technology that worked well for your competition should not compromise with solving your business needs. It is recommended to understand the requirement clearly before selecting a framework or stack for your SPA development.
Hence, consult with an IT services firm for a framework before getting into an SPA project.