More chapters are coming!Notify me
There’s no universally right choice in Vue vs React dispute. The nuances decide. But those nuances can be crucial for your project, don’t they?
Whether you look for a simple answer or a careful comparison, we’ve got you covered. The article is divided into two parts:
Part 1 – actionable answers for the busy ones.
Part 2 – detailed comparison of business and tech aspects for those who want to dive deep.
Also compare: Angular and React.
Tip: to cross-check React with Angular and Vue at once, scroll this article down and find a bonus summary table there.
So, which one should you choose? React or Vue?
Part 1: Simple answer (for the busy ones)
Both technologies are unopinionated and provide high flexibility in terms of tooling and architecture.
React and Vue will be a better choice for the teams of frontend specialists who know how to deal with that much flexibility and design scalable architecture. No strict patterns mean much freedom. Mistakes made in the beginning may cause problems later.
However, thanks to modularity and using components, after catching it up, the development process becomes fast and easy, with comfortable updates and testing.
There are four major differences between Vue and React.
Library vs framework
React is a tool for building UIs. For other purposes, teams need to choose additional libraries and tools.
Vue, besides a UI library, offers routing and state management packages.
Talent availability and community
There are significantly more React developers on the market, and many of them with extensive experience. Getting a React developer to your project will be easier than in the case of Vue, especially if you care about starting fast.
React has a very heterogeneous environment. There are many different tools for one purpose and they are equally good. That’s generally okay but may cause problems for inexperienced teams.
With Vue, there are officially recommended tools for various purposes, but since the community is fairly small, some plugins or tools are missing. The React community is very active. It prepared open-source solutions for most cases.
Note: If you have a team of backend developers and don’t plan to hire, Angular may be easier for them to catch up with than React or Vue, unless you hire a mentor.
It’s easier to hire experienced React developers fast. If you depend on your existing team, Vue is easier to catch up with and more newcomer-friendly. Both solutions may require some work in terms of tooling: with React, your team has a broad choice, and with Vue, for specific cases, they may need to create a solution. So, consider your priorities.
Still hard to choose? Then let’s dive into the details.
Part 2: Details (for the curious ones)
Table of contents
- Talent Availability
- Learning Curve
- Framework Evolution
- Technical Aspects: Tooling, Rendering, Testing
- Companies Using
It may not be the best decision to go after a popular, trendy solution, but you need to think about the popularity of the framework in terms of support and talent availability.
GitHub stars show the hype around a framework and in some way its quality. In 2018, Vue started to become extremely popular, and overtook React. However, both repositories have a vast number of stars.
Stars are only one indicator we can analyze on GitHub. Let’s take a look at other ones:
Both projects show activity, but there are significantly more users, contributors, and repos in the case of React. React has the greatest community on GitHub.
Also, the React community is very active. They are well-known for creating useful open-source solutions and being eager to help. If your developers will have any issue, the community will help.
Stack Overflow Survey
Stack Overflow’s Developer Survey is a research where developers name their favorite and the least favorite technologies, working habits, likes, and dislikes.
- Most loved technologies
React and Vue are among the first three technologies that are most loved by developers who are experienced in working with each of them respectively.
Besides, both technologies have a large community on Stack Overflow.
In the case of Vue, developers’ experience grows steadily, but it’s significantly lower than the React one. However, those who tried it, are not willing to switch to another framework. The graph also shows how many developers would like to try Vue.
Developers’ experience with React is very high and it constantly grows. Also, the majority of developers spoke positively about React: they either used it and want to use it again or heard of it and would like to try it. Not many developers are willing to switch to another technology.
React has a significantly bigger community and there are a lot of talents available on the market. If you want to start your project fast, it will be easier to find React developers than Vue ones. However, you need to be careful during the recruitment process, to pick the right ones. It seems that Vue’s community is still rising, and we need to wait a little longer for the talent boom.
Useful: What’s the difference between a framework and a library? A library is a collection of class definitions, which allows for easy code reuse. When developers call a method, they remain in control. Frameworks specify the control flow and they are those who call your code. They are more complex, and there are a lot of white spots to fill in with the code.
State management or routing are needed in almost every project, and Vue provides that. It offers a compromise: it’s not an opinionated platform that imposes the solutions, but it also gives what’s useful. However, the simplicity of React is also its advantage – it focuses on components and UI rendering, and does it great. For other tools, there’s a large active community. The decision depends on your preferences, it seems we can call it a tie.
For frontend experts, the learning curve of Vue is shallow. Also, the transition from Angular to Vue is easy, because there is overlap concerning some functionalities. However, the simplicity of Vue.js has its cons – it opens the door for poor code, making it harder to debug and test, and it’s tough to handle for backend developers.
There is no strict release schedule in Vue. The newest version, Vue 3.0, was released in September 2020. It provides improved performance, smaller bundle size, better TypeScript integration, and new APIs for large scale use cases. The new codebase was written in TypeScript.
React doesn’t have a strict release schedule. Version 16 brought a few new features like React hooks, long-awaited by the community. Hooks allow developers to build an entire app with functional components, no classes. In October 2020 React 17 was released, without new features, but its primary focus was to make it easier to upgrade the React app. React 17 allows for gradual updates. There are also changes to event delegation – now it’s safer to embed a React tree managed by one library’s version to another one. It also makes it easier to embed React into apps built with other technologies.
Both frameworks are under active development: they change, new features are added and some of the old ones are removed. React and Vue constantly improve and respond to the community’s needs.
- Vuex – the official state management library that follows the Flux architecture and is similar to Redux.
- Nuxt.js – built on top of Vue to combine several smaller tools to make it easy to create apps with server-side rendering support.
- Vue CLI – a fully-featured set of tools for rapid development, allows experimenting with new ideas without creating a full project, by using an instant prototyping feature. Offers support for Babel, Jest, Mocha, PWA, and others.
- Virtual DOM – the same as in React’s case.
- Create-react-app – a boilerplate project that allows developers to start a React project easily.
- Virtual DOM – a virtual representation of the real DOM that is kept in memory. React knows when to re-render or ignore specific pieces of DOM. It helps to reduce the performance cost of updates.
It’s easier with Vue in case of tooling unification. Developers have one official option, well-integrated with a framework. For example, with React we have to choose for ourselves between Redux vs MobX (and the choice won’t be obvious), while with Vue we have a recommended solution – Vuex. That’s big facilitation for teams that are not experienced with a framework.
However, teams may suffer from the lack of some specific tools, and sometimes the lack of choice may result in going with something that’s not a perfect fit for our project. Also, there’s a possibility of heterogeneity appearing in the future when the community will activate itself more.
With React, you have to choose from a bunch of tools for one purpose. In most cases, the community doesn’t recommend anything, meaning every tool is equally good. Sometimes there are differences, which can cause problems with choosing, especially for inexperienced teams. For example, it can be hard to choose between Redux and MobX. Also, a heterogeneous environment can be challenging for bigger teams. Leaders need to take care of the unification. When every member of the team starts to use different tools, the app becomes inefficient.
Tip: Server-side rendering helps developers to take care of SEO, while simultaneously guaranteeing users the best and fastest experience. It suits perfectly for e-commerce. Users get the content faster, the web page is more accessible, and search engines index it easily.
Nuxt.js is a framework created by the community as a higher degree solution for server-side rendering. However, it limits the direct control over the app’s structure. Developers can also use the Quasar Framework. Vue offers a stand-alone server-side rendering guide.
Next.js is a framework for creating server-side rendering in React apps. However, if your team also uses React Router and Redux, they need to pay attention on how to perform server-side rendering without problems.
Testing and debugging
Vue team prepared a documentation for component testing and E2E tests. Among a few recommended solutions are tools like Mocha, Vue Testing Library, Cypress, and others – all depending on the type of tests your team wants to perform. To debug an app, you can leverage debugger statements or Vue.js devtools.
Jest is a popular library created by Facebook you can test your React app with. Test cases can run as part of the development process. If you want to use a tool that was created specifically to test React code, there’s a React Testing Library available (but the library is not necessary to be able to test React code).
React will be easier to follow for experienced teams who know how to choose the whole tooling. But it still needs strong leadership to take care of unity. Vue has official support for various options, making the choice easier but it doesn’t apply to testing. React and Vue both support server-side rendering.
Seems that we have a tie since both technologies have vulnerabilities in that matter. However, if your team is not experienced it may be hard to choose the best tooling without the mentorship.
Ease of use
Vue offers CLI and packages that integrate with build tools. The use of various libraries allows programmers to solve problems in different ways. However, support for some important plugins is missing. Also, too much flexibility can create problems in bigger teams.
To create a new project with a fitting setup developers can use create-react-app. React gives the team access to the whole ecosystem of open-source, community-made tools and libraries. It’s highly certain that there already is a tool for anything you’ll need. Also, JSX can make the development process easier because it allows React to show useful error and warning messages.
Both frameworks are built of components. Thanks to the modularity, it is easy to update the application (we can do it partially without interfering with other parts). Functional components can be easily replaced, decoupled, and reused in other parts of the app. They make testing faster. With code reusability, it’s easier to maintain the app, it also leads to optimized coding practices, consistency in performance, and higher quality.
Migrations through versions
Vue offers a migration helper tool to make changes easier. The team claims that 90% of APIs remain the same when comparing versions 1 and 2.
In React applications, upgrades through versions are easy. Scripts like codemod provide developers with seamless migration. With version 17, React introduced gradual updates.
Both frameworks are modular and easy to use. Inexperienced teams may suffer from too much flexibility, so hiring a mentor would be a good solution. With React, the team may upgrade partially, and with Vue, a big part of the API remains the same in various versions.
Since we’re talking about frontend frameworks, the scalability mainly comes down to organizing the code and a team.
Vue is very lightweight and seems better for smaller apps. However, Alibaba or WizzAir are examples of scalable websites created with it – they carry the highest traffic. Also, Vue 3.0 provided new APIs for large scale apps. Since Vue is still expanding and developers don’t have that much experience as with React, we need to wait a little to assess scalability.
With React, developers need to think about scalability from the beginning. React is a perfect choice for large-scale apps because components allow scaling the architecture easily. However, if a team makes a mess in the architecture and folder structure in the beginning, then they won’t be able to scale the app and the work won’t be efficient. The golden rule is to keep things close to the place you use them.
Plus, React is a reliable solution since it has a backup from many big companies. Famous brands like Uber or Lyft contribute to React, so we can be sure that it will remain on the market for a long time, even if it would stop expanding today. That’s an advantage when you aim for growth, bigger scale and a long-term project.
React is a proven, battle-tested tool for large-scale apps. You only need to remember to have a large-scale in mind from the beginning. Vue is also used in websites that handle large traffic, but the solution is not tested as much as React.
Vue also uses Virtual DOM to provide high performance and memory allocation. Virtual DOM allows for faster and bug-free performance.
Virtual DOM enhances the performance of React apps, and single-direction data flow gives better control over the project.
Note: We’re looking at extra subtleties here. Vue and React are simply fast. So, most likely, performance won’t affect your choice.
React and Vue both use Virtual DOM and offer excellent performance.
Vue vs React: companies using
Alibaba – they developed their complex, international website with Vue and created Weex – a framework for building mobile user interfaces compatible with Vue. Vue turned out to be a stable solution, mature enough to carry high traffic.
Wizzair – the website carries immense loads of traffic – almost 20 mln monthly entries. Vue allowed the team to achieve smooth interactivity and provide users with pleasant experience.
GitLab – they struggled with maintenance and scalability problems of the former tech stack. The team chose Vue because of the great documentation, easy learning curve, and simplicity of coding. The project resulted in extending the app with new features.
Instagram – the app is entirely based on the React.js library. It offers various features like geolocation, Google Maps APIs, search engine accuracy.
Netflix – the company used React on their platform called Gibbon which was created for low-performant TV devices. With React, they improved startup speed, runtime performance, and modularity.
Yahoo Mail – the app requires regular, numerous updates. What is more, lots of the Yahoo Mail app’s components were created in MVC pattern (it doesn’t fit well with big apps). With React and its components, the team improved modulation and made it easier to update the User Interface.
Vue vs React: summary
Vue doesn’t have backing from a big company, and its community is relatively small. Developers like it since it’s very flexible. However, it can become too flexible for some teams and hard to use for non-experienced ones. It has a shallow learning curve for frontend experts and steep for backend ones. Vue has the smallest community and lacks some plugins and tools, but it grows steadily, being lightweight and offering excellent performance.
In the Vue vs React discussion there’s no generally better choice. Take into account your team’s characteristics, project requirements, preferences, and location if you’re hiring a new team.
React is very popular among frontend developers, and it’s easy to find experienced specialists. The library offers a lot of support from the community, and useful, open-source solutions developed by contributors. React is supported by the largest players (and they contribute), so it’s reliable for long-term projects. To start, developers need to learn JSX.
Choose Vue when:
- you have more time to find developers,
- you want to migrate from Angular.js and maintain similar syntax,
- your team is ready to develop some missing plugins or tools on their own,
- your team are frontend experts and you aim for the shallowest learning curve (for backend developers Vue may be too flexible in the beginning),
- you prefer having a simple choice in terms of tooling.
Choose React when:
- you need to hire experienced experts fast,
- you want to have a broad choice of tools and libraries,
- you aim for the largest scale – React is a proven solution, Vue still needs some verifications,
- you count on the community support,
- your team is experienced with flexibility in terms of tooling or you hire a mentor,
- your team are frontend experts willing to learn new things like JSX.
Bonus: Angular vs React vs Vue
Tip: To compare React and Angular in a more detailed manner, read the previous chapter of this handbook.
This article is a part of Handbook:React Web Development: A Practical Guide for CTOs
Liked this chapter?
Awesome! We’ll be adding new content on this topic soon. Want to be notified?