Intro

When considering React, Angular, and Vue, the first thing to note is that they carry the same notion at their cores: data binding. The idea here is that the framework assumes the work of tying the state of the application to the active elements of the interface. Each framework has its own idioms for accomplishing this, but it is the increased clarity of design in state-driven data binding that distinguishes this generation of frameworks from the previous one.

This kind of automatic state-driven architecture is sometimes referred to as a reactive system.

State-driven components

Figure 1 describes how state manifestation is handled without such frameworks. Figure 2 describes how it is handled with the frameworks.

Figure 1. Without data binding

Figure 2. With data binding via Angular, React, and Vue

Components

The frameworks also align in being component-based. This is not a new idea: Each area of the user interface is represented by a component. The code in the component determines what is displayed and how the view behaves. Bundling state-driven data binding into components delivers the critical advantage to all three frameworks that makes them superior in complex interfaces to what went before.

Industry adoption profiles

Now we will take a look at the presence of each framework in the industry, to get a look at the level of adoption and viability. What I mean here is, when you choose a framework for a new project, or decide on which framework to learn, you want to be sure you are adopting a framework that is going to be successful over the long term.

Figure 3 looks at the number of watchers each framework has on Stack Overflow. A few things are clear from this chart. All three frameworks have a strong presence on Stack Overflow, although Vue is far behind with just over 50,000 watchers. ReactJS has a commanding lead, which has increased over the past year.

Figure 3. Stack Overflow Watchers

Figure 4 looks at GitHub stars. Here Angular takes last place, lagging far behind. Interestingly, Vue is in the lead, and well ahead of React, indicating a great deal of curiosity (if not actual use) in the project. In each case, over the last year, the frameworks have shown increasing interest at about the same rate.

Figure 4. GitHub Stars

GitHub stars tend to reflect people’s theoretical interest in a project. Figure 5 looks at weekly NPM downloads, which is an indicator of active, practical use of the projects.

Popularity take-away

Each of these frameworks appears to have enough up-take to be long-term viable. React’s popularity means it is easier to find developers who know it, and easier to find employers that are hiring for it.

Figure 5. NPM downloads (weekly)

The fact that leaps out in Figure 5 is that the actual active use of frameworks goes to ReactJS by a landslide. React has almost twice as many weekly downloads as the other two frameworks combined. It’s no surprise that React is the most in-use framework, but it’s notable just how significant its lead is.

Technical comparison

You’ve seen how the frameworks are conceptually similar, and had a look at their relative presence in the industry. Now let’s have a look at their technical aspects.

Angular

Angular 2+ was “designed from above.” That is, a bunch of smart people sat down and decided what would make for the ultimate front-end JavaScript framework.

In many ways, they succeeded: Angular is a very complete framework. On the other hand, Angular can feel overwhelming to learn and use the framework, as you are immediately required to master a large set of interacting elements (services, dependency injection, etc.) to achieve anything.

Angular is intended to incorporate everything you might need to develop large-scale front ends. In comparison, React relies upon community-developed plug-ins (for router support, for instance).

Ultimately, you as a developer are inside a code-thought-machine that wants you to conform to its ideals and conventions.

On the plus side, the wholesale adoption of ReactiveX (RxJS) across the board is innovative and forward-thinking. Not only does it mean all the event handling needs (intra-component, inter-component, back-end service calls, etc.) are managed via the same mechanism, but the same well-built framework (ReactiveX) and its learning will transfer to any other language you can imagine.

Moreover, large-scale projects with many team members may benefit from the more rigid and well-defined architectural style present in Angular.

There are varying opinions about the benefits and drawbacks of TypeScript, but you will code and read TypeScript if you use Angular. Another executive up-front decision.

Angular adopts ECMAScript classes wholesale. These classes use the built-in state as the component state. These are decorated with annotations to define their metadata.

Views in Angular are similar to views in Vue in that they are straight HTML templates with additional data-binding and logic support via inline directives.

Angular uses NgRX/store as its built-in, centralized state management plug-in.

Angular component example

Listing 2 displays a counter component similar to the React example, and is derived from this example.

@Component({
    selector: 'app',
    template: `
    <button (click)="increment()">Increment</button>
    <button (click)="decrement()">Decrement</button>
    <div></div>
    {{counter}}   
`
})
export class App {
    public counter : number = 0;

    increment(){
      this.counter += 1;
    }

    decrement(){
      this.counter -= 1;
    }
}

bootstrap(App, []);

Notice the @Component annotation. This is a “decorator” that informs Angular that the JavaScript class that follows is a component. Other features like services are handled in a similar fashion.

Also observe that the state is handled as a class member: public counter. This is a fairly clean way to build components atop JavaScript’s native syntax.

The interactive part of the component is added to the button elements via the (click) directive that is analagous to the DOM method onClick, but allows for calling methods on the component class. In this case it executes the increment and decrement methods.

Finally, the inline token {{counter}} allows for outputting the data-bound variable. This is slightly different from React’s syntax, but almost the same, and serves the same purpose.

React

React’s strength is that it has organically grown up from in-the-world use and has continued to develop in response to heavy usage. It has undergone extensive growth, but its roots and ongoing advantages reside in its being a framework used by Facebook for its own applications.

You can see Facebook’s committment to driving innovation in the framework with forward-looking features like Concurrent Mode (still in experimental mode at the time of writing).

React has also aggressively developed what is known as “pure” or functional components and hooks to empower them. These components avoid some of the overhead of class-based components. Vue has some support for functional components, and it is possible to create them in Angular, but React is the clear leader in this area.

Component definition and interactions are relatively straightforward in React, honoring the principle of least surprise.

As long as you avoid unnecessary Redux usage, the handling of React with a large-scale application is as good as Vue. Angular handles large code bases in a consistent manner and can offer benefits over React in this area. It is possible to define elegant large-scale apps in React, but the framework itself isn’t going to do as much as Angular to enforce that definition.

React uses an immutable state object accessible only via setState() to represent component state. This is different from Vue and Angular, which employ a more built-in JavaScript approach to state data.

React employs JSX for its view templates. JSX is an interesting approach in that it is like HTML with JavaScript superpowers (or JavaScript with HTML superpowers, if you prefer). JSX can be a bit off-putting when first learning the framework. It works quite well in the long run and is not difficult to learn if you arleady know HTML and JavaScript.

React’s default centralized data management is handled via Redux.

React component example

Listing 1 has a simple component example in React, derived from the React docs. This is a functional component, as that is the primary way to build components going forward.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Notice how the state is handled via the useState “hook.” This exposes the setCount() method to the template. The template is returned by the actual component function, and is written in JSX. JSX allows the inline integration of the JavaScript function into the onClick attribute of the button element, which interacts with the component state. The state is also accessed via the {count} token in the template markup.

Vue

Vue adopts a “normal JSON object as state” philosophy. Any time you can just use the language itself, it’s a win for simplicity. So you’ll find Vue simpler in this respect than React’s setState(), for example. However, there are edge cases and caveats that ultimately mean you are dealing with a native-JSON-hybrid beast.

In a sense, Vue is somewhere between Angular and React, a compromise between Angular’s top-down design and React’s organic growth.

Despite being the newest contender, and lacking the backing of a large corporation, Vue has kept pace with developments and delivers a fully viable framework. Also, there are a number of quality plug-ins and kits for Vue (like Quasar and Vuetify).

Vue has a reputation for being the easiest to learn. That probably derives from its JSON data model and HTML-with-decoration view definitions (versus React’s JSX). Vue templates can also incorporate inline JavaScript functions, unlike JSX.

Vue offers Vuex as its built-in, centralized state management solution.

Vue component example

Listing 3 shows a simple component definition in Vue, from the Vue docs.

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

In Listing 3, you can see that the component is exported as a CommonJS module. This is the Vue idiom for defining the component code. The template is identified as the template member.

Within the object that the module exports is the data member. This is a function that returns an object defining the component’s state.

Notice that the template allows for HTML with inline directives like v-on:click, similar to Angular’s (click) or React’s onClick. The syntax in Vue for outputting bound variables is the same as Angular: {{count}}.

Performance comparison

Performance can be tricky to get a handle on. This excellent article (Angular vs. Vue vs. React: Comparing frameworks by performance) offers a data-based comparison of the three frameworks in three areas: DOM manipulation, load time, and memory allocation.

In the categories: Angular wins for DOM manipulation (in most cases); Vue wins for load times; React and Angular win for memory allocation.

In general, it’s not terribly valuable to make a performance-based decision among the frameworks. How you use them will make the biggest impact on performance.

Native support and server-side rendering

Although Vue and Angular also support to-native features and server-side rendering, React seems to be keeping well ahead in terms of the simplicity in using these. JSX has a good feel for me personally, in that it keeps related code and layout close together. Others have had a less happy experience with it. Overall, I count JSX as a positive for React.

Which framework to use?

The question as to which technology is best is impossible to say definitively. There are quantitative differences, but in the end it is a qualitative decision.

As with many technology choices, external factors can play a big role. In particular, your familiarity with the frameworks and that of your team will weigh heavily. Availability of developers who know the tech is also important, and in that arena, React is the clear winner. The React project also seems the most committed to offering forward-looking innovations.

That being said, Angular stands out as an architectural framework capable of dealing with large-scale projects in a consistent and powerful way. And Vue offers an easier learning curve with a simpler state modelling and eventing system.

In the end, it would be ideal to get a feel for each framework, knowing that each is strong technology, with excellent community support and on-going development.

src: Angular, React, Vue: JavaScript frameworks compared


author: Matthew Tyson