What should we use for web development? Vue.js, React or Angular? This is a question many ask when kicking off a new frontend project. The answer: It’s not that simple. It’s been a topic of endless debate – taking into consideration trends, features, contributors, and popularity.

Whether you’re a Developer, Tech Lead or Solution Architect starting a new project, and can’t decide which framework to use, this in-depth guide should help you make an informed decision.

Angular is a TypeScript-based full-featured MVC JavaScript framework, developed and maintained by Google, whereas React is an open-source JavaScript library that is developed and maintained by Facebook. Vue.js, the newest addition, was developed by former Google employee, Evan You, and lies somewhere in-between the other two. Vue.js is a lightweight MVC JavaScript framework. “I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight” – Evan You.

History and popularity To put things into perspective, let’s have a look at a (brief) history of the three frameworks, as well as their current popularity.

Angular 2+:
- First released in 2016 (after a major breaking update from version 1 released in 2010).
- Used by +/- 115K websites*, which includes Google, WhatsApp, Instagram, and many Fortune 500 companies.
- On GitHub, starred 72K times.
React:
- First released in 2013.
- Used by +/- 1.2M other websites*, which includes Facebook, Uber, Netflix, Udemy, Paypal, Reddit and Walmart.
- On GitHub, starred 167K times.
Vue.js:
- First released in 2014.
- Has seen a considerable increase in popularity, even though it isn’t backed up by a large corporation.
- Used by 430K websites* around the globe, including Alibaba, Baidu, Font Awesome and GitLab.
- On GitHub, starred 182K times.

The usage statistics are based on the popular website: https://trends.builtwith.com/

Although React is the current market leader, Vue.js has seen the greatest growth in usage over the last year or two. Angular is the most mature framework, even though its usage is dwindling.

Job market

When considering which framework to use to develop a new project, it’s important to have a look at the job market to see what the demand and supply of developers with experience in the particular framework are.

When looking at job availability on LinkedIn in December 2018, it’s interesting to note that there is roughly the same number of jobs available for React and Angular (+/- 70K), whereas Vue.js is lagging behind at +/- 12K.

Although job statistics are commonly seen as the most important factor in deciding what to learn in your career, these numbers don’t predict what the usage will be in a year or two. Given that Vue.js has gained tremendous popularity over the last two years, it may simply take time for new and existing Vue.js projects to reach a maturity level that demands more developers.

Migration from older versions

Migrating code when framework updates arise can be costly and time-consuming. Migration support is, therefore, another important consideration when comparing the three frameworks.

Angular received a lot of bad press after deprecating version 1 the way they did. There was no (easy) migration path to version 2 – projects on Angular 1 had to have a big portion of their codebases rewritten to become compatible with Angular 2. Although updates from version 2 up to version 7 have not made this “deprecation of the entire framework” mistake again, they do plan major updates every six months, with another six months before any major APIs are deprecated. This gives you a year to make necessary changes if any.

With React, Facebook promises that code stability is a at the heart of the framework, as “…companies, including Twitter and Airbnb, are also heavy users of React”. Migrations are done via easy-to-use scripts (see react-codemod).

Vue.js states that about 90% of the APIs are the same when migrating from 1.x to 2 and that “the core concepts haven’t changed”. To make things easy, they made a migration helper tool to aid in migration from 1.x to 2.0 by scanning files and provide detailed warnings of deprecations.

The learning curve

Angular is by far the most difficult to learn since it’s the largest solution (a complete framework) and requires you to master topics such as MVC and TypeScript. The data flow control in Angular is two-way, which makes it complex when dealing with the large application. Angular’s runtime debugging also tends to provide less information than the other two platforms.

Unlike Angular, React isn’t a complete framework and more advanced features require the use of third-party libraries, which can be mastered as the need arise. This means that a developer typically takes less time to master it initially and continues to learn as more features are needed. React also has a great Getting Started guide that should get you going in no time. The documentation is detailed and complete.

Vue.js is easier to learn than both Angular and React. The transition to Vue.js from either of the other two is relatively easy since Vue.js somewhat overlaps in functionality, especially in terms of the use of components. As with React, advanced features such as build tooling, routing and state management are available via supporting libraries and packages, which can be mastered as they are needed.

Let’s get technical

Framework size The size of the framework plays a big role in the user experience of a web application. On slower connections, it might mean that the site takes a second or two longer to load.

Vue: 80 KB React: 100 KB Angular: 500+ KB

Tip: If you use a popular CDN to host these frameworks, it’s likely that the user accessing your site has the framework in their browser cache.

Please note: The numbers above are slightly skewed as Angular contains most functionality in its 500KB footprint, whereas external libraries such as a server communication package (e.g. Axios) needs to be added to React and Vue.js.

Structure

All three frameworks make use of a component-based architecture. In general, the frontend consists of a tree of nested components. A component, e.g. LikeComponent, consists of state, methods, lifecycle hooks, events etc. that effectively results in DOM manipulations, but only when the component state changes.

In Angular, components are known as directives. There are three kinds of directives:

Components: Directives with a template (most common).
Structural directives: Directives that change the DOM by adding and removing DOM elements.
Attribute directives: Directives that change the appearance or behaviour of a DOM element or component.

A component consists of three things:

A component class, which handles data and functionality.
An HTML template, which determines what is presented to the user (the UI).
Component-specific styles that define the look and feel.

React, by contrast, combines the UI and behaviour of components. In other words, the same part of the code is responsible for creating UI elements and prescribing their behaviour.

In Vue.js, UI and behaviour are also combined.Vue.js is a more flexible, less opinionated solution, that allows the developer to structure their web app the way they want it to be, instead of being forced to do everything in a certain way.

One-way Data Flow vs. Two-way Data Binding

One of the major differences between the frameworks is how the data flows in the web application. React opts for single-data flow and Angular uses two-way data binding, whereas Vue.js supports both.

One-way data flow means that the data model is the single source of truth. The data flows in one direction and only the model can change the web application’s state.

Two-way data binding is a mechanism where UI elements, for example a checkbox, are bound to the model dynamically. When UI element changes, the model is changed according to its value.

One-way data flow is easier to grasp and is deterministic, whereas two-way data binding is more difficult to understand and implement.

Example code (Hello World)

Angular

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World Angular</title>
    <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body ng-app="app">
    <h1 ng-controller="HelloWorld">{{message}}</h1>
    <script>
        angular.module("app", []).controller("HelloWorld",
            function($scope) {
                $scope.message="Hello World"
            }
        );
    </script>
</body>
</html>

React

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }
      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>
</html>

Vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World Vue.js</title>

    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>

</head>
<body>
    <div id="root">
      <h1>{{ message }}</h1>
    </div>

    <script>
      new Vue({
        el: "#root",
        data() {
          return {
            message: "Hello World!"
          }
        }
      });
    </script>

</body>
</html>

TL;DR - Which one wins?

As with everything in life, the answer is: It depends. Each one of these frameworks has its own pros and cons. Choosing a tech stack is can be a tedious task that depends on the specific project, its budget, requirements, team expertise, app size, and development timelines.

Angular is a complete framework, is backed up by many contributors and is definitely the most mature of the three. Angular is a suitable option for organisations with large teams and who already make use of TypeScript. On the downside, learning Angular might be tedious and therefore demotivate new developers.

React is gaining widespread acceptance with a lucrative position in the job market. React is well maintained and receives a large number of contributions from the community. It’s great for startups and developers who like some flexibility.

Vue.js is new to the arena, without the backing of a major company, but is gaining popularity at an impressive speed. However, it has done really well in the last few years to come out as a strong competitor for Angular and React. It is easy to learn (and therefore ideal for beginners), flexible and lightweight and should be your choice if you prefer simplicity, but also like flexibility. However, its future is still slightly unpredictable and one should, therefore, be cautious with it.

Vue.js vs React vs Angular