April 8, 2022
Vue.js and React.js are two popular frontend frameworks in the developer world, switching top spot on the podium each year in the categories of "most loved, used or popular". Both tools offer developers a productive approach to building various Web applications, but each has its own best use cases and responds to different business needs.
In this article, we’ll explore what those use cases are, along with the perks that make Vue.js and React unique.
To start off: why compare Vue.js and React? The main reason is time. Both frameworks can accomplish similar results, are popular in the community, and are used by successful businesses. But they offer differences that impact the learning curve, implementation time, and ideal use cases.
So, if you are a developer, you know that it takes a lot of effort to master technology. By smartly picking a few techs to focus on, you won't become a jack-of-all-trades with hollow knowledge.
Similarly, if you are a tech leader or business owner, you want to pick the most appropriate tech for your project to minimize risks down in the line.
Read the interview with Evan You and his plans on how to further grow Vue.js in our Vue Report: Amsterdam 2022.
React was created for the purpose of targeting specific needs at Facebook, and it continues to be maintained by the tech giant. In the past there were doubts regarding React’s license; currently, however, the tool operates under the MIT License—which makes it open source.
React’s corporate backing, especially from such a major player, indicates stability in the future and implies that React will continue to be developed with long-term support.
There are many reasons for Vue’s and React’s prominence in the developer landscape, but before we dive deeper into their distinctive features, let’s briefly go over what the two share that makes them so in demand.
One of the biggest differences between Vue and React is the way the view layer is built. By default, Vue uses HTML templates, but there’s an option to write in JSX.
In React, on the other hand, there’s solely JSX. Vue’s traditional separation of concerns into HTML, CSS, and JS makes it easier even for beginner frontend developers to learn how to create Web applications. HTML templates are also familiar to most Web designers, and thus improve collaboration between developers and designers.
To gauge popularity and support, we gathered different sources of data. First, let's look at GitHub, where the technologies are developed, and at Stack Overflow, where the community is solving problems and where newcomers can learn.
Stack Overflow surveys its users each year, asking about their most and least favorite frameworks. Both React.js and Vue.js have been listed as the Most Loved Web frameworks in the same survey, with React being four places before Vue.
React is now the 6th most loved web framework according to the 2022 Stack Overflow Survey survey results, with 68.19% of respondents saying they really like using it. Vue.js went down one place compared to 2021, to the sixth spot, despite the 18.82% share remaining constant.
Stars on Github is one thing but what is the actual regular usage of these frameworks? The Jet Brains Dev Ecosystem 2021 survey revealed that both the developer expertise and regular usage of the two frameworks are high, with Vue.js being on the rise. The share of Vue.js users grew from 34% in 2020 to 43% in 2021 while React experienced a drop from 64% to 49% in a YoY comparison.
JetBrains survey: framework popularity (regular use)
Another statistic giving us a better overview of the Vue vs React front is the yearly State of JS survey. In 2021, there was a growing upward trend in usage of Vue.js by developers that reached 51%, the highest result since the beginning of tracking in 2016. React has remained on the same level of 80% for three years now.
Usage of front-end frameworks (source: State of JS)
So if there is a business need for a more complex app, getting an experienced React developer who can jump into the project and start working immediately can take less time. On the other hand, the pool of Vue.js developers has been steadily growing in the last six years so this is becoming less challenging, too.
However, to see how Vue and React match in the performance area, we also took a look at a more readable but less comprehensive comparison written by Jacek Schae for Daily JS.
Jacek Schae used Google’s Lighthouse Audit to test how fast a RealWorld App implementation loads in a given technology. A score of 100 means that the tested website was lightning-fast.
A RealWorld Comparison of Front-End Frameworks 2020 (source: Medium)
Vue is purpose-built for creating interactive multi-page apps. You can quickly import its library and implement the framework to your existing apps. Also, the Vue CLI comes with ready-made scaffolding that allows you to start a new project in no time. When you install project dependencies, you implement them as plugins, so even if some standards change, you simply update the dependency.
As for the companion libraries for state management and routing, in Vue they are a part of the core library, so they are officially supported and up-to-date (unlike React, where they are community-based). It can be successfully used to build single-page apps, however, if you opt to use HTML syntax instead of JSX, reusing templates down the road can become cumbersome.
React, because of its impressive community, has a lot to offer. It’s lightweight enough to easily build multi-page apps but also good with single-page ones. React is immensely useful for building scalable web apps (look at Facebook). Unlike Vue, React doesn't provide ready-made solutions for e.g. routing, so you need to use third-party libraries for that (Flux/Redux, and create-react-app scaffolding tool).
React’s CLI comes out a bit poorer when compared to Vue’s. You cannot customize your project during generation but you can only use a single-page app template. From 2021 it is also possible to generate projects from user-built presets.
Since Vue has a very active community, there’s a plethora of well-maintained and organized documentation. This makes it easier to learn and find solutions to issues you could encounter. Actually, 76% of Vue survey participants pointed to great documentation as the biggest advantage of the framework. The overhauled documentation has been one of the core updates in Vue3.
"We’ve just shipped our brand new documentation in February 2022 which essentially marked the completion of the soft launch process. When Vue 3 was released it was really just the core, but Vue as a whole has grown into the full ecosystem over time."Evan You The Creator of Vue.js
React’s documentation remains far behind Vue’s in terms of accessibility and structure. It goes through basics and advanced uses, but navigating all the material isn’t nearly as smooth as with Vue. There’s no overview of React’s ecosystem. However, there’s a new, way better version of React documentation on its way, currently available as public beta.
Vue is chosen by those who seek:
Being a progressive framework, Vue can be integrated into an existing project incrementally, per project requirements. For example, as a lightweight library to add some interactivity to a Web application. In fact, 75% of developers participating in the 2021 edition of the State of Vue.js Report consider ease of integration Vue’s second-biggest asset. With such great documentation on hand, implementing Vue.js into a project becomes even faster.
With an easy learning curve and tools such as Vue CLI 3 and Vue UI, Vue is excellent for quick delivery of MVPs and startup ideas. Because of those, Vue is also a cost-effective solution for small to medium apps.
Vue has official packages for state management, routing, or server-side rendering, which come with up-to-date support and ensure synchronization throughout your system. With Vue CLI 3 and Vue UI, setting up a project and preparing it for deployment is lightning fast. This, in turn, helps build MVPs in a quick and efficient manner.
Don’t let that fool you into believing Vue isn’t a good fit for large Web apps. Quite the opposite. Vue has a vast ecosystem of tools and companion libraries, allowing the framework to respond to the complex needs of enterprise-grade applications.
Since React was created for large-scale Web projects, choosing it for small and simple apps might be overkill. Although it requires a lot of boilerplate code just to set up a working project, React’s architecture ultimately pays off in the long run.
Unlike Vue, React doesn’t have official packages for routing or state management. To build complex apps, you have to use third-party solutions for pretty much everything. But the choice is vast. Experienced developers tasked with delivering advanced projects will know which of the numerous libraries will be the best choice to meet the business demands of a particular Web application.
React Native is also the way to go when developing mobile apps with React. The framework has been praised for its “Learn once, write anything.” objective which means you get a native look and feel of your app for both iOS and Android, and you may also include platform-specific modules.
It may be surprising to see Facebook on this list as it was created at Facebook and is now maintained by Meta, but its former employee confirmed that Facebook's News Feed uses Vue.
Launched in 1999, Alibaba.com is a giant eCommerce focused on wholesale trade offering hundreds of millions of products to more than 190 countries and regions. Daily, users exchange hundreds of thousands of messages with suppliers using the platform, according to their website.
This HR portal by google is built in Vue, hosting a map of job opportunities, interactive content, and more.
Part of Adobe, Behance is a leading platform to showcase creative work and portfolios, helping individual talents and companies across the world connect.
This platform doesn't require an introduction, but just if you haven't heard about it: it's a streaming giant with a vast range of series and movies you can watch on-demand. The usage of Vue was confirmed by one of its developers a few years ago.
Multilingual news portal that reaches over 100 million users a month, hosting both text and multimedia content.
This online platform connects freelancers and businesses via thousands of project offers covering all aspects of work, from content writing to admin help.
The video game mammoth uses Vue.js in selected European regional websites, including Germany, France, Spain, and the UK. Their reward system for game accounts, My Nintendo, also uses the framework.
The page for this Hungary-based low-cost airline is made with Vue, allowing for the purchase of plane tickets and services for hundreds of destinations.
GiveDirectly is the first and largest nonprofit that lets donors send money directly to the people most affected by poverty. To achieve the project goals quickly and effectively, Vue.js was chosen for frontend development as the engineering team was already familiar with Vue.
React also has some widely-recognized companies among its users. Here’s the list of nine of them:
With its 2 billion active users worldwide and Meta ownership, Instagram is one of the most popular social apps using React. The framework was introduced by a team of developers who wanted to make Instagram faster for both OS and Android. The implementation wasn’t easy at that time and started with rebuilding the Push notifications feature.
React was implemented at Reddit fairly late, with the switch confirmed in June 2021. The new app's UI was rebuilt entirely in React.
As I’ve mentioned above, Facebook was behind the development of React as a framework and obviously, this technology is still used by its engineers. Their codebase includes over 30,000 components and React is heavily used in both its web and mobile applications.
Netflix is one of the companies that use both React and Vue in its applications. The company started using Vanilla JS as its frontend framework in 2018, but they still use React to create initial HTML on the server side.
Dropbox uses a wide variety of resources from the React range in its product, with the framework first introduced at the company 12 months ago. It’s not surprising considering the fact of how popular React was at that time and still is among developers.
Uber Eats was launched by its parent company, Uber in 2014, and React Native was its go-to technology right from start. The goal was to create a flawless flow between customers ordering food and the restaurants and with the support of React components and the Uber team's detailed knowledge of how this flow should work, the application operates as planned.
The well-known property rental marketplace is also built using React and React Native - the latter was added in 2016 when the company introduced its Airbnb Experiences feature. As of 2021, 20% of its code base is still written in React Native.
As confirmed on the Twitter Engineering blog, the lighter version of the Twitter mobile app was built using React. Thanks to that, the app is fast, reliable, and responsive, even in locations where the network is slow.
As was the case with Twitter, the use of React was announced by the Atlassian team on their engineering blog in the article titled ‘React is an exciting future’ published in 2015, right when the still-ongoing upward trend for this technology started.
Pizza Hut is an American restaurant chain founded in 1958. With 156 sites, it’s a leading restaurant serving pizza in Poland. React.js was used to rebuild its existing website in order to improve its user experience. They wanted to make the process of ordering pizza quicker and more enjoyable, helping the business increase sales and stand out from the competition.
Vue is lightweight, easy to learn, pleasant to write in, and not difficult to integrate with legacy technologies or an application without a specified framework. Because of its familiar templating syntax and use of components, integrating or migrating existing projects to Vue is faster and smoother. For that reason, Vue.js is great for startups but can be just as well used in large-scale applications.
Performance-wise, Vue.js is on par with React. However, the final results essentially depend on optimization efforts and application size. The documentation is excellent, explaining everything in minute detail.
React, on the other hand, is a veteran of the JS field. With corporate support, a large community, and an even bigger ecosystem, React is great for building complex enterprise-grade applications.
Also, the job market is booming with experienced React developers, so you won’t find yourself in a short supply of specialists. Because of its maturity and community, reaching out for help and getting a prompt and detailed answer is more or less guaranteed. This may also come in handy if you plan to outsource some tasks your team is working on as it will be easy to hire freelance developers who know how to work with React.
Vue.js and React are both great tools for building interactive user interfaces. To choose which one is better for your next project, you have to take a number of factors into account, including your specific use case, your business needs, environment, developer availability, budget, and the timeframe you’re working with.
According to our Frontend Architect, Artur Rosa who was also one of the speakers at this year's Vuejs Amsterdam conference, there's no easy answer when choosing between Vue and React.
The most important factor you should consider when choosing a framework is your team’s experience and skills. Make sure that you know how fast you can hire new developers and your team’s retention rate, too.
The most important factor you should consider when choosing a framework is your team’s experience and skills. Make sure that you know how fast you can hire new developers and your team’s retention rate, too.Artur Rosa Frontend Architect
Looking for more Vue content? Have a look at our blog:1. Monterail’s Partnership with Vue.js