React vs. Vue in 2022: Which One Should You Choose?

Guest Blogger

Seth Carrino

Introduction

React and Vue are two of the most popular frontend javascript frameworks and for good reasons. They both offer the ability to create reusable components, take advantage of the Virtual DOM and have amazing community support.

When building out modern applications it is hard to argue against why one should adopt either of these tools. Hopefully by the end of this you will have a better understanding of each of their backgrounds and what each of them do well. This will hopefully help you align the goal of your application with the technology suited for it best.

But before we dive into the technical side of each let’s take a closer look at both of them.

 

 

React Overview

React was originally created by Jordan Walke who is a software engineer at Meta (formerly known as Facebook). He was inspired by XHP, which is essentially a HTML component library for PHP. This was another tool that was also built by Meta which is actually inspired by ECMAScript for XML. After being announced as an open source project to a very skeptical audience at the JSConf US in May 2013, it was soon adopted by the development community. After developers were able to get their hands on it, the skepticism started to fade and an understanding amongst developers on React’s innovation started to take root.

Today, React remains at the top year to year as one of the most popular javascript libraries to use. With the support of Meta and a vast amount of developers pitching in to help with its continued development React will be here to stay for the foreseeable future.

Vue Overview

Created by Evan You, a former Google employee, Vue was released to the open source community in 2014. His goal was to create something that took the best from frameworks like Angular, React, and Ember. Vue is meant to offer an easier learning curve for developers and give them a pleasant experience while creating their applications. From my experience it does exactly what it aims to do.

Vue is now maintained by a core team and their community which has continued to grow substantially through the years that it has been out in the wild.

A fun fact about Vue is that version names are often derived from manga and anime like Cowboy Bebop, Dragon Ball, One Piece and more.

 

 

Similarities

So how similar are React and Vue? In the modern age of Javascript frameworks/libraries there are not going to be vast differences and will share quite a bit in common. To sum it up, here are some of the similarities.

  • Virtual DOM
  • Typescript Support
  • Variety of tools and libraries
  • Active communities
  • Reusable Components
  • PWA (Progressive Web App) Support
  • Straight forward version migration

I would also like to dive into a couple of the differences you will find immediately with both.

Differences

React is a library & Vue is a framework

One of the main differences between React and Vue is that React is a library whereas Vue is a framework. I see these differences thrown around a lot without explanation on what that even means. If you are in that group let me help enlighten you a little bit. Libraries provide developers with predefined functions and classes to make their work easier and boost the development process which give you the ability to control the flow of the application and call the library.

On the other hand frameworks are like the foundation that developers build applications for specific platforms which the framework then controls the flow and calls your code.

This metaphor by Brandon Wozniewicz explains it very well: “A library is like going to Ikea. You already have a home, but you need a bit of help with furniture. You don’t feel like making your own table from scratch. Ikea allows you to pick and choose different things to go in your home. You are in control.

A framework, on the other hand, is like building a model home. You have a set of blueprints and a few limited choices when it comes to architecture and design. Ultimately, the contractor and blueprint are in control. And they will let you know when and where you can provide your input.”

Syntax

Another big difference that you will notice immediately is how React and Vue are written. I think the best way to show this is with what you will be programming the most and that is your components.

 

React Component Syntax

 

 

Vue Component Syntax

As you can see above there are some pretty big differences on how common component syntax is handled even for a simple component. Personally, I am a fan of the structure of React’s functional components due to feeling less verbose but after working with Vue I can completely understand the clarity of having all things dealing with the functionality of the component and the view be separated the way it is. It really helps cause less confusion on proper code style throughout a codebase.

Which one do you prefer?

Popularity

There are three sources I believe offer a good look at what developers are using and their opinion on each. For the comparisons we will take a look at GitHub, NPM, and Stack Overflow.

 

Github

React: 195K stars
Vue: 199K stars

 

NPM

React: 16,899,571 weekly downloads

Vue: 3,561,147 weekly downloads

* Data for Github and NPM is as of September 15th, 2022

 

Stack Overflow

This chart below gives you a good idea on how many people are new to a tool and/or are interested in learning more about the respective tool:

When a survey was taken from developers on Stack Overflow on what they are using and what they love this was the result as of early 2022:

Here are some comparisons broken down from the past few years to give you an idea of each of the most popular tools and their growth or decline. As you can see React has only continuously continued to grow in popularity.

 

2022 (june 2022, +70,000 developers): https://survey.stackoverflow.co/2022/

  • Popularity: React.js 42.62%, Angular 20.39%, Vue.js 18.82%, Angular.js 8.99%, Svelte 4.58%
  • Loved: Svelte 75.28%, React.js 68.19%, Vue.js 63.16%, Angular 52.27%, Angular.js 21.01%
  • Want: React.js 22.54%, Vue.js 14.6%, Angular 7.18%, Svelte 9.34%, Angular.js 4.32%

2021 (august 2021, +80,000 developers): https://insights.stackoverflow.com/survey/2021

  • Popularity: React.js 40.14%, Angular 22.96%, Vue.js 18.97%, Angular.js 11.49%, Svelte 2.75%
  • Loved: Svelte 71.47%, React.js 69.28%, Vue.js 64.41%, Angular 55.82%, Angular.js 23.18%
  • Want: React.js 25.12%, Vue.js 16.69%, Angular 8.47%, Svelte 6.57%, Angular.js 5.8%

 

2020 (february 2020, 65,000 developers): https://insights.stackoverflow.com/survey/2020

  • Popularity: React.js 35.9%, Angular 25.1%, Vue.js 17.3%, Angular.js 16.1%
  • Loved: React.js 68.9%, Vue.js 66.0%, Angular 54.0%, Angular.js 24.1%
  • Wanted: React.js 22.4%, Vue.js 16.4%, Angular 10.6%, Angular.js 7.7%

 

2019 (january 2019, +90,000 developers): https://insights.stackoverflow.com/survey/2019

  • Popularity: React.js 31.3%, Angular/Angular.js 30.7%, Vue.js 15.2%
  • Loved: React.js 74.5%, Vue.js 73.6%, Angular/Angular.js 57.6%
  • Wanted: React.js 21.5%, Vue.js 16.1%, Angular/Angular.js 12.2%

 

Performance & Scalability

There are so many ways to measure the performance of a tool but there is one source I want to point to that has done a fantastic job at doing so.

If you are looking for a very technical analysis of each framework, look no further than Stefan Krause’s website.

Here is an article you can read as well that will help shed light on what some of this data means and how to read it better.

Scalability is a bit tougher to gauge for each of these tools and as someone who has used both on large applications I can say that both work really well.

React was initially developed with large applications in mind and Vue was originally made for those looking to get started quickly with less of a learning curve so it is really good for start-ups. This ultimately really comes down to who is on your team and the tools they are most comfortable working with. Vue has really shown that it is capable of big tasks and there are big companies that have put that to the test.

In my opinion when it comes to React and Vue and how effectively you scale an application will depend on how effective you are architecting your application.

 

Wrap It Up Already

 

 

With all this information, which framework should you use? Let me run through a quick overview on who takes the cake for different aspects of development and then offer my pick for what I would choose in 2022.

  • Size and simplicity in architecture: React & Vue
  • Time for development overall (This one really depends on your team’s specialty): Vue
  • Cross-platform development ability: React
  • Supported by larger projects: React
  • High performance: React & Vue
  • Enables bootstrap integration: React & Vue
  • Flexibility: Vue
  • Documentation: React & Vue
  • Stability: React & Vue
  • Job opportunities: React

Although Vue has made amazing strides and has become the choice amongst many developers, I would still choose React. I wouldn’t call myself much of a gambler but if I had to choose which one would offer better career advancement and longevity that would have to be React at the moment. It remains at the top year to year as the trusted tool for developing javascript applications and offers more job opportunities. Vue is currently doing a great job at bridging this gap so only time will tell.

If you have a preference for either of these tools I would love to hear what you think and why you chose either React, Vue, or maybe even another tool for the job.

Explore More Blogs

Ready to get started with Lithios?

Contact us to see why the brightest companies trust Lithios.

Get in touch

©2024 Lithios LLC. All Rights Reserved