October 2, 2017

Introduction

What's the difference between single-page application and multi-page application?

Nowadays, websites more and more look like applications with many interaction possibilities rather than static pages which we had around 10 years ago. On the one hand, the reasons for that lie in the users' demand for receiving and generating information based on their personal characteristics and requirements. On the other hand, website owners want to provide users with more convenient user interfaces to work with the information.

Let’s take a look at how we can build a front-end part of the websites. There are two main ways of building websites today: a multi-page application (MPA) - more traditional way, and a single-page application (SPA) - more modern way. Let’s start from the multi-page approach.

Multi-page application approach

Multi-page application approach

In the simplest form, a multi-page application consists of several pages with a static information (text, images, etc) and links to the other pages with the same content. During a jump to another page, a browser reloads content of a page completely and downloads all resources again, even the components which are repeated throughout all pages (e.g., header, footer). The main technologies for such a type of website building are HTML and CSS. It was the first way of developing websites so developers are quite experienced in it and have many solutions for you. It allows to create uncomplicated websites of this type quite fast and without many problems.

Examples of multi-page applications we built:

Issues of multi-page applications and their enhancing by using new technologies

During development, a necessity in more complicated interactive components may occur (e.g., in forms). In this case, you still can use the traditional way but you will be bounded by standard functionality. However, there are more suitable technologies for non-standard, complicated and interactive things and they are JavaScript with AJAX (asynchronous JavaScript and XML). The prosperity of Web 2.0 became possible due to the evolution of these technologies. Now you can implement multi-step forms, various charts, graphs and diagrams on your website with dynamic refresh, with keeping various states, and with no need to reload the whole page. Those technologies help to integrate SaaS on your website through APIs as well and their usage improves user experience (UX) a lot.

But at one moment you can realize that your website has become too complex with the multi-page application approach and you can find yourself creating your own framework to maintain cumbersome UI on a back-end. At first, you can divide your back-end and front-end with REST API and they will communicate in a specific language of queries. At this point of time, you will need some front-end solutions. Many companies have already faced the same problems and they realized the benefit from making a source of their project open: you provide a community with a platform and the community accelerates the evolution of the solution.It’s a win-win situation. Today you have a choice between plenty of solutions with large communities and ecosystems, e.g.:

  • React
  • Angular
  • Vue

Also, there is a huge code base in NPM (Node Package Manager) where you can find solutions for almost all problems. So currently with the help of a community and its ecosystem, it’s not that hard to create dynamic, nontrivial solutions and integrate them into multi-page application websites.

The good examples of what functionality can be integrated with modern technologies into a multi-page application website

Forms and quizzes (Vue.js)

Forms and quizzes demo made with Vue.js

Forms and quizzes demo made with Vue.js

Search (React)

Search demo made with React

With the increasing role of the interaction between a user and a website, the role of JavaScript becomes even more important and, following the evolution of Web 2.0, there appears a new way of creating a presentational part of your website - single-page application, which reveals the full power of modern technologies.

Single-page application approach

Single-page application approach

When you enter a single-page application website, you download a page only one time and then the components of the page change and load only when it is required. Because of that, such website is much faster than a multi-page application. Also, if you build a single-page application, you usually use a solid mature ecosystem (it happens the other way round when you integrate interactive elements on a multi-page application websites). In addition to that, a back-end and a front-end are separated and they don’t interfere in each other’s concerns. Such approach of developing allows you to apply the latest and the most sensible patterns of developing websites and gain many profits in a long term.

However, the way of constructing single-page applications raises new problems (e.g., SEO, Performance & Optimization, Analytics), but they all have solutions already - you just need to remember about these moments. And because of these problems, developers should have particular knowledge and experience to build a website properly.

The examples of single-page application websites

  • Gmail (Google Mail)
  • Twitch
  • GitLab

Other ways of applying modern front-end technologies

At the same time, the single-page application approach not only solves many problems but opens new opportunities: you can create user interfaces for mobile and desktop applications using one codebase, or create mobile and desktop applications without creating a web version at all; also, you can create offline applications which can be used without an Internet connection and many companies experiment with technologies like a virtual and an augmented reality using web technologies (e.g., React VR).

Resume

Let's sum up all pros and cons of both approaches.

Multi-page Application

Pros

  • Simplicity of building static pages and small websites
  • Fast creation of a minimum viable product (MVP)

Cons

  • Difficulties with adding dynamics
  • Low flexibility
  • Increasing cost of changes during adding new functionality

Possible use cases

Low and middle scale websites without much dynamics and state, e.g.:

  • landings
  • content-oriented websites without much complexity
  • prototype websites

Single-Page Application

Pros

  • Less complex dynamic components building
  • Less complex large and non-trivial websites building
  • Better user experience
  • Less load on the server
  • Better client-server interaction, dividing of front-end’s and back-end’s concerns
  • Low cost of support in a long term

Moments that you should remember about

  • Security: many problems of security become the concern of front-end developers and they should know and remember about it (you can familiarize yourself with the main problems here.
  • SEO: you need to take care about server-side rendering if you need search indexing and optimization.
  • Enabled JavaScript: today it’s hard to imagine a website without JavaScript functionality and browsers’ support of it, so you can assume that it is enabled everywhere by default. But if you face the situation when you need to consider such  a case - a server-side rendering will help you.
  • Browser history: single-page application doesn’t save your jumps to another states and you can’t go back and forth with your browser by default, but most of front-end frameworks and ecosystems have routers which use Browser History API and they solve this problem.
  • Analytics: analytics of the pages relies on page loads and you can use page load events to eliminate the problem.
  • Performance & Optimization: you should remember about mobile and low-performance devices because JavaScript usage is quite heavy in single-page applications. Also, you should remember about a weight of your bundle and consider creating chunks with dynamic load to improve user experience (e.g., you can use the new Uber website after the first 50Kb loaded and it’s fast even with 2G networks).

Cons

  • Complexity
  • You need more time to create a minimum viable product (MVP)

Possible use cases

Medium or large scale websites, or websites with much dynamics and state:

  • websites with a lot of user interfaces
  • SaaS (Software as a Service) platforms or Internet services in general
  • data-driven and form-intensive applications
  • mobile applications
  • desktop applications
  • experimental fields(VR, AR)

Useful links

  1. React, library
  2. Angular, library
  3. Vue.js, library
  4. Forms and quizes demo: Vue.js, code
  5. Search demo: React, code
  6. Gmail (Google Mail)
  7. Twitch
  8. GitLab
  9. Uber website

Need website help?

Saas

Want to upgrade a site?

Contact us if you want to integrate complex components and SaaS.

Was this article helpful? Click to rate: 
Average: 4.7 (3 votes)

You may also like

Table of contents Introduction Server-side Client-side Conclusion...
The table of contents Introduction: about headless Drupal Create...
Starting with the 5th version, Drupal has jQuery out of the box. It...