Nowadays, technologies are growing very fast. Every day, week and month more and more tools appear to solve different problems.

In this article, I want to compare 3 of the most popular technologies for the front end development: Angular 5, React, and Vue. I am going to compare them from the perspective of the project architect or just a developer who is going to choose a framework for the new project.

Click here to share this article on LinkedIn »

OK, let’s start from React. Many people name it a framework. Well, actually it isn’t . React is just a view oriented library. It’s a view in MVC. Angular and Vue are frameworks.

So, to choose one, we should start from this point: Do we need a library or framework? Let’s look at each one deeper.

Actually, libraries are designed for doing only some specific tasks and they are not so complex. If you are constructing your application form libraries, you need to choose a library for every task, you need to setup task runners, etc.

The plus of it is that you have full control over the application. But it will take much more time to set up the project.

As I mentioned earlier, we are making a comparison from the position of project architect, so we also must think about other developers. And there is one more problem. As React applications constructed from different libraries, stack of libraries changes from project to project. It means, that for other developers it will be harder to join. Also development process will take much more time, because you are working with low level API’s.

Now let’s take a look to frameworks.

Frameworks are designed for doing more complex things, so, if you are using framework, there is already solved lot’s of problems for you. Frameworks have predefined design, already setup task runners and many libraries. You already can create fully functional project without other setups. As a result we can setup a new project very easily, development process is much faster, because we are already using high level API’s and every application which developed with that framework use same libraries, so for other developers will be much easier to join. But frameworks have more strict design.

Now let’s look at each one deeper.

I want to start from React, as it is smallest from our list.

React is a library for building user interfaces and for that it use components.

If you don’t know, then components are separated part of application which are encapsulated and can be used in different parts of our application. They are encapsulated, so that they can’t affect other, high level, part’s of application.

React use one way data flow and it’s very similar with redux and in real applications redux used very well.

The next thing is JSX. JSX is an XML like syntax extension to ECMAScript without any defined semantics. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

Here is an example of simple JSX syntax:

The equivalent ES6 code will be:

Basically I don’t like an idea of JSX, because it’s no more a HTML. You need to use special attributes and it puts some limits.

The next big thing in React is the state of application. State is an object, that contains whole public properties of your application. It allows you to just copy the state and send to another device, open app and you will get exactly same screen, that was on first device.

State management is going through dispatchers and reducers. For example, if we want to handle button click, we set a dispatcher for that action, and when action proceed, dispatcher calls and state changes.

Now let’s move to Vue.

By comparing Vue with React we have same components and one way data flow. But there are many additions..

We have same components, but by default they work with templates, not with JSX. Main advantage of templates is that you are writing pure HTML. But if you want you can use JSX. It’s up to you.

Another thing, that is very useful, is directive. Directives mostly used for additional functionality and DOM manipulation. It’s very helpful for keeping business logic clear. Imagine, that you have some <div> and there is some content inside. Itself, that <div> is just a block element, that stands on his place. You are adding an attribute “draggable” and it becomes a draggable element. You can move it. You don’t see the logic of dragging, it’s inside directive. You just see that it is a div element that can be dragged.

Next thing are mixins. If you are familiar with LESS or SASS you are probably familiar with that term. It like inheritance of object, but is our case, that object contains properties and methods, that can be inherited from components.

Next we have filters. They allow to parse input data. For example, you have a list of dates and you need to show days count since that date (ex. 3 d ago). So instead of writing a helper service for parsing date to days count you can just define a filter and use it like this

Another big thing is dependency injection. If you are familiar with some object oriented language you probably know about dependency injection. With dependency injection in every module you have exactly those modules, which are needed for that module. It’s one of the core rules of encapsulation. In large applications it is very important.

Now let’s move to Angular.

In Angular we have same components, one way data flow, HTML, templates, filters (that named pipes), directives, dependency injection. In addition we have modules and services.

Modules consists from components, services, directives etc. They are more general and mostly used for providing some feature.

Services are designed for doing some specific thing. Here is where main business logic must be written.

Well. The next section, that I want to write about is DOM rendering. Here we have two modules of DOM rendering. React and Vue are using Virtual DOM and Angular use direct DOM rendering system. It’s the same thing that Angular did with version 1.x, but it is optimized and there is a surprise for you :).

Let’s start from Virtual DOM. Assume, that you have a list of 5 items.

Now something changes in first row. What most frameworks do is rebuild and re-render whole list. It’s 5 time more work, than necessary. We need to update only first row.

Not let’s take a look what will do virtual DOM in this situation.

Before any manipulation it creates the copy of DOM and work with this copy. It is much faster to work with JavaScript objects than with DOM, because nothing drown on screen.

When virtual DOM has been updated, it compare with the old version, that has been captured before update and find elements that must be updated. This process called “diffing”. After checking difference, in real DOM updates only those parts which are changed.

This is how manage DOM rendering React and Vue.

Now let’s take a look to the Angular.

Angular’s rendering has one very interesting point. Angular uses both browser’s thread (UI area) and service worker thread (worker area). Worker area responsible for building out and compiling directives, services, filters and bootstraps the code. UI area is responsible for DOM rendering. You can compare it with computer’s processor and graphic card. Worker area is the processor and UI area is the graphic card.

The other awesome part is, that renderer can be different based on environment on which application running. For example if you want to draw your application on canvas, you easily can do that. You just need to implement Renderer class.

For understanding how this approach make sense let’s compare some benchmarks.

Here are screenshots of my benchmark test

I make a calendar with 31 days and 24 hours.