What are Single Page Applications? What are some famous frameworks for developing Single Page Application?
Before talking anything about a Single Page Application (SPA), I would like to mention that Gmail is an SPA. I hope that this provides enough motivation for you to read this post, right?
If you have interest in web development and have never heard of SPAs before then this is a perfect post for you.
According to Wikipedia-
“A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.”
Example- Gmail(as I said earlier is a Single Page Application. This is the reason before loading Gmail you see a progress bar, as it fetches everything from server once and then all the rendering is done on the client side with calls to server only for fetching data and not the DOM.
So now we all have a basic idea of what a SPA is. But why should we really develop SPAs? Is it superior to the traditional multi-pager web application?
Here are some of the advantages of SPA:
SPAs are fast, as most resources (HTML+CSS+Scripts) are only loaded once. Only data is transmitted back and forth.
• Better U/X
A much-improved user experience due to less full page reloads and a better overall performance because less bandwidth is needed.
• Mimics a Native Application
SPAs make it easier to build web experiences that more closely mimic a native app-like experience within the browser of the mobile device without having to build and distribute a hybrid-native mobile application.
• Easy Debugging
Single-Page Applications make it easier to build web experiences that more closely mimic a native app-like experience within the browser of the mobile device without having to build and distribute a hybrid-native mobile application.
Why Don’t We Use SPAs Everywhere Then?
If SPAs are so good and fast then why not develop each website as a Single Page Application? Well, we all know that each coin has two sides. Following are some of the disadvantages of SPAs:
• Unsaved changes
An application, upon leaving the page, will warn users about losing any unsaved changes. The browser allows us to use the before unload event to do just this. However, the application cannot use this feature because users don’t request real pages.
If a SPA grows to a significant size, loading the entire application on page load will be slow. This leads to conditionally loading CSS and JS with a script loader.
• Memory Leaks
Pages are “long lived” increasing the chance of memory leak issues. This can degrade UX and because of battery drain on mobile.
Final Call- SPA or No SPA
Now as we have looked into both the pros and cons of SPAs, so what should be our final call? To choose SPA or not?
The first step before developing a web application is to consider the goal of it. If you know you need multiple categories (because, for instance, you run an online shop or publish a lot of other content) — use a multi-page site. If you are sure that your site is appropriate for a pure single-page experience then just go for it. And if you like SPA but can just barely fit everything into a single page, consider the hybrid site instead.
Frameworks to Implement SPAs
Where to start?
To start developing a SPA with Angular JS you can look into:
For this tutorial, you would require a very basic understanding of Angular JS.