Why SPA so much better than MPA about load performance (explained with use case diagram)
Hello my name is anno i’ve been working on SPA about eight hours a day for 4 months , i want to share my experience about some mistake and right about SPA and MPA and how its works
first lets check the definition about SPA and MPA and how its work
What is Multi Page Application?
Multi page applications are the traditional web applications that reload the entire page and displays the new one when a user interacts with the web app.
Each time when a data is exchanged back and forth, a new page is requested from the server to display in the web browser.
What is Single Page Application?
SPA consists just one single page. SPAs present the content effective way as it loads all the content on just one single component rather than navigating the user to different pages.
SPAs are faster than traditional web applications because they execute the logic in the web browser itself rather than on the server. And after the initial page load, only data is sent back and forth instead of the entire HTML that reduces the bandwidth.
Note:
so the changes in SPA is not based on page but component so in the SPA when you navigate to different route what will be changes is component and logic of the page
Comparison browser render SPA vs MPA
Every user use browser to open webpage and browser is rendering html , css and js to display a page and it takes time when rendering these 3 files
Lets compare MPA and SPA browser render
Case : if you want build web page that have login page, register page, homepage and content detail page and each page has 3 files html , css and js
you can look in the diagram below that MPA 9 files each page and when navigate to another page it loads again 9 files again.
its different from SPA that only rendering component changes that saving 6 files in one visit and the next time you visit SPA webpage that use service worker your browser doesn’t need to render 9 files because service use caching
In diagrams above show that MPA is rendering more html css and js than MPA + SPA do cache on your browser so the next time you visit it will BOOM ! load super-fast we can get.
but if you do wrong route in SPA it will sacrifice first time loading look diagram schema below !
Conculsions
SPA is great for user engagement because user browser doesn’t need to spend more time on loading
Room of Improvement
i like when the title is improvement who doesn’t want to improve?, is not easy ,need effort and time but getting better each day surely good ! :)
here is my advice:
Suggestion for UI / UX Designer
- please learn big image about SPA technologies because when you designing for SPA there’s big line than designing MPA — i hate it when you don’t know cause i am a developer :)
- Note that SPA is one page and can do action on same page that only changes component when you know about this i think you can build rare and interactive design
Suggestion for Developer
- Try using best practice when do routing — super important
- Try using re-usable component — super important
- Learn SPA Lifecycle — super important
Suggestion user :
- Dont be mad bro SPA is cleary not really super-duper stable
it’s originally written and published by
https://medium.com/@ndreznotanto
know more about angular https://blog.angular-university.io/
Credits:
Definition about SPA and MPA getting from this article: https://medium.com/@goldybenedict/single-page-applications-vs-multiple-page-applications-do-you-really-need-an-spa-cf60825232a3
