Multiple-page application or Single-page application?

If you have worked on web applications, there is a high chance you have heard of the terminology, Multiple-page applications (MPA) and/or Single-page applications (SPA). Even if you haven’t heard of these terms, I am more than confident that 90% of the readers have experienced in some way with both types of applications.

So what is Multiple-page application and Single-page application?

Single-page application (SPA)

A single-page application works directly in the browser and does not reload or move the user from page to page. Gmail, Facebook and several other webpages use this. If you go there and click something, it will actually not reload at all. In fact, SPAs closely mimic desktop applications. With no transfers from page to page, SPAs are very fast as there is no need to reload over and over again. How this works is through JavaScript which loads all the other content one needs.

It requests the markup and data independently and renders the pages straight in the browser. With advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, this becomes very possible!

SPAs keep the user in one web application where content is given fast and in an easy manner.

Pros:

• Fast — only data is transmitted
• Streamlined — no need for code to render additional pages
• Easy to debug with Chrome
• Can cache local storage effectively

Cons:

• Very hard to implement SEO
• Requires JavaScript — if user disables it, application can’t load
• Not the best security — With Cross-Site Scripting (XSS), attackers can inject client-side scripts into web application by other users.

Multiple-page application (MPA)

Most people refer to Multiple-page applications as the “traditional” way to building web applications.

This is, that every time a change occurs, there are requests rendering a new page from the server in the browser. One thing to note is that multiple-page applications are bigger than single-page applications since they have to be. And with that, trying to get a MPA application up becomes a pretty complex process as there are numerous things to account for. But, besides that, generally MPAs are preferred by most businesses.

Pros:

• Very easy to enable SEO
• Structured

Cons:

• Frontend and Backend are very dependent or “coupled” to one another
• Longer development time — both client and server side needs to be built

Conclusion

So this isn’t a matter of which approach is better. In fact, that is a silly question. The most important thing to note is that, these 2 methods have their own Pros and Cons. Depending on your company and needs, you should turn to either solution. For example, an e-commerce site would rather go with a MPA unless they are dead set on going for a SPA approach.

Although the industry is moving towards SPA, MPA still boasts an advantage in several areas (e.g. structured). But, there is an alternative model called the hybrid model which is a single page application that makes use of URL anchors as synthetic pages. This enables more in build browser navigation and preference functionality. This won’t be covered in this article but is definitely an interesting concept.

As always, thank you so much for taking the time to read and have an amazing day!