One page? or many? evaluating single-page applications

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.

Single-Page Applications

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.

Pros

  • Speed: Your assets (HTML, CSS and JS) are loaded once, and only parts of your page and data are requested from the server making it extremely responsive.
  • Flexibility: SPA frameworks work by fetching data using RESTful APIs displaying it in any form they like, this allows us to create different designs for the same data.
  • Adaptability: JS frameworks are not tightly coupled with back-end business logic, therefore we can change and update everything on the front-end without having to touch server side code.
  • Using the same REST API as a SPA, you can create a mobile app that show the same data but runs natively on a mobile system.
  • SPAs can request and cache all the data after loading the page so that it can be used offline in case of loss of connection.

Cons

  • SEO (Search Engine Optimisation) weakness: JS rendering of the pages on the browser instead of server-side rendering makes crawlers get less information about your pages.
  • Performance: your pages are rendered on the browser, creating potential slow experience for lower end user devices.
  • Memory leaks: SPAs constantly run many operations on the user’s machine, some of these operations can stay running when not needed.
  • Security: SPAs are more prone to XSS (Cross-Site Scripting) attacks and general malicious use.
  • Compatibility: SPAs tend to favour modern browsers and their functionalities are less backward-compatible.

Multi-Page Applications

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.

Pros

  • SEO: the crawlers see what the users see, therefore your pages are correctly crawled and indexed in search engines.
  • Maturity: Since MPA is the traditional way, there is an abundance of frameworks that support this architecture and loads of support and communities.
  • Compatibility: better support for legacy browsers because of less dependence on modern JS functionalities.

Cons

  • Speed: MPAs are slower and break user experience by having to reload the page on each link click.
  • Front-end is highly dependent on back-end and the other way around.
  • Developers need to be knowledgeable about multiple paradigms as they have to use full stack frameworks (generally speaking).

Which one should I choose?

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.

Resources

Single-Page Apps vs Multiple-Page Apps

Single-page application vs. multiple-page application

Single-page applications

SPAs vs MPAs/MVC (video)


Copyright © 2019 Ahmed Hadjou