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.
Introducing React and Vue.js
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
- 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.
With this version, Vue becomes the right choice when developing large-scale projects and a tool that developers can rely on in the future.
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-native. while it contains only
3,772 questions with the
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.
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.
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:
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.
.reduce to display multiple elements inside components and curly braces
This is an example:
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.
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:
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:
npx create-react-app my-app cd my-app npm start
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
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.
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.
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.