What is the difference between React and Vue?
Once we have already published material on the comparison of React and Vue. It was a practical example in which one could see the similarities and differences of these frameworks in rather small details. Today we want to share with you a translation of an article whose author, John Hannah, is reviewing React and Vue on a larger scale. He says that in today's world of web development, you can see, firstly, the dominance of React, and secondly - the explosive growth in the popularity of Vue. If the existing trends continue, it is highly likely that by the end of 2018, Vue will bypass Angular and take second place in the ranking of the most used web tools.
According to John, the last three years he has been engaged in commercial development at React. He says that when clients come to the company where he works, most often they say they want their project to be created using React. However, apparently, after a while, Vue will also use a similar level of attention. In this article, he analyzes React and Vue in order to better understand the difference between these two libraries? and says that what this article is about will help him in his work with clients. He believes that even though he has been working with React for several years, and he likes what he does, it will be nice to prepare for the future, as there are unexpected situations when working with Vue, in which his experience will not help him.
I want to begin my story about React and Vue, oddly enough, with conclusions. These two frameworks are similar, although there are some important differences between them, which I briefly describe. Why compare them? One of the reasons is that for Evan Yu , the developer of Vue, React was one of the sources of inspiration. These frameworks are much more similar to each other than they are, say, similar to Angular or Ember. From the Vue documentation, you can see that both the frameworks we are talking about today have the following features:
')
If we consider ready-made projects built on the basis of these libraries, I don’t think that there are serious differences between those made on Vue and those built on React. Namely, React and Vue are similar in terms of performance, both frameworks are suitable for creating projects of very different scales.
If you are developing an application designed for different platforms, for example, on a traditional web and on mobile devices, React has an advantage over React Native. My colleagues also used React to create embedded applications for TVs. This is an interesting example of an exotic platform on which React can be used. However, the possibility of developing applications for mobile platforms, and Vue, thanks to Weex , therefore, it is possible that for a certain mobile project, this framework will be preferable.
It should be noted that the React ecosystem is much larger than that of Vue, which may well contribute to the success and speed of development. If in order for the React-application to take place, some important functional is needed, the chances are high that something like this has already been implemented. In fact, it is very likely that for many problems in the field of React it will be possible to find even several solutions.
Another important consideration for the type of clients my company works with is the opportunity to find developers who are well versed in the library or framework on which these clients rely. React also has an advantage here, although I believe that it is most likely temporary.
Other differences mainly relate to the finer points of development and to technical details. For example, they relate to programming paradigms, which are characterized by certain features, some compromises, and I can not single out any of these clear strengths or weaknesses. This we will discuss.
As a result, we can say that if there is a team that is already familiar with React, the transition to Vue will not give it particular advantages (we will talk about the minuses below). If your team is just starting to develop a web application frontend, or is thinking about switching to something new from frameworks like Backbone or AngularJS, then you should look to Vue, although the above mentioned strengths of React do not go away. Other factors, again, relate to the technical details, which we now talk about.
Perhaps best of all, comparing React and Vue, refer to the Vue documentation (very qualitative), in which their similarities and differences are revealed very well. This documentation is especially useful since it was written by Evan Yu along with Dan Abramov, a member of the React team. In addition, if I treat something biased, excerpts from the documentation will help take a sober look at the situation.
In terms of performance, Vue and React are very similar. The Vue documentation says that Vue, in most cases, has a slight advantage, however, fresh benchmarks show that React 16 is faster than Vue 2.5. Some differences in working with frameworks are also observed when optimizing performance.
In React, when the state of the component changes, this causes the whole subtree of the component to be re-rendered, starting from itself. It acts as a root component. In order to avoid unnecessary re-rendering of child components, you must either use
In Vue, component dependencies are automatically tracked when it is rendered, so the system knows exactly which components need to be re-rendered when the state changes. Each component can be considered to have something like the automatically implemented method
Here I would like to note that on December 19, 2017, after I, delving into the subtleties of performance issues of web frameworks, published a fresh article , I realized that my conclusions about the performance of frameworks should be clarified. Vue is a little faster, but the result depends on what is being measured.
Another major difference between the frameworks in question is that Vue uses templates, and React uses JSX . Many programmers do not like the template language. This is what the Vue documentation says:
Some argue that in order to write templates, you need to learn an additional specialized language. We consider this approach superficial when comparing Vue and React. First, the use of JSX does not mean that the programmer does not need to learn anything new, because we have additional constructions built on ordinary JavaScript. As a result, JSX is easy to master for those who are familiar with JS, but to say that no effort is needed to use JSX is too much. Similarly, templates are an extension of plain HTML, and thus, those familiar with HTML can master them without much trouble. Due to the features of the templates, we can also help the programmer to achieve more by writing less code (for example, using the
I’m worried about the situation when JSX and template language are mixed when developing an application. This complicates the project. It’s simpler to adhere to one approach, otherwise the expenditure of forces is inevitable on “context switching”, on transition from one environment to another. However, there may be those who disagree with this idea.
Vue is very nice to work with CSS. In the Vue documentation, where this framework is compared to React, some attention is paid to CSS. In React, in particular, it is very popular to use the so-called CSS-in-JS. Take a look at the documentation:
If you're a fan of the CSS-in-JS approach, be aware that it is available in Vue, thanks to many popular libraries, such as
I like single-file components that include CSS. The figure below shows an example of a component from the documentation. Notice the
This tag in the component file gives us styles, limited by the framework of this component, plus - convenience when editing the code in the form of syntax highlighting. In addition, this approach is easier to implement than CSS-in-JS from React ...
As already mentioned, the React ecosystem is much larger than the Vue ecosystem. Before us is one of the advantages of React, but it can confuse newbies. Vue gives the community less freedom. Instead, important libraries enjoy official support:
Vue helper libraries for managing application state and routing (among other things) are officially maintained and updated according to the core library. In React, instead, the path of transmission of these functions to the community is chosen. This enhances ecosystem fragmentation. However, due to the greater popularity of React, and its ecosystem is more extensive than that of Vue.
For me, managing the state of the application is the main difference between React and Vue. One of the key paradigms in React is functional programming. If you use the popular Redux state management library with React, then you are already working as part of a functional approach to application development.
Similar attention to functional programming in React in recent years has had a major impact on the vast community of JS developers. The creators of React are not the inventors of functional programming - this is a rather old idea. However, React, quite obviously, popularized this concept among the new generation of programmers. This is a powerful programming approach that personally helps me write better code.
One of the fundamental principles of functional programming is immutability (immunity). Here, if you're interested, a recent presentation on the importance of immunity, but the main idea here is to manage what is called "side effects", as well as to simplify and make more predictable state management of the application.
It should be noted that React itself is a library that cannot be called completely consistent with the spirit of functional programming. There is, in addition, a popular library for managing the state of React applications, called MobX . It implements the mutable state of the application. This is what you can find in the Vue documentation:
The MobX library has become quite popular in the React-developer community, and it actually uses a reactivity system that is almost identical to that in Vue. To some extent, the React + MobX bundle can be seen as a more verbose version of Vue, so if you use this combination and you like it, switching to Vue is probably the next logical step.
Evan Yu writes about this in one of his tweets .
Another popular state management tool in Vue is a library called Vuex. Here is an excerpt from an article comparing Redux and Vuex, which will help highlight the differences between these libraries:
Vuex, like Redux, is a library inspired by Flux. However, unlike Redux, Vuex changes state instead of making it immutable and replacing it completely, as with the Redux reduction function.
This allows Vue.js to automatically retrieve which directives need to be re-rendered when the state changes. Instead of using specialized reducers, Vuex allows you to organize the management of the state of the application using storages called modules.
Although here we are moving into technical areas, for many developers, paradigms mean something. If you are one of those who adhere to the functional approach, then React is likely to be more attractive to you (with the possible exception of those who use MobX). If not, then Vue might be more interesting.
Recently Dan Abramov quite actively communicated on Twitter, speaking about comparisons of React and Vue, made not in favor of the first. I think these tweets are worth a look. Dan is part of the React development team, and there is some bias in his comments, but they still provide additional insights to the React versus Vue comparison.
Here Dan responds to the criticism of a simple example using React, saying that React aims to simplify the understanding of the code even though the increasing complexity of the project requirements, and not to make simple examples as short as possible.
Here he talks about how React implements top-down data flow. Therefore, the changes redirect the data stream along predictable paths in the code base instead of letting them go along arbitrary routes if something changes. He says that in some cases this means more code. But this leads to the emergence of code that, in the long run, is easier to read and maintain.
Here he says that simple and complex code usually looks almost the same. And there is no abyss that you need to jump in order to achieve greater expressiveness of programs. In cases of data bindings or the flow of control provided by a library, this is often not the case. At the same time, he adds that this does not mean that Vue is bad (many like the features of this framework), but to judge frameworks based on what “Hello World” is less, in his opinion, leads away from reality.
As you remember, we summarized the results of the comparison between React and Vue at the very beginning of this material. So here I want to quote from an interview with Evan Yu, which he gave to Vivian Cromwell. The conversation was about how Vue looks compared to other frameworks.
I think, considering all existing frameworks, Vue is probably more similar to React than others, but in a broader sense, among all frameworks, it can be called the term “progressive framework” that I coined. The idea is that Vue is a kernel that represents data binding and components, making it similar to React. It solves a very precisely defined, limited set of tasks. Compared to React, Vue pays more attention to technology availability. That is, it aims to ensure that people who know the basics, namely HTML, JavaScript and CSS, can master it as quickly as possible.
We are trying to build Vue as a framework with a compact, minimalistic core. But, as the complexity of your applications grows, it’s quite natural for you to face new problems. For example - routing, data exchange between components, separation of state in large applications. In the same series - the need for tools to build projects to help make the code base modular. Here you can ask questions about the organization of styles and various additional resources that make up the application. Many frameworks that can be called more complete, covering the solution of a wider range of tasks than is assigned to the core of Vue, such as Ember or Angular, try to offer the developer a solution to all the tasks that he may encounter, and try to make everything embedded in the framework.
This is some compromise. The more assumptions about how programmers will use the framework, is made during its development, the less flexibility, in the end, such a framework allows. Another option opposite to the first one is to shift the solution of all auxiliary tasks to the community, as was done in React, whose ecosystem is full of vitality. There are always a lot of ideas, but in this situation there are also disadvantages. Vue is trying to find a middle ground when the kernel provides a very limited set of features. However, in addition to this, we offer solutions that are suitable for phased implementation, such as routing systems and application state management systems, such as a set of tools for building projects and command line tools. All of them are officially supported, well documented, designed with the expectation of their sharing, but the developer does not have to use them all. I think this is probably the most important thing that distinguishes Vue, as a framework, from other similar solutions.
Dear readers! What do you think, what fate awaits React and Vue next year?
According to John, the last three years he has been engaged in commercial development at React. He says that when clients come to the company where he works, most often they say they want their project to be created using React. However, apparently, after a while, Vue will also use a similar level of attention. In this article, he analyzes React and Vue in order to better understand the difference between these two libraries? and says that what this article is about will help him in his work with clients. He believes that even though he has been working with React for several years, and he likes what he does, it will be nice to prepare for the future, as there are unexpected situations when working with Vue, in which his experience will not help him.
Let's start from the end
I want to begin my story about React and Vue, oddly enough, with conclusions. These two frameworks are similar, although there are some important differences between them, which I briefly describe. Why compare them? One of the reasons is that for Evan Yu , the developer of Vue, React was one of the sources of inspiration. These frameworks are much more similar to each other than they are, say, similar to Angular or Ember. From the Vue documentation, you can see that both the frameworks we are talking about today have the following features:
')
- Using Virtual DOM.
- Reactive and component structure.
- The focus is on the main library. Additional tasks, such as routing and managing the global state of the application, are solved by aids.
If we consider ready-made projects built on the basis of these libraries, I don’t think that there are serious differences between those made on Vue and those built on React. Namely, React and Vue are similar in terms of performance, both frameworks are suitable for creating projects of very different scales.
If you are developing an application designed for different platforms, for example, on a traditional web and on mobile devices, React has an advantage over React Native. My colleagues also used React to create embedded applications for TVs. This is an interesting example of an exotic platform on which React can be used. However, the possibility of developing applications for mobile platforms, and Vue, thanks to Weex , therefore, it is possible that for a certain mobile project, this framework will be preferable.
It should be noted that the React ecosystem is much larger than that of Vue, which may well contribute to the success and speed of development. If in order for the React-application to take place, some important functional is needed, the chances are high that something like this has already been implemented. In fact, it is very likely that for many problems in the field of React it will be possible to find even several solutions.
Another important consideration for the type of clients my company works with is the opportunity to find developers who are well versed in the library or framework on which these clients rely. React also has an advantage here, although I believe that it is most likely temporary.
Other differences mainly relate to the finer points of development and to technical details. For example, they relate to programming paradigms, which are characterized by certain features, some compromises, and I can not single out any of these clear strengths or weaknesses. This we will discuss.
As a result, we can say that if there is a team that is already familiar with React, the transition to Vue will not give it particular advantages (we will talk about the minuses below). If your team is just starting to develop a web application frontend, or is thinking about switching to something new from frameworks like Backbone or AngularJS, then you should look to Vue, although the above mentioned strengths of React do not go away. Other factors, again, relate to the technical details, which we now talk about.
React and Vue Differences
Perhaps best of all, comparing React and Vue, refer to the Vue documentation (very qualitative), in which their similarities and differences are revealed very well. This documentation is especially useful since it was written by Evan Yu along with Dan Abramov, a member of the React team. In addition, if I treat something biased, excerpts from the documentation will help take a sober look at the situation.
â–ŤPerformance
In terms of performance, Vue and React are very similar. The Vue documentation says that Vue, in most cases, has a slight advantage, however, fresh benchmarks show that React 16 is faster than Vue 2.5. Some differences in working with frameworks are also observed when optimizing performance.
In React, when the state of the component changes, this causes the whole subtree of the component to be re-rendered, starting from itself. It acts as a root component. In order to avoid unnecessary re-rendering of child components, you must either use
PureComponent , or implement, where possible, shouldComponentUpdate . In Vue, component dependencies are automatically tracked when it is rendered, so the system knows exactly which components need to be re-rendered when the state changes. Each component can be considered to have something like the automatically implemented method
shouldComponentUpdate , with no restrictions that nested components can cause. This approach eliminates the need for a whole class of performance optimization, and allows developers to create and develop the basic functionality of applications, rather than solving auxiliary tasks.Here I would like to note that on December 19, 2017, after I, delving into the subtleties of performance issues of web frameworks, published a fresh article , I realized that my conclusions about the performance of frameworks should be clarified. Vue is a little faster, but the result depends on what is being measured.
â–ŤTemplate and JSX
Another major difference between the frameworks in question is that Vue uses templates, and React uses JSX . Many programmers do not like the template language. This is what the Vue documentation says:
Some argue that in order to write templates, you need to learn an additional specialized language. We consider this approach superficial when comparing Vue and React. First, the use of JSX does not mean that the programmer does not need to learn anything new, because we have additional constructions built on ordinary JavaScript. As a result, JSX is easy to master for those who are familiar with JS, but to say that no effort is needed to use JSX is too much. Similarly, templates are an extension of plain HTML, and thus, those familiar with HTML can master them without much trouble. Due to the features of the templates, we can also help the programmer to achieve more by writing less code (for example, using the
v-on modifiers). To solve the same problems, you may need much more code when using regular JSX or render functions.I’m worried about the situation when JSX and template language are mixed when developing an application. This complicates the project. It’s simpler to adhere to one approach, otherwise the expenditure of forces is inevitable on “context switching”, on transition from one environment to another. However, there may be those who disagree with this idea.
â–ŤCSS
Vue is very nice to work with CSS. In the Vue documentation, where this framework is compared to React, some attention is paid to CSS. In React, in particular, it is very popular to use the so-called CSS-in-JS. Take a look at the documentation:
If you're a fan of the CSS-in-JS approach, be aware that it is available in Vue, thanks to many popular libraries, such as
styled-components-vue and vue-emotion . The main difference between React and Vue in this area is that in Vue, style tags in single-file components are used for styling by default.I like single-file components that include CSS. The figure below shows an example of a component from the documentation. Notice the
<style> at the bottom of the code.This tag in the component file gives us styles, limited by the framework of this component, plus - convenience when editing the code in the form of syntax highlighting. In addition, this approach is easier to implement than CSS-in-JS from React ...
â–ŤEcosystem
As already mentioned, the React ecosystem is much larger than the Vue ecosystem. Before us is one of the advantages of React, but it can confuse newbies. Vue gives the community less freedom. Instead, important libraries enjoy official support:
Vue helper libraries for managing application state and routing (among other things) are officially maintained and updated according to the core library. In React, instead, the path of transmission of these functions to the community is chosen. This enhances ecosystem fragmentation. However, due to the greater popularity of React, and its ecosystem is more extensive than that of Vue.
Management
For me, managing the state of the application is the main difference between React and Vue. One of the key paradigms in React is functional programming. If you use the popular Redux state management library with React, then you are already working as part of a functional approach to application development.
Similar attention to functional programming in React in recent years has had a major impact on the vast community of JS developers. The creators of React are not the inventors of functional programming - this is a rather old idea. However, React, quite obviously, popularized this concept among the new generation of programmers. This is a powerful programming approach that personally helps me write better code.
One of the fundamental principles of functional programming is immutability (immunity). Here, if you're interested, a recent presentation on the importance of immunity, but the main idea here is to manage what is called "side effects", as well as to simplify and make more predictable state management of the application.
It should be noted that React itself is a library that cannot be called completely consistent with the spirit of functional programming. There is, in addition, a popular library for managing the state of React applications, called MobX . It implements the mutable state of the application. This is what you can find in the Vue documentation:
The MobX library has become quite popular in the React-developer community, and it actually uses a reactivity system that is almost identical to that in Vue. To some extent, the React + MobX bundle can be seen as a more verbose version of Vue, so if you use this combination and you like it, switching to Vue is probably the next logical step.
Evan Yu writes about this in one of his tweets .
Another popular state management tool in Vue is a library called Vuex. Here is an excerpt from an article comparing Redux and Vuex, which will help highlight the differences between these libraries:
Vuex, like Redux, is a library inspired by Flux. However, unlike Redux, Vuex changes state instead of making it immutable and replacing it completely, as with the Redux reduction function.
This allows Vue.js to automatically retrieve which directives need to be re-rendered when the state changes. Instead of using specialized reducers, Vuex allows you to organize the management of the state of the application using storages called modules.
Although here we are moving into technical areas, for many developers, paradigms mean something. If you are one of those who adhere to the functional approach, then React is likely to be more attractive to you (with the possible exception of those who use MobX). If not, then Vue might be more interesting.
Additional materials
Recently Dan Abramov quite actively communicated on Twitter, speaking about comparisons of React and Vue, made not in favor of the first. I think these tweets are worth a look. Dan is part of the React development team, and there is some bias in his comments, but they still provide additional insights to the React versus Vue comparison.
Here Dan responds to the criticism of a simple example using React, saying that React aims to simplify the understanding of the code even though the increasing complexity of the project requirements, and not to make simple examples as short as possible.
Here he talks about how React implements top-down data flow. Therefore, the changes redirect the data stream along predictable paths in the code base instead of letting them go along arbitrary routes if something changes. He says that in some cases this means more code. But this leads to the emergence of code that, in the long run, is easier to read and maintain.
Here he says that simple and complex code usually looks almost the same. And there is no abyss that you need to jump in order to achieve greater expressiveness of programs. In cases of data bindings or the flow of control provided by a library, this is often not the case. At the same time, he adds that this does not mean that Vue is bad (many like the features of this framework), but to judge frameworks based on what “Hello World” is less, in his opinion, leads away from reality.
Results
As you remember, we summarized the results of the comparison between React and Vue at the very beginning of this material. So here I want to quote from an interview with Evan Yu, which he gave to Vivian Cromwell. The conversation was about how Vue looks compared to other frameworks.
I think, considering all existing frameworks, Vue is probably more similar to React than others, but in a broader sense, among all frameworks, it can be called the term “progressive framework” that I coined. The idea is that Vue is a kernel that represents data binding and components, making it similar to React. It solves a very precisely defined, limited set of tasks. Compared to React, Vue pays more attention to technology availability. That is, it aims to ensure that people who know the basics, namely HTML, JavaScript and CSS, can master it as quickly as possible.
We are trying to build Vue as a framework with a compact, minimalistic core. But, as the complexity of your applications grows, it’s quite natural for you to face new problems. For example - routing, data exchange between components, separation of state in large applications. In the same series - the need for tools to build projects to help make the code base modular. Here you can ask questions about the organization of styles and various additional resources that make up the application. Many frameworks that can be called more complete, covering the solution of a wider range of tasks than is assigned to the core of Vue, such as Ember or Angular, try to offer the developer a solution to all the tasks that he may encounter, and try to make everything embedded in the framework.
This is some compromise. The more assumptions about how programmers will use the framework, is made during its development, the less flexibility, in the end, such a framework allows. Another option opposite to the first one is to shift the solution of all auxiliary tasks to the community, as was done in React, whose ecosystem is full of vitality. There are always a lot of ideas, but in this situation there are also disadvantages. Vue is trying to find a middle ground when the kernel provides a very limited set of features. However, in addition to this, we offer solutions that are suitable for phased implementation, such as routing systems and application state management systems, such as a set of tools for building projects and command line tools. All of them are officially supported, well documented, designed with the expectation of their sharing, but the developer does not have to use them all. I think this is probably the most important thing that distinguishes Vue, as a framework, from other similar solutions.
Dear readers! What do you think, what fate awaits React and Vue next year?
Source: https://habr.com/ru/post/345488/
All Articles