Мой профиль...

Поиск по этому блогу

четверг, 18 августа 2022 г.

React vs Vue: The Core Similarities and Differences

As one of the most dynamic fields in software development, front-end evolves constantly. So much so that it sometimes seems impossible to keep up with its many emerging trends and tools. The adoption of ES6 and the functional nature of JavaScript saw people abandon the imperative universe of jQuery. Instead, they embraced the declarative, component-based way of structuring applications.

As of 2019, three players dominate the front-end battleground — React, Angular, and Vue. According to “State of JavaScript 2018,” React and Vue have the highest satisfaction rate. These are also the technologies are use the most. Facebook backs React and Netflix, Airbnb, Instagram, and many others use it. Evan You and a small core team created Vue and You still backs it. Alibaba, Wizzair GitLab, and others use it.

React vs Vue: Similarities

Before we discuss the core differences in React vs Vue, let’s 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 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:

<div class="container">
<img class="img-responsive" />
</div>
<script>
// below you will find an example of Virtual DOM representation of the HTML code above
const domNode = {
tag: 'div',
attributes: { className: 'container' },
children: [
{
tag: 'img',
attributes: { className: 'img-responsive' },
children: []
}
]
};
</script>

React and Vue are both lightweight, possess component-based architecture, and expose lifecycle methods. Their performance is fairly similar so those differences are too negligible to discuss. Both technologies work with any existing web application, even if it’s not a Single Page Application. This is the case with the Gutenberg editor. It’s 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.

React vs Vue: Differences

Let’s begin with the most obvious distinction: React is a library, whereas Vue is a framework*.

*The official docs describe Vue as a framework and React as a library. The difference between framework and library is subtle and remains open for interpretations.

React allows DOM manipulation, component architecture, and state management (the component-level state, not Redux). All the rest gets 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. The choice for the right one is a challenge for beginners.

Vue 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. The team takes care of these common concerns and enables faster setup and development. Vue quickly caught up to React and the community built plenty of third-party libraries and enriched its ecosystem.

Data Mutation

In most modern web applications, JavaScript handles a big part of the logic in the browser. To maximize the web app’s interactivity, 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 key/value pairs represent that data. In JavaScript, objects and arrays are reference types, hence 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. 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 promotes 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 remains 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.

HERE’S 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 either use the Vue.set method (similar to the setState method in React) or make the changes in immutable fashion with Object.assign or the ES6 spread operators. This might confuse beginners but this guide about Vue’s internal mechanism should help.

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, the developer decides when and where to manually prevent them.

Templating and Styling

Templates and styles are essential parts of every UI library. They’re also where the differences between React and Vue are 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. The syntax resembles HTML with some significant differences. It offers smoother developer experience, debugging, and better code readability than the createElement method. You can also use React without JSX.

In terms of styling, the React community came 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 addressed the CSS`s flaws and came up with great — revolutionary even — ideas. Personally, I’m a big fan of Styled components.

Vue takes a more conservative approach to templates and styels — one separated from the logic. It represents the markup 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. You can write pure CSS or any preprocessor in the style tag. In addition, the „scoped” attribute allows styles encapsulation on component level. In general, Vue styling 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 uses 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 plugins and take advantage of the built-in plugin system. Add the plugins via the Vue.use method.

React vs Vue 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, 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. This makes the 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.

Additional contributions and edits by MentorMate Senior Front-End Developer Rosen Kanev. 

Релевантные посты...

Related Posts with Thumbnails