This article presents a comparison of the main Single Page Application frameworks, to help you decide which is the most efficient in your context.
In a second article, we’ll present our recommendations and the mistakes to avoid when setting up a SPA front-end (SEO, compatibility with older browsers, accessibility, responsive…).
Finally, in the last article, we’ll take a closer look at how to integrate these frameworks to create a headless Drupal site.
What is an SPA?
A SPA (for Single Page Application) is a single-page application that primarily runs the user interface in the browser, and communicates with the server via web services.
The advantages of an SPA over a standard web application are :
- streamline the user experience by avoiding the need to load a new page for each user action;
- run locally on the user’s browser.
The frameworks on which SPA applications are based are generally developed using classic web technologies: HTML5, CSS3, Javascript or Typescript.
Introduction to Angular, React and Vue
Angular, React and Vue are the three most widely used SPA frameworks in the world today. They are open-source.
Angular
Angular (or Angular 2+) dates back to 2014. It was developed by Google and is a complete Typescript rewrite of the AngularJS framework, the first version of which dates back to 2010.
Angular offers a modular, component-oriented approach based on the MVVM (Model-view-viewmodel) model.
React
React (or ReactJS) dates back to 2013 and was developed in Javascript by Facebook.
Like Angular, React is component-oriented, but more like a library than a framework, and addresses only the MVVM (Model-view-viewmodel) view.
View
Vue (or Vue.js) dates back to 2014 and was developed in Javascript by Evan You, a former Google engineer. Unlike Angular and React, which are respectively ported by companies, Vue is independent and community-driven.
Like React, Vue offers a modular, component-oriented library approach.
Popularity
According to Github statistics, React and Vue currently appear to be more popular with developers than Angular. Angular’s contribution, however, is far more substantial.
These figures should be interpreted with caution. Angular has been on the market longer than React and Vue (2010 vs. 2013 and 2014).
This popularity should also be understood as a reflection of the accessibility of the frameworks, Angular being slightly more complex to grasp, and therefore rather closed to novices.
We’ll look at this in more detail later. What’s more, React and Vue are geared towards the creation of displayable components within sites using classic server technology, whereas Angular is entirely geared towards SPA applications. As a result, many React and Vue users only use these frameworks sporadically within a project using a different core technology.
Another important point to consider is the availability of developers per technology on the job market. Particular attention should be paid to the low proportion of Vue developers.
Learning
React and Vue are easier to get to grips with than Angular, but a common mistake is to make a choice based solely on the beginning of the curve, when the end is just as important. Angular requires a greater initial investment in learning, but will quickly offer a known solution to all future problems encountered.
Angular natively contains all the building blocks needed to design a complete web application. It’s a standalone framework with native routing, http client and reactive programming via rxjs, among other features.
For their part, React and Vue can be considered more as libraries for creating web components, which is why they are more accessible. It will therefore be necessary to make choices of third-party libraries and configuration efforts to meet the needs of developing a complete SPA with them.
This aspect is reflected in the descriptions of these 3 frameworks on their respective websites:
angular.io : “Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. “
reactjs.org: “A JavaScript library for building user interfaces.”
vuejs.org: “The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.”
The availability of third-party libraries for these three frameworks is equivalent. All three rely on the huge npm.js library.
It’s also worth noting that Angular has chosen Typescript over Javascript for React and Vue. Typescript is a strongly typed, object-oriented programming language developed by Microsoft, offering a high level of abstraction.
Note that Vue est also offers Typescript support since version 3 (September 2020).
Performance
In terms of performance, React and Vue are lighter than Angular, so it’s no surprise that they perform slightly better. However, with the AOT (Ahead Of Time) compilation and the optimization of the IVY rendering engine in the new versions of Angular, it is now more than a match for the first two.
Overall, the differences in performance are so small that they should not be a factor of choice.
Both frameworks (Angular and Vue) are exceptionally fast with metrics similar to the benchmark. Use the specific metrics of the third-party benchmark for a more granular comparison, but speed is not a deciding factor.
Conclusion
In conclusion, it’s perfectly possible to develop complete SPA applications using these three frameworks. However, Angular is clearly designed for this, whereas React and Vue will require a significant input of complementary libraries to meet this same need.
