Javascript Framework Comparison: Vue, React and Angular

Starting a new project, every programmer has to face the choice of what framework to use for the website: Vue, React or Angular. They are all different and these differences are fundamental. However, all of the frameworks are suitable for the task-solving, so we just need to discuss how efficient they are.

There are no data about which framework is used more, but we can analyze vacant positions on Indeed.com and get very interesting results:

1st place – React 78.1%

2nd place – Angular 21%

3rd place – Vue.js 0.8%

4th place – no specific framework mentioned 0.1%

The results of the StackOverflow survey are somewhat different: 67% for React, whereas Angular has 42% of the ‘votes’.

Having analysed all of this, we can conclude that React is the most popular framework. But does it necessarily mean that it’s also the most efficient? Well, not a bit, since the popularity of a particular framework means only that it’s used in such projects as Facebook or Instagram.However, we can see that Vue is the most ‘starred’ on GitHub.

That’s why it’s better to disregard the experience of others and try to compare the frameworks according to the aspects crucial for the developer.

1. Rendering – displaying the output

The first aspect of the Javascript framework design we need to discuss and compare is page rendering. The modern architecture utilizes two types of it: client-side (the page is rendered using the end user’s PC resources) and server-side.

DOM – Document Object Model allows accessing and changing document contents, layout and even structure. Each framework has its own way of DOM processing which influences the rendering of the end page displayed on the user’s screen.

Vue and React clone the DOM, process the copy and compare the result with the source. Then, in the resulting document (the one on the user’s screen) they replace only the parts that differ from the processed results. This significantly speeds up loading time and rendering of the page, which, therefore, reduces the amount of the traffic used. This might be crucial for mobile users.

DOM processing approach is absolutely different in Angular 1.x and further versions. DOM is split into two threads, where the browser (on the client’s side) is in charge of the DOM rendering while the main thread (on the server side) is responsible for creating the directives as well as loading the code and the services.

But it doesn’t mean that the rendering is done on the client’s side, the visualization is still carried out by the servers.

This fact means that SEO optimization will not be problematic in the future and search bots will get the correct page while indexing.

2. Component architecture

React cannot be called a pure framework. Generally speaking, it’s some sort of a modified library tailored for the MVC pattern (Model-View-Controller, where the Model is in charge of providing the data, the View displays the Model data to the user, and the Controller interprets the user’s actions and makes the Model provide changes and updates.)
Angular and Vue, in contrast, can be called pure, full-fledged frameworks.

If the project architecture is based on React, it means that you:

• will need to search for and implement additional libraries for every feature;
• will adjust the web app features according to the particular library;
• will find it difficult to involve other developers in the project since the web stack is different for every library in every project.

Thus, it’ll take more time to implement architecture. Low-level API (Application Programming Interface - the set of the predefined commands) needs to be customized and takes a lot of time too.
If you use such ready-made frameworks as Vue and Angular, there will be no trouble of selecting and customizing the libraries for different purposes. High-level API provides the backwards compatibility for all the libraries. This allows other developers to join the project without researching the architecture of the web app. The unification of such procedures is what makes the full-fledged frameworks so popular.

3. Directionality and classes of the dependencies

React and Vue support only one-way data transfer, while all objects in React are encapsulated. To put it simply, each component of the web app can be represented as an end procedure which does not need any user’s actions till the work is complete.

However, React supports copying and transferring the state of the components. The properties of the defined objects can be restored on some other device if you launch an app and notify that the state has been changed. Thus, rendering will be identical for both devices and you’ll see the same picture on both screens.

Vue framework works a little bit different. JS is still one-way, but components can work with the templates, thus, the output is the pure HTML. Vue also supports JSX, which makes it easier to move from React and similar libraries to others.

This framework has automated process logic due to the possibility to create directives. You can just add the needed one to get the desired function. For instance, let’s imagine that you want the block-level element <div> to be movable. All you need to do is add ‘draggable’ directive to the object properties. After that you can use the mouse to drag and move the object on the screen.

Angular has somewhat different process logic. It has all that Vue has; however, the description of the object interaction is carried out by the services that are the components of modules.
The modular architecture is more convenient for developing large web apps. The module is usually created to implement several features of similar functionality. This shortens the code and increases the processing speed.

The MVVM (Model-View-ViewModel) support enables solving different tasks in the same section of the web app using the same dataset. Since the functions are dependent, it makes the data transfer two-way. Every procedure can start different process.

4. Backwards compatibility

The possibility to update architecture to add new modules and libraries is highly important for every developer.

• Angular is a full-fledged framework. All earlier versions and components are compatible with the further ones. It’s impossible to jump from 2.0 to 3.0 straight away; you first need to one by one install all the updates between the versions, which, for no good reason, will make the size of an app bigger.
• React is a library, which has a complete backwards compatibility. You can add different releases of the libraries to your web app and update the old ones with the property inheritance.
• Vue is a progressive framework (according to the founder of Vue Evan You). Its modular system is similar to React, but also includes all the properties of JS-frameworks working with the backwards compatibility.

5. ‘Technical support’ - documentation and community

When you’re choosing some framework, the community support shouldn’t be overlooked. Even the simplest functions might seem challenging, you know.

The more complex the project is, the more often the developer might want to consult the documentation of the chosen environment and the community advice. Thus, we think it may be reasonable to compare this ‘technical support’ of every JS-framework.

React

‘Technical support’ of the Reach environment is rather tricky. On the one hand, the community is huge and includes thousands of developers all over the world, thus, you face no language barrier. If you ever need a piece of advice from your ‘fellow programmers’, you can get it in any language, be it Russian, English, Chinese etc.

The main disadvantages, however, are the open source code and the fact that new React-based libraries appear daily. It might be not so easy to find the documentation which has all the information about the implementation, functions and properties of the new library.

The new modules usually appear like that: some programmer creates a library to fix some specific problem on the project; next they write the manual and share it on the Internet.

Vue

The detailed documentation is the signature of Vue. However, the ones who admire it do not mention that most of the manuals are available neither in Russian nor in English.

The Vue community is rather small (even though it’s popular on GitHub), especially in comparison to the one of Angular or React. Even JQuery is used more than Vue.

You might usually have to wait for an answer about how to implement some feature for several days. But it doesn’t necessarily mean that someone will finally answer.

The chat on the official Vue website might come to the rescue, if needed.

Angular

Angular, unlike Vue and React, has not only highly-detailed documentation, bur also many guidelines. Therefore, you don’t even need the community help with your questions.

There are hundreds of thousands of programmers using this framework. You can always ask a question about how to do something. You don’t even need the official website for that, you can get help on Stack Overflow and several other places, even on social media.

You will always be able to find somebody to help you fix the problem or show you where to search for the answers.

Putting everything in a nutshell

It’s definitely hard to be objective rating these frameworks. But this review might help the newbie developer make up his or her mind. So let’s sum everything up:

1. If you need to get the gist of the environment quickly, choose Vue or React.

2. If you worked with Angular or React before, Vue will be easy to move to, since it generates pure HTML-code familiar to everybody and tips and tricks are basically the same as for Angular.

3. If you plan to work on some large project, it’s better to use Angular as a basis, as it guarantees you flexibility and fast rendering. If you ever come across any questions (and you surely will), the other developers and their experience might come in handy. React is too big and complex and Vue doesn’t have enough guidelines yet.

4. If you want to involve other developers in your project in the future, Vue is the best choice for you. This framework is not only easy to grasp, but it also allows you to customize the web app without destroying its architecture.

5. If in the future you plan to step-by-step enhance the project by adding new features, Vue or React might be your choice since they have an absolute backwards compatibility.
   Each of the frameworks has its own benefits and drawbacks. Thus, one more recommendation from us: use the one that is easier for the development team to master. The time spent on mastering the framework delays the release of the app indefinitely. Moreover, technical support of the finished project might become a burden for the in-house developers and they’ll quit. Also don’t just sit and wait, look through the available materials, learn new stuff. Vue and React evolve constantly, so you should too.

This is an mkdev article written by Anatoliy Ulitovskiy. You can always hire our JS mentors to help you!