This post was originally written by me for the MentorMate blog .
As one of the most dynamic fields in software development, front-end is constantly evolving. So much so that it can sometimes seem impossible to keep up with its many emerging trends and tools. With the adoption of ES6 and the functional nature of JavaScript, people are abandoning the imperative universe of jQuery and instead, embracing the declarative, component-based way of structuring applications.
As one of the most dynamic fields in software development, front-end is constantly evolving. So much so that it can sometimes seem impossible to keep up with its many emerging trends and tools. With the adoption of ES6 and the functional nature of JavaScript, people are abandoning the imperative universe of jQuery and instead, embracing the declarative, component-based way of structuring applications.
As of 2019, there are 3 dominant players in the Front End battleground — React, Vue, and Angular. According to “State of JavaScript 2018” React and Vue have the highest satisfaction rate. These are also the technologies that I’ve explored the most. React is backed by Facebook and is currently used by Netflix, Airbnb, Instagram, and many others. Vue is created and backed by Evan You and a small core team and is used by Alibaba, Wizzair GitLab, etc.
In this blog, we’ll examine the main differences in the way React and Vue work and the core ideas behind them. Our intention is not to make comparisons of each technology’s popularity, job prospects, or documentation. Rather, we’ll compare them from a technical perspective.
Similarities
Before discussing the core differences between React and Vue, it’s important to note the traits that they have in common.
One of the most significant common traits is the use of Virtual DOM. The Virtual DOM is an abstraction of the HTML DOM where every HTML element is represented as a JavaScript object. This approach offers some performance gain and enables DOM manipulation in a more declarative fashion.
Here’s an example of the Virtual DOM:
React and Vue are both lightweight, have component-based architecture, and expose lifecycle methods. Their performance is fairly similar so those differences are too negligible to be discussed. Both technologies can easily be plugged into any existing web application, even if it’s not a Single Page Application. This is the case with the Gutenberg editor, which is built with React and was recently implemented in the WordPress ecosystem. Similar is the case with GitLab, where the jQuery codebase is being gradually replaced with Vue.
Last but not least, both React and Vue have big proactive communities and plenty of libraries and tools available.
Let’s begin with the most obvious distinction: React is a library, whereas Vue is a framework*.
Differences
React allows DOM manipulation, component architecture, and state management (the component-level state, not Redux). All the rest is left up to the community. This approach offers a lot of freedom for the developers. Many React applications rely on third-party libraries, built, and supported by the community, and the choice for the right one might be challenging for beginners.
Vue, on the other hand, is more opinionated and comes with a lot of syntactic sugars, plugin system, built-in directives, transitions, etc. Plus, the core team created companion libraries for routing and state management along with other helpful tools. Some examples of such companion libraries are the Vue-router, Vuex for state management, and Vue CLI. Of course, users are not obliged to use these tools as there are some alternatives. The main benefit is that these are built and supported by the core team. Vue’s main focus is simplicity and the team has taken care of these common concerns, enabling faster setup and development. Vue is quickly catching up to React and the community has built plenty of third-party libraries, enriching its ecosystem.
Data Mutation
In most modern web applications, a big part of the logic is handled in the browser through JavaScript. In order for the web app to be highly interactive, the UI should constantly react to data changes. Usually, we refer to the application’s data as “state”. Most often, the state is a JavaScript object where that data is represented as key/value pairs. In JavaScript, objects and array are reference types, hence they are mutable by design. For instance, if we change one of the properties on an object, the object keeps its memory location, unlike with strings and numbers. You can read more about that here. One of the biggest contrast between React and Vue is the way they handle state change. This heavily affects the mechanism behind the UI updates, also known as re-rendering.
React is known for its promotion of the functional programming (FP) style. It implements FP principles, such as higher-order functions, immutability, pure functions, etc. The philosophy behind React is that the state should be immutable. When trying to mutate the state object, no re-rendering occurs. In order to trigger re-rendering, the method setState should be used. This updates not only the root component but the entire component sub-tree as well. The re-rendering process can be controlled by using PureComponent or shouldComponentUpdate lifecycle hook. That flexibility comes at a cost, though, so all the optimizations should be done manually. This makes the data flow more predictable. Overall, React gives developers a lot of control over the re-rendering process.
You can find an example in this demo React application I made.
In Vue, the state is represented in the data object. Unlike React, the mutation of the state object triggers re-rendering. You can find an example in this demo Vue application I made.
However, there are some gotchas. For example, mutating nested objects or arrays might not trigger re-rendering. In this case, we can either use the Vue.set method (similar to the setState method in React) or make the changes in immutable fashion by using Object.assign or the ES6 spread operators. This can be confusing to beginners but you can find more information the internal mechanism behind Vue here.
Vue automatically performs optimizations to update specific parts of the component tree but doesn’t offer a manual way to prevent re-renders. In React, it’s up to the developer to decide when and where to manually prevent them.
Templating and Styling
Templating and styling are essential parts of every UI library and is also where the differences between React and Vue are the most obvious since it affects the code design. There’s a large contrast in the way both technologies approach it.
As mentioned above, React relies heavily on its functional, JavaScript-y nature. The logic and the markup are regarded as a whole and therefore are mixed. This is achieved with the use of JSX which is an abstraction of React.createElement method and is used to create Virtual DOM entities. Its syntax resembles HTML with some significant differences. It offers smoother developer experience, debugging, and better code readability than the createElement method. It’s also possible to use React without JSX.
In terms of styling, the React community has come up with different solutions like JSS and Styled components. This is a typical example of the freedom and the rich choices that the React community offers. For years, they’ve addressed the CSS`s flaws and has come up with great — revolutionary even — ideas. Personally, I’m a big fan of Styled components.
Vue takes a more conservative approach to templating and styling — one that’s separated from the logic. The markup is represented as templates that look just like old school HTML. In fact, every valid HTML is also a valid Vue template. Inside the templates, the framework offers a lot of syntactic sugars like conditionals, iterations, etc.
The same is true for the way Vue handles styling. In the style tag, you can write pure CSS or any preprocessor. In addition, the „scoped” attribute allows styles encapsulation on component level. In general, styling in Vue feels more natural to newcomers but lacks some of the flexibility that the CSS-in-JS solutions from the React ecosystem offer.
Extensibility
Extending Vue or React applications with third-party libraries is quite simple. Most of the vendor libraries for React are simply components that enhance the existing ones already. For instance, the React-Redux library is using the Context API and exposes a higher-order component that makes state accessible from every component of choice.
In Vue, many of the third-party libraries are in the form of plugins, taking advantage of the built-in plugin system. The plugins can be added by using the Vue.use method.
Summary
Both technologies offer great advantages. Being a library, React gives more control to its users, like the manual re-rendering control. It heavily employs the functional programming principles, which is clearly indicated in the way the library handles the state and the communication between the components. In contrast, Vue as a framework, provides more built-in features and companion libraries from the core team, which eventually makes development experience smoother.
If you’d like to try React out for yourself, you can start with Create React App. It’s a great tool for generating React projects without all the boilerplate. If you want to build a Vue project, you can use Vue-CLI, which offers great options out of the box.
*in the official docs, Vue is described as framework and React as library. The difference between framework and library can be subtle and remains open for interpretations.
Additional contributions and editing by MentorMate Senior Front-End Developer Rosen Kanev.