Since the start of the internet, web applications have been on the rise as opposed to now “traditional” desktop applications. In fact, not only that web applications have overtaken desktop ones, but desktop applications are in risk of going extinct.
Modern Software industry has blurred the line between “web developer” and “software developer”, nowadays, both are actually web developers (baring specialization nuances).
Why is this happening? Well, many reasons. Web apps are more accessible, you just need internet which is everywhere now. They a compatible across all devices, systems and browsers. Web apps are easier to distribute, update and maintain.
To clarify, this post is not about comparing the use of a single page for your website or multiple pages. In other words, presenting all your content in one inclusive long page or dividing it across sub-categorized pages. Read THIS great article if you want to learn about that particular debate.
I will try in this post to dissect the differences between Single-Page Applications (SPA) and Multi-Page Applications (MPA). What advantages does one hold over the other and when to use which these approaches for your website.
A SPA is a web app that loads an HTML document one time when you first access it, then never reloads the page again. Whenever you interact with anything on the page, it refreshes parts of the page only (parts of the DOM. Or components). Examples of famous sites that use this technology are Google, Facebook and Youtube.
SPAs create the illusion of instant data access, they keep the user immersed by eliminating browser reloading which breaks the flow of the experience and adds extra wait time. This makes the web app feel like a desktop app and that all this data is already loaded when it’s actually not.
Whenever a user clicks a link on a SPA, the app sends an AJAX call behind the scenes to fetch data from the server then process it using JavaScript and then display it on the page, all without refreshing the page.
You can create a Single-Page Application using just JavaScript with the assistance of JQuery to manage your AJAX calls. However, modern JS front-end frameworks make this task easier and modulate the application’s components in an organised manner that facilitates the development work flow. Biggest of these Frameworks are React, Angular, Vue and Ember.
MPAs are the “traditional” way of making websites. Each link click or form data submission sends a request to the server which renders and sends a page to the browser which in turn refreshes the page completely with the new content.
When a website has a large, intricate amount of information to supply, developers tend to use MPAs in this situation. MPAs support multiple layers on UI, and when there is a large amount of information, it is usually better to divide it into a number of pages.
Based on information I have gathered, personal experience and a little bit of opinion.
If you are building a personal website, a blog, a company website or anything that needs a brand, then you are dependent on SEO. You want the name of your website to be out there and found.
In this scenario, you should go with the traditional way, MPA is for you.
However, if you are building a functionality application. A web tool, a online desktop app or anything that needs to be responsive, or even in a case where you don’t concern yourself too much about SEO and want to advertise your content yourself. Then you should build a SPA that will provide a faster and smoother user experience.
Hopefully I have addressed this question properly, if you need more information, I have a list of resources at the bottom and search engines (Google) are your friend.
Single-Page Apps vs Multiple-Page Apps