Multi page web applications vs. single page web applications

multi page web applications versus single page web applications

This blog has been updated! Check out the latest: 'Single Page Applications: A Powerful Design Pattern for Modern Web Apps'. 

When the web was born it was originally only hypertext documents linked together. Then there was an introduction of a forms tag which started the “web applications” era.

These days there is a huge demand for very sophisticated and complex web applications which are willy-nilly replacing the old desktop applications everywhere. And even though the world is slowly moving from browser-based web applications into the mobile domain, there are still two major design patterns that exist for web applications development – multi page web applications (MPA) and single page web applications (SPA).

MPA is a traditional kind of web application. This means that every time the application needs to display the data or submit data back to server it has to request a new page from the server and then render it in the web browser. Nothing is wrong with this approach for simple applications. But if there is a need to create a rich user interface then the page might become very complex and to be loaded with a lot of data. Generating complex pages on a server and transfer them to the client over the internet and rendering them into the browser takes time and degrade the user experience because of that. In the beginning of 2000s MPA was improved by introducing AJAX, which allowed refreshing only parts of the page and not the whole page. It helped to improve the user experience but added complexity to the page itself.

Ten years later the SPA pattern emerged. SPA is essentially an evolution of the MPA+AJAX design pattern, where the only shell page is generated on the server and all UI is rendered by browser JavaScript code. SPA requests the markup and data separately, and renders pages directly in browser. We can do this because of the new advanced MVVM JavaScript frameworks emerged like AngularJS and KnockoutJS.

So what are the advantages and disadvantages the SPA has over MPA?

SPA advantages over MPA:

  • Faster page loading times
  • Improved user experience because the data is loading in the background form server
  • No need to write the code to render pages on the server
  • Decoupling of front-end and back-end development
  • Simplified mobile development; you can reuse the same backend for web application and native mobile application

SPA disadvantages to MPA:

  • Heavy client frameworks which are required to be loaded to the client
  • UI code is not compiled, so it’s harder to debug and it’s exposed to potential malicious user
  • SEO (search engine optimization)  implications; since your pages are built in the browser, the search engine crawler will see a different version of the page than that of your users

So, why not to use some kind of “hybrid” approach? So, we would have an MPA application (as a safer pattern) where some of the pages would be implemented as SPA? I think it’s possible but depending on the situation it might not provide the benefits of either MPA or SPA and unfortunately would combine the disadvantages of both:

  • Pages would load slowly because of both pre-rendered markup and client frameworks would need to be loaded to the client
  • More complicated development – you would need to use two frameworks – MVVM for the client and MVC server-side one.
  • Front-end and back-end would be tightly coupled
  • You cannot reuse the same backend from mobile applications

So, what pattern to use and when? I would suggest not to mix the SPA and MPA approaches when developing a particular application. Each of those patterns is good for its own use case, but mixing them together is not very beneficial.

 

Contact us

Topics: Digital Transformation

Top