React vs. Vue

If you are interested to learn about the React JS and React native

React and Vue is the two most popular JavaScript libraries which are used to build thousands of websites today. Both React and Vue are very powerful frameworks with their own set of pros and cons. Which one you have to pick, depends on the business needs and use cases.

Both React and Vue have a lot of common things like the component-based architecture, usage of virtual DOM, usage of props, chrome Dev tools for debugging, and many more. But, both have some significant differences, which are given below.

React vs Vue
ReactVue
DefinitionReact is a declarative, efficient, flexible, open-source JavaScript library for building reusable UI components.Vue is an open-source JavaScript library for building reusable user interfaces and single-page applications.
HistoryIt was created by Jordan Walke, a software engineer at Facebook. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram. Facebook developed React in 2011 for the newsfeed section, but it was released to the public on May 2013.Vue was created by Evan You, a former employee of Google worked on many Angular projects. He wanted to make a better version of Angular, just extracting the part which he liked about Angular and making it lighter. The first release of Vue was introduced in February 2014.
Learning CurveReact is not a complete framework, and the more advanced framework must be looked for the use of third-party libraries. It makes the learning of the core framework not so easy. It adds some complexity to the learning curve as it differs based on the choices you take with additional functionality.Vue provides higher customizability, which makes it easier to learn than Angular or React. Vue shares some concepts with Angular and React in their functionality. Hence, the transition to Vue from Angular and React is an easy option. Also, the official documentation is well written and covers everything the developer needs to build a Vue app.
Preferred LanguageJavaScript/JavaScript XMLHTML/JavaScript
SizeThe size of the React library is 100 kilobytes (approx.).The size of the Vue library is 60 kilobytes (approx.).
PerformanceIts performance is slow as compared to Vue.Its performance is fast as compared to React.
FlexibilityReact provides great flexibility to support third-party libraries.Vue provides limited flexibility as compared to React.
Coding StyleReact uses JSX for writing JavaScript Expression instead of regular JavaScript. JSX is similar to HTML code within the JavaScript expressions. React takes everything as Component, and each component has its own lifecycle methods.Vue coding style is little similar to Angular. It separates HTML, JS, and CSS as like web developers have been used to the web development scenario for years. But, it also allows using JSX if you prefer. Vue’s take of the component lifecycle more intuitive than React’s.
Data BindingReact supports one-way data binding. The one-way data binding refers to a single source of truth. React flows in a single direction, and only the model can change the app’s state.Vue supports both one-way and two-way data binding. The two-way data binding is a mechanism where UI fields are bound to model dynamically. If the UI components change, model data is also changed accordingly.
ToolingReact has great tooling support. It uses third-party CLI tool (create-react-app), which helps to create new apps and components in React Project. It has excellent support for the major IDEs.Vue provides limited tooling support as compared to React. It has a Vue CLI tool, which is similar to the create-react-app tool. It gives supports for major IDEs but not as good as React.
Current VersionReact 16.8.6 on March 27, 2019Vue 2.6.10 on March 20, 2019.
Long Term SupportIt is suitable for long term supports.It is not suitable for long term support.

Component build principles in React and Vue.js

JSX and single-file component structure in React

Components render the data on web browsers. They include the UI part, which is shown to a user (HTML) and logic (JavaScript). The logic describes functions and methods to communicate the data in the browser. React uses JavaScript Syntax Extension (JSX), a syntax language that helps write functions corresponding to native methods of browsers. Safari, Chrome and Firefox are based on JavaScript engines that can directly talk with the logic functions written in React. Since JavaScript code is enriched with HTML tags, it can’t be recognized by a web browser. So, React is converting the programming code to pure JavaScript, using Babel Transpiler. JSX allows to return HTML in JavaScript, or it could be executed in HTML. Also, JavaScript variables can be assigned with HTML tags, like this:

const message = <h1>React is cool!</h1>

Dynamic variables could be put into bracket syntax ( { … } ) in the middle of JSX.

component code in React

An example of React component, written with JSX (image source link).

According to Stackshare statistics, the most favourite features of React are components (747) and simplicity (484). JSX, though, takes less user appreciation (31).

react-advantages

I think the biggest concern about JSX is that it doesn’t require a specific code structure. The logic and UI of components are in one file so that it could lead to messy code.

The idea of the single-file component is opposed to Angular, which proposed keeping HTML, JavaScript and CSS in separate files. Completing components in a single file didn’t get enough popularity unless Airbnb and Netflix joined the React community and began using React for their MVP construction.

When searched for materials related to our topic, I found the ‘Do Better Dev Show podcast’. In one of their episodes, Nathan Calvank and his co-host Gyanesh Mishra discussed the main difference between Vue and React. In the middle of the podcast show, Nathan shared his technique of code adjustment in React:

“JSX combines logic and presentation. You have got your HTML alongside your JavaScript in the same component. The way it is separated now: you have all your logic at the top, and you just return all your JSX below that.

If you have a sufficiently complex application, you can pull out all of that logic to a container. The container holds all that logic and loads components, including this logic”.

Vue.js follows HTML templates for the component design

The same as React, Vue.js proposes keeping the UI and logic in the same file. The component code in Vue.js is contained within a specific HTML template.

The templating brings a clear image of the component code. It helps programmers keep an eye on the methods, view the properties and observe the render functions.

vue-js-component-structure

Vue.js has a specific syntax. It uses double braces {{ }} as place-holders for data. HTML attributes are the directives in Vue.js and contain the prefix v-.

The framework’s system involves objects, classes and behavior categories. It matches with the experience of programmers who had worked with object-oriented programming.

Structure of the component in Vue.js

In the meanwhile, Vue.js enables writing with JSX, which extends the programmatic power of the framework.

Summary of the requirements:

React requires solid JavaScript skills, while Vue.js is more oriented to novice developers. Similar to React, Vue.js enables writing with JSX, but the components are written with HTML templates.

How do components impact browser DOM?

React renders data through the virtual copy of browser DOM

When a user opens the web page, the Internet browser parses it to a tree-like structure and reads it up to down. This tree-structured file is called the Document Object Model (DOM).

If the user did some action on the page, the browser needs to recreate and re-read the DOM. It takes more loads and decreases the resources of the browser.

React avoided the traditional DOM rendering and leveraged the capacity of data rendering in the browser.

Pete Hunt, a core member of React team, described the idea for the InfoWorld magazine:

“The browser itself is retain mode. You click an HTML element on the screen, and then you change it over time. The programming model we wanted for React was basically to throw out and redraw everything. We think that’s easier to understand. However, the browser is not designed to work like that. What we did is we built something that we’re calling the virtual DOM to abstract that. And so we have a way of basically rendering to a virtual DOM, throwing out the whole virtual DOM and re-creating it every time the data changes, and then React under the hood will convert that, will get the old virtual DOM with the new virtual DOM and then convert that to manipulations of the real browser DOM”.

Thank you, Pete. Based on your explanation, we could figure out how does the Virtual DOM operates:

  1. Before the web page is loaded in the web browser, React makes a copy of the DOM and places all the objects in a new component.
  2. When a user opens the web page, React doesn’t access a real DOM but renders the copy of DOM. It is called the Virtual DOM.
  3. While the user walks through the page, React is computing the changes. If the user clicked a button or performed any other action, React creates a new snapshot of the DOM and compares it with the previous version.
  4. If one more node element has changed, React updates the page rendering the real DOM.

Amazingly, that React team kept in mind an idea of the game engine when developed the virtual DOM:

Pete Hunt

A Member of Core Team of React

The difference with React is the way that your program is much more like a game engine, as opposed to these alternative approaches, with data-binding.

Further, he explains: “With a game engine effectively what happens is the screen is cleared at the beginning of every frame, and then you redraw the scene.

Principles of virtual DOM in React

Vue.js is tracking only the dynamic parts in virtual DOM

Vue.js has followed the idea of React’s virtual DOM, but it is processing differently.

Evan You, a founder of Vue.js, made a critical review of React virtual DOM. He shared his insights during the presentation in Toronto:

“Some of you might know that virtual DOM allows us to compare two snapshots of your view structure and figure out what actual changes you should apply to the DOM. In most cases, it is relatively cheap and fast. However, there is still a cost because you are recreating lots of JavaScript objects. You have to walk through the whole tree on each update to figure out what has actually changed. And it counts pounds as your application gets larger. But the worst part about the virtual DOM is no matter how little dynamic content you have in your template, you always have to walk through the whole tree to find out what has exactly changed”.

The virtual DOM in Vue 3.0.11 is tracking the dynamic elements only, which contain <p v-if="ok">.

React refined the rendering algorithm since its 16.0 version release

Evan You is right, saying that checking the nodes within the DOM tree is time-consuming. Compared to React, Vue has adjusted this technology. But could this difference be applied to the current version of React? To answer this question, we need to take on some research.

Virtual DOM in React operates based on reconciliation principle. As we already described, this concept implies creating and comparing virtual copies of DOM before changing the regular one.

The issue appears when we approach the JavaScript engine, which runs a web browser. It has to keep up a few processes together: reflect the functions within React app and update the DOM tree. At this point, let’s recall that JavaScript executes all tasks in a single thread. It has to deal with the component functions like props and state updates and simultaneously make the changes to the whole DOM. If one process takes a longer time than expected, it affects another and leads to delays in animations.

For the circumstance when modern web applications, especially SaaS products, have graphic transitions, the described issue appears to be a crucial challenge.

Let’s take a look at the below scheme. It showcases how the JS engine renders the content on the screen. The diagram is borrowed from the blog post “A Closer Look at React Fiber,” published on the Alibaba cloud community website.

A browser gradually renders the information on the screen, frame by frame. This job needs to handle a significant amount of work; let’s see how it goes on:

  • input event, gets back feedback to the visitor as soon as possible;
  • timers, tracks the time of performance and runs a callback function;
  • begin frame, checks the events for every frame, such as window resize, scroll, media query;
  • requestAnimationFrame, executes the self-name function, having performed the call back before that;
  • layout, which responds to the style and position of a certain layout;
  • paint, fills out the elements within each node, ensures their size and location;
  • idle period, executes the tasks registered in requestIdleCallback.

You may have noticed that the list involves various functions. If anyone takes longer than 16ms to complete, the graphic on the page screen will be interrupted. This will lead to page shuttering and poor user experience.

But since its 16th version, the React team has entirely rewritten the toolkit’s core. Currently, it is called the React Fiber.

Dan Abramov explained this principle using the analogy of computer games too. During one of his online lessons, he admitted that the game designers were familiar with the problem when the screen wasn’t filled correctly on the device. For instance, a bottom section could be updated earlier than the one on top. It seriously affected the user experience quality.

The solution which helped solve this problem is called double buffering. Game designers write a separate buffer instead of writing to the same one. And once the buffer is completed, they just swap them. So this is kind of how React works, starting from its 16th version.

React distinguishes the functions into those that affect the browser DOM and those related to props and state updates. Component updates are grouped into one category (“functions”), and lifecycle methods and DOM changes are combined into another (“side-effects”).

With this help, programmers could prioritize the rendering work. The most consuming work like lifecycle operations could be postponed for the sake of an animation transition job. Meanwhile, the high-priority tasks could be arranged to one queue and split into smaller ones, or increments.

The mentioned solution becomes possible due to the implementation of work units or fiber nodes. Each fiber corresponds to a specific step within a rendering flow. Instead of a tree-like structure, it proposes a linear representation of data. It is easier to process and eliminates the time losses which Evan You referred to.

The linear structure of nodes is formed as an effects list. Dan Abramov likes to explain it by offering the Christmas Tree and lights analogy.

Imagine that we have a tree of fiber nodes. Each highlighted node is responsible for particular work.

tree-lights-analogy

As shown in the example, the recent update reasoned c2 to be added into the DOM, d2 and c1 to change attributes, and b2 to fire a lifecycle method. The effect list will link them together so that React can skip other nodes as less priority.

React uses the firstEffect pointer to indicate where the list starts. In our case, it is applied to the a1 node. Hence, a linear effects list will look as follows:

react-fiber-flow-chart

The new linear approach enables React applications to prioritize the functions within one thread, use a scheduler to optimize the timeline and save the browser’s resources.

With that said, we need to say that the virtual DOM algorithms in React have dramatically changed. It is different now from what Evan You explained in 2019. React was refined due to Fiber which encouraged many startups to move to this platform. For instance, Alibaba has chosen React, though it initially worked with Vue.js.

Summary on comparison of the virtual DOM processing:

  • Templating in Vue.js helps to represent a mini-DOM of a component. Instead of tracking each object, Vue.js goes over the dynamic parts in templates. So, it sufficiently optimized the operation of virtual DOM and leveraged the client-side rendering in Vue.js projects.
  • React utilizes Fiber technology which helps to avoid time-consuming tasks by skipping or postponing them. The developers received the ability to control the rendering process and adjust the performance during animation transitions.

Data binding of the components

While looking through the articles comparing React vs. Vue.js, you could find different views regarding the data binding. You could often read that React follows just a one-way data flow. Meanwhile, Vue.js provides just the two-way binding like Angular. That is not true.

Both React and Vue.js support the one- and two-way data flow simultaneously. Moreover, they suggest the one-way data flow as most preferred.

Let’s get a look at the piece of documentation on Vue 3.0.11 that emphasizes the benefits of one-way data-binding:

“All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.”

Even though React components are designed for one-way flow, they could work with the two-way direction.

React supports callback functions so that the children components could fetch the props to their parents. For example, if a user is typing the text in the input field of the child component, these changes will reflect the parent and update its content.

React data binding

With that said, the React community is provided with react-hook libraries, which enable two-way data binding.

Summary:

Vue.js and React support one-way as well as two-way data binding for components. In general, one-way data flow helps establish better control of the project functionality. Both frameworks recommend it as the best option.

React vs. Vue
Show Buttons
Hide Buttons