React vs. Vue.js: What's the best in 2021

At the present time, front-end developers have three popular libraries for building user interfaces: React, Vue.js, and Angular. If you would like to know what's the ideal solution for you, keep reading!

Precisely, React is a user interface library, Angular is a fully-featured framework, while Vue.js is a progressive framework.

In this article, we'll show you a comparison between React and Vue.js to help you decide which one to choose for your next project in 2021.

This guide will also help you if you have just finished learning JavaScript and need to pick a library to learn next!

Introducing React and Vue.js

JavaScript developers can use React and Vue.js to build front-end applications or rich user interfaces that run on the client-side via a web browser. They are both based on familiar patterns, such as components, but they're not entirely identical.

In the beginning, there was a debate between developers if they should choose Angular or React. However, recently, Vue.js was added as another library that front-end developers should consider when developing their apps due to its constant growth.

React was initially developed for Facebook and first released in 2013, and it's still being developed and maintained by the tech giant. It's available under MIT license, a permissive open source license that many web tools are using.

Vue was initially developed by Evan You, who was an ex-Google developer working on the Angular team. It's influenced by the most popular and modern libraries/frameworks such as Angular, React, and Ember. It's an open-source project maintained by the community.

As stated by Evan You:

What if I could just extract the part that I really liked about Angular and build something really lightweight.

Vue, or also Vue.js, is younger than React. It was released in 2014. Since then, Vue has been steadily growing in popularity and became competitive to React, which is an impressive thing since it doesn't have the resources of a company like Facebook.

While both libraries are open-source projects released under MIT, React is backed by a giant company, while Vue.js relies on crowdfunding and contributions from the community.

MIT is a very permissive license, but you should always understand the license before using a library. Here is a summary of the MIT license in easy English.

Who's Using React and Vue

Websites of some big companies use Vue for the user interface such as Alibaba, Behance, Euronews, Trustpilot, etc.

Some other well-known companies use React, such as PayPal, Netflix, Disqus, New York Times, and Airbnb, but also its original creator Facebook, Instagram, and WhatsApp.

In terms of tools, Gutenberg's new WordPress editor is built with React, while Vue.js is integrated with the popular Laravel framework.

The Differences between React and Vue

Both libraries are component-based and enable developers to build UIs by using and reusing components. However, they also have different structures and features.

We'll see the differences between both libraries based on the following points:

• Development and popularity
• Architecture
• Ecosystem
• Learning Curve

Development and Popularity

When learning a new library, you are investing money or time or both of them.

Consequently, a significant thing that developers should be worried about is the longevity of the tool. So they don't waste time and money learning something that would soon become obsolete.

When looking at an open-source project's health, continuous development is a good determinant alongside growth and popularity. So, let's look at Vue and React in terms of these factors.

At the time of this writing, React v17.0 is already released without any new significant features for developers.

As stated on this offical blog post,

The React 17 release is unusual because it doesn't add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself. In particular, React 17 is a "stepping stone" release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

Thanks to this new version, it can be seen as a long-term project because it makes it easier to upgrade React in the future.

For Vue, the latest stable version is 3.0.5, released on 30 December 2020. This version was rewritten from scratch with TypeScript instead of plain JavaScript.

Using TypeScript with your new Vue projects is now more comfortable with better development tools and integration with IDEs. TypeScript helps build scalable and more maintainable JavaScript applications. Now that it has first-class support in Vue, it will help developers build scalable apps right from the start.

Also, Vue 3 introduced new features such as the Composition API inspired by React Hooks that enables developers to reuse logic across components easily.

With this version, Vue becomes the right choice when developing large-scale projects and a tool that developers can rely on in the future.

Popularity

In terms of popularity, React clearly wins since it has a vast community compared to Vue.

Presently, StackOverflow contains over 15,220 questions with the reactjs tag without counting supporting libraries such as react-router, react-redux and react-native. while it contains only 3,772 questions with the vue.js tag.

On npm, React has over 10,290,648 weekly downloads while Vue has over 2,264,333 weekly downloads.

React has clearly way more downloads, but here is a chart that compares the two libraries. Still, Vue is growing fast and has already exceeded Angular in terms of downloads.

On GitHub, React has 164,000 stars, while Vue has 180,000 stars which are more than React with few thousands. In 2018, this was seen as a historic moment by Dan Abramov and the community.

The 2020 Developer Survey made by Stack Overflow, listed React as the second most popular library after jQuery. Vue.js is listed as the seventh one.

The State of Developer Ecosystem 2020 report by Jet Brains lists React as the most popular front-end library.

As stated in the report:

React is still the most popular framework. Moreover, its share has grown by 10 percentage points since last year. Meanwhile, Vue.js has lost 7 percentage points over the last year, but it still occupies the third position.

Learning Curve

Let's now see the learning curve of each library. While both React and Vue.js are similar in many concepts, Vue is much simpler and more comfortable to learn with better documentation and detailed examples.

React's popularity may help you find more help when looking for solutions to development problems in online communities such as Stack Overflow and development blogs. However, since Vue.js is continuously growing, we can be assured that developers will produce more online resources.

React is known for its steep learning curve. Developers need to learn about JSX, ES2015+ and modern build systems since a lot of examples use the class syntax instead of React Hooks.

While Vue scales up just as well as React, it also scales down just as well as jQuery. You can start by importing the library using a script tag just like beginners are familiar with:

html
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Architecture

Components are a corner concept of both React and Vue.

A component controls a view that is a patch of the screen. It encapsulates the code required to display the view and the logic that allows the user to interact with the view. This is a good explanation of component-based architecture in React.

Also, both libraries use the virtual DOM, which is a programming concept where an ideal, or "virtual" representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM (In the case of React). This process is called reconciliation.

React uses JSX which is a syntax extension to JavaScript. Instead of writing regular HTML, you use it to describe what components should look like. It might remind you of a template language, but actually, it doesn't use any custom syntax for rendering logic. Instead, you can use plain JavaScript array methods like .map and .reduce to display multiple elements inside components and curly braces {} to pass any JavaScript expression to the HTML element.

This is an example:

jsx
const element = <h1>React vs. Vue!</h1>;

What is assigned to the element variable is actually a React Component that can be rendered into HTML.

Both React and Vue use a one-way data flow between components. This makes understanding the flow of data easier in large applications.

Ecosystem

As said previously, React is a library. It concerns itself with one aspect of web development which is rendering the user interface. In contrast, Vue is a progressive framework that helps developers structure their projects and provides many built-in official tools for other essential aspects such as client-side routing.

Vue has a CLI generator that makes it easy to generate a new project using an interactive wizard. This is a great tool that makes it easy to get up and run quickly. It allows you to choose from various build tools, which it will then install and configure for you. It will also generate your project structure and files, providing you with a pre-configured starting point that you can build on instead of starting everything from scratch.

Vue CLI is built on top of a runtime dependency that can be easily upgraded and extended via plugins, offers various templates, and supports custom presets.

You can create a Vue project using the following commands:

bash
npm install -g @vue/cli
vue create my-project
# OR
vue ui
$$$$$

React has create-react-app, but it has a few limitations compared to Vue CLI. It does not allow any configuration at the time of project generation and only offers a single template that assumes you're building a single-page application. In contrast, Vue offers a wide variety of default options for various purposes and build systems. It also doesn't support creating projects from custom presets, which can be useful for enterprise environments with pre-established conventions.

You can create a React app using the following commands:

bash
npx create-react-app my-app
cd my-app
npm start
$$$$

npx is a package runner tool that comes with npm 5.2+.

For routing, Vue has a built-in router similar to other frameworks like Angular, which provides Angular Router, a fully-featured and built-in client-side router. React doesn't provide a router out of the box, but the community provided many robust solutions such as React Router.

For sending HTTP requests, unlike Angular which has HttpClient module, React, and Vue don't have builtin HTTP clients, so developers can either use the Fetch API, available on modern web browsers, or the Axios client.

For state management, both React and Vue can use Redux, which is an implementation of the Flux pattern invented by Facebook to be used with React. Vue has its own implementation called Vuex, an Elm-inspired state management solution that integrates deeply into Vue and provides a superior development experience than other similar libraries.

Both libraries have a rich ecosystem, but one noticeable difference is that Vue's supporting libraries for state management and routing, among others, are all officially supported and remain updated with the core library. React instead leaves these responsibilities to its community, forming a more divided ecosystem. However, due to React's popularity, its ecosystem is richer than Vue's.

Developing Mobile Apps with React and Vue

Thanks to the evolution of web technologies, developers can use JavaScript, HTML, and CSS to build mobile apps that can access the native features of mobile devices.

Unlike native languages such as Kotlin for Android and Swift for iOS, you can use web technologies to build your mobile app once and reuse your code across many devices.

React has React Native, a popular SDK that allows developers to build native-like applications with JavaScript.

For Vue, some tools exist for building mobile applications such as NativeScript with NativeScript-Vue, a plugin for building mobile applications but not as popular as React Native.

There is also Weex, but it's currently still in active development and is not as mature and well tested as React Native. Still, it's being developed by Alibaba, the largest e-commerce company globally, with the Vue team's collaboration.

Recently Ionic, one of the best hybrid frameworks for building mobile apps, has added React and Vue support.

For desktop, developers can use Electron with React and Vue.js to develop cross-platform apps that run on Windows, Linux, and macOS.

Conclusion

React and Vue are both outstanding libraries for building scalable JavaScript applications. The teams behind them have done great work, especially the Vue team, which competed with libraries backed by tech giants like Facebook and Google.

React is more flexible, has a bigger job market than Vue for the current time being. However, Vue is more structured and more comfortable learning while providing the same programming patterns for efficiently engineering web apps such as components, data binding, virtual DOM, and the Flux architecture.

React's community, even if it's large, is also very fragmented because of developers' freedom to adopt whatever structure accommodates their requirements. This freedom is the cause of confusion that may explain the larger number of questions posted on StackOverflow.