On the start of a new project, each programmer faces a choice: which JavaScript framework to choose for the website – Vue.js, React or Angular? There are differences between them and sometimes quite substantial. However, each of them is suitable for solving problems. Therefore, only the question of efficiency stays open.

There is no open data of frameworks usage, however, an indirect analysis of open vacancies on Indeed.com gives a rather interesting distribution:

  • 1st place – React 78.1%
  • 2nd place – Angular 21%
  • 3rd place – Vue.js 0.8%
  • 4th place – without specifying the environment 0.1%

The StackOverflow survey data already gives slightly different numbers: 67% of the votes collected React, while 42% of programmers “voted” for Angular.

It turns out that React is the most popular of all. But does it mean that it will be more effective? Not at all, because behind the popularity is only the usage of the environment in such projects as Facebook and Instagram. In addition, for example, on Github, Vue.js has much more “stars”.

Therefore, you should abandon the experience of others and try to compare JavaScript frameworks for actual indicators that are critical for the developer.

1. Rendering – displaying the final result

Javascript frameworks should be compared first of all by page rendering. The modern architecture allows two types: on the client side (the page is rendered due to the power of the user’s PC) or on the server side.

DOM – Document Object Model – an object model of a document that allows you to read and change the content, design and even the structure of html-documents. Each of the frameworks has its own approach to DOM processing, which affects the rendering of the final page displayed on the user’s screen.

Vue.js and React create a copy of the DOM, process it, and then compare the result with the original version. In the final document (on the user’s screen), only those parts of the page that are different from the processing results are replaced.

It greatly speeds up page loading and rendering. Also, the volume of traffic is reduced, what is especially important for mobile devices users.

The approach to handling DOM with the Angular framework version 1.x and higher is fundamentally different. Everything here is divided into two streams, browser (client part) is “responsible” for rendering the DOM and for the creation of directives, downloading code and services works general stream (server part).

But this does not mean at all that the rendering is on the client side – the visualization is still performed by the servers. And SEO optimization will not cause difficulties. Search robots will be provided with the correct page for indexing.

2. Component architecture

React doesn’t belong to pure frameworks. This is a kind of modified library, made under MVC requirements (Model-View-Controller, where the Model is responsible for providing data, View – displays Model data to the user, and the Controller interprets user actions and forces the Model to make changes).

Angular and Vue.js absolutely belong to the frameworks.

If React is in base of the project architecture, then this determines:

  • the need to search and implement additional libraries to complete each of the tasks;
  • setting up the functional part of the application for a specific library;
  • the difficulty of involving other developers in the project, due to the difference in the library stack of each application.

Therefore, it will take more time to create the architecture. A low-level API (Application Programming Interface – a set of ready-made commands) requires too much configuration.

In the case of using ready-made frameworks – Vue.js and Angular, there are no longer any problems with selecting or setting up libraries for different tasks. The high-level API provides backward compatibility for all libraries.

This will allow a third-party programmer to connect to the project without a long study of the application architecture. Exactly in the unification of processes hides the popularity of full-fledged frameworks.

3. Orientation and dependency classes

React and Vue.js only support one-way data transfer. At the same time, objects are encapsulated in React. It means, each of the application objects refers to the final procedures that do not require user action until the end of the work.

However, React supports copy and state transfer. The properties of the registered objects can be restored on another device if you run the application and mention the status of the components. Therefore, the rendering will be identical, on the screens of both devices will be the same “picture”.

The Vue.js framework works a little differently. JS is still one-way, but components work with templates, and at the end comes pure html. There is support for JSX, which simplifies the transition from React and similar libraries.

For the framework is automated the logic of processes by creating of directives. It is enough to add the necessary directive to get additional functionality. For example, you need to make a block element moved around the page. For implementation, it is enough to add the “draggable” directive to the properties of the object, after which it can be dragged with the mouse on the screen.

The Angular framework is somewhat different in the logic of the process. Yes, there is everything that is typical of Vue.js, however, a description of the interaction of objects occurs in services which are components of modules.

Modular architecture is more convenient for developing of large applications. The module is created to solve several tasks of similar functionality. Consequently, the final code size becomes smaller and processing speed is higher.

Support for MVVM (Model-View-ViewModel) allows to solve different problems in one section of the application using one data set. The dependence of the functions determines the two-way orientation of data transmission. Each procedure can start a different process.

4. Backward compatibility

For the application developer, the ability to update the architecture for connecting of new modules and libraries is very important.

Angular

Full-fledged framework. Absolute dependence on previous versions and components. A direct transition from 4.0 to 5.0 is not possible, you will have to install all the updates between versions. This will lead to an unreasonable increase in the volume of the application. By the way, an interesting fact, Angular version 3.0 does not exist. After the 2nd version, you will find directly 4th.

React

Library. Full compatibility between versions. It is possible to connect libraries of different versions to the application and update obsolete with properties inheritance.

Vue.js

Progressive framework (according to the statement of the main developer of Vue.js Evan Yu). The modular system is similar to React, but includes all the attributes of the JS framework, working with full backward compatibility.

5. “Technical Support” – documentation and community

For choosing a specific architecture, no one developer can ignore the support of the community of programmers. Because sometimes, even simple functions can be difficult.

And the more complicated the project is, the more often the developer turns to the technical documentation of the selected environment and the community for advice. Therefore, it is worth to compare the “support” of each JS framework.

React

The technical support of the React environment is rather complicated. From the one side, the community consists of thousands of programmers in different countries, which completely removes the language barrier. You can consult with “colleagues” in any language: Russian, English, Chinese and others.

However, open source code and the daily release of new React-based libraries are real disadvantages of the environment. It is difficult to find documentation that would fully describe the application processes, functions and properties of a specific freshly released library.

Most often, new modules appear in this way: a programmer creates a library to solve a problem in his project. Then he writes a short guide and upload the best practices online.

Vue.js

Detailed documentation for the framework – is the “business card” of Vue.js. However, supporters of the environment don’t mention that most of the “Manuals” don’t have a normal translation into either English or Russian.

The user community, despite the great popularity of Vue.js on Github, is very small, especially compared to Angular or React. Even jQuery is used by far more developers than Vue.js.

The answer to the question about the implementation of the task is expected to take several days. And it is not the fact that someone will be able to answer.

Better then to ask for a help on the official website of the project.

Angular

Unlike Vue.js and React, not only detailed documentation has been written for the framework, but also a lot of guidelines. Therefore, you don’t have to wait for the help of the community to find the answers.

The number of programmers using the framework is hundreds of thousands. A developer can ask a question from the Howto category at any time. To do this, you do not have to look for the official website of the project. You can ask for help on stackoverflow or toster.

Summary

Of course, to compare frameworks is objectively quite difficult. But the analysis will allow a developer to choose a platform properly. So, what we have:

  • If you need to learn the environment quickly, then you should choose between Vue.js and React.
  • It is easy to switch to Vue.js for both an Angular and React user. After all, here we get pure html code familiar to all developers. The techniques used are approximately the same as in Angular.
  • If you plan to develop a large project, then it is worth to consider Angular as the basis. It provides maximum flexibility and rendering speed. The vast experience of other developers will help to resolve issues that will arise while working on the application. React will be too voluminous and for Vue.js there are not yet a large number of guidelines.
  • If other programmers will be involved in development in the future, then Vue.js will be the best choice. After all, this framework is not only easy to learn, but also allows you to change the application without destroying its architecture.
  • If for the project will be provided multi-stage updating and expansion of functionality in the future, then it is worth to use Vue.js or React due to excellent backward compatibility.

Each of the frameworks is good in its own way and it has its own strengths and weaknesses. Therefore, it is worth to give you one more important tip: what will be easier for the team of programmers to study, that should be used for development. Also study the available materials, develop, don’t stay on one place, because Vue.js and React are constantly changing.