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 with the multi-page 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 the 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 any problems.
Examples of multi-page applications we built:
- Acronis: the case study.
- The 25th NSF EPSCoR National Conference: the case study is a landing website that is a good example of the MPA approach usage.
- Alutech: the case study.
Issues of multi-page applications and their enhancing by using new technologies
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.:
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.
Let's see the good examples of what functionality can be integrated with modern technologies into a multi-page application website.
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 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. For example, find how to improve your SPA and solve an SEO problem in this guide. 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)
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).
Let's sum up all pros and cons of both approaches.
- Simplicity of building static pages and small websites
- Fast creation of a minimum viable product (MVP)
- 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.:
- content-oriented websites without much complexity
- prototype websites
- 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.
- 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.
- 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)
- React, library
- Angular, library
- Vue.js, library
- Forms and quizes demo: Vue.js, code
- Search demo: React, code
- Gmail (Google Mail)
- Uber website
- How to build a single-page application (SPA) with Vue.js
- The easiest way to improve your Vue.js application. Part 1
- The Alutech United Inc. project