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.
    Definition:
    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.”
    In simple language, a SPA may retrieve all of the application’s HTML, JavaScript, and CSS code on the initial load or may load resources dynamically to update in response to user interaction or other events. Other web apps, in contrast, present the user with an initial page that is linked to parts of the application on separate HTML pages (remember index.html / home.html ?), which means that the user has to wait for a new page to load every time they make a new request.

    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.

    Why SPA?

    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:

    Faster
    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.
    • Loading CSS & Javascript
    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

    Some of the popular open source JavaScript frameworks that help with building SPAs, such as:
    • Angular
    • React
    • Ember
    • Aurelia
    • Vue.js
    • Cycle.js
    • Backbone

    Where to start?

    To start developing a SPA with Angular JS you can look into:
    https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
    For this tutorial, you would require a very basic understanding of Angular JS.

    Happy Coding! :)

    References:
    https://en.wikipedia.org/wiki/Single-page_application
    https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
    https://blog.angular-university.io/why-a-single-page-application-what-are-the-benefits-what-is-a-spa/
    https://www.whitesourcesoftware.com/whitesource-blog/secure-single-page-application/


Log in to reply
 

Looks like your connection to KGEC FORUM was lost, please wait while we try to reconnect.