Intro
React and Vue are rising stars in the JavaScript front-end frameworks ecosystem. React is backed by Facebook, and Vue is completely a community-driven project. The choices that React developers and Vue developers make have consequences as the project size grows, but they may not realize them when they first pick up on over the other.
Both React and Vue can accomplish the same thing. However, they provide different paths to reach the final destination. In this article, you'll look at different comparisons that will help you differentiate between React and Vue and ultimately help you decide which one you should choose in your future projects.
What Is React?
React is a JavaScript library that is used to create single-page applications (SPAs). It allows developers to create interactive and reactive UIs. It was created by Jordan Walke while working at Facebook. React is also used to create mobile apps with the help of React Native.
This JS library grants a lot of flexibility since it uses components—isolated pieces of code—that can be used to create more complex logic and UIs. It also uses a virtual DOM to interact with HTML documents, but all elements are represented as js objects. A Hello World example for React is as follows:
jsx
import React from 'react';
const HelloWorld = () => {
function sayHello() {
alert('Hello, World!');
}
return (
<button onClick={sayHello}>Hello</button>
);
};
export default HelloWorld;What Is Vue?
Vue, like React, is also a frontend JavaScript framework for developing Client-side Rendered applications. Vue is a French word for "View". It was named as such by its creator, Evan You. It is one of those frameworks which gives a tough competition to React and is loved by developers all over the world.
Vue supports two-way binding and uses a virtual DOM for managing component trees and their states. The beauty of Vue is that it is a progressive framework and allows developers to migrate their existing projects steadily. Vue files use the `.vue` extension and support the following code structure for building web pages:
vue
<template>
</template>
<script>
</script>
</style>
<style>You can also watch the brilliant documentary about Vue by Honeypot here. I highly recommend it!
NPM Trends
If you look at the trends for the last two years, you'll see that React is way ahead of Vue in terms of downloads.
A part of the popularity is fueled by Next, a framework for building React applications in a structured and scalable manner. You'll get to know more about Next in the later section.
GitHub Stars
Checking the number of GitHub stars before adopting a certain technology is common practice among engineering teams. Still, stars are not the sole indicator of how good and reliable a certain technology is.
As of November 2021, React has about 178k+ stars, and Vue has about 190k+ stars. If you compare the star history of React and Vue, you'll realize that since 2018, Vue has had more GitHub stars as compared to React.
Did you notice anything strange? When you look at the NPM trends, you see that React is way ahead of Vue, but in terms of GitHub stars, Vue leads from the front. But why so?
Some open-source enthusiasts feel that many developers have a habit of "starring" a repository to follow or bookmark a project. So going by this narrative, you can conclude that GitHub stars are not an indicator of adoption but rather indicate the interest in technology.
Community
Vue has a great open source community while React is backed by Facebook.
One of the biggest selling points of Vue is its documentation. Many feel that Vue documentation is a gold standard for API docs, and they are incredibly clear. React documentation is average, but it comes no way near the Vue documentation. This doesn't mean that React docs are poor in any way; they just don't match the standards set by the Vue documentation.
Reddit is one of the most popular social media platforms where developers hang out and share their knowledge with each other. The React subreddit has more than 281k React developers and the Vue subreddit has close to 79k Vue developers. The lower amount of Vue developers on Reddit is due to the fact that Vue has a dedicated forum that is actively maintained by the Vue core team members.
So, in terms of community, both of these projects have awesome resources and support around the web. There is a number of people online every time to help you get out of a problem.
Production Size
The framework size doesn't matter when you are building a hobby project. However, when it comes to production applications that are used by hundreds of thousands of users around the world, it becomes a serious business.
Today, companies are trying to optimize their website performance on the microsecond scale, so it is important to have a small production bundle which is a key factor to having a low time to get the first byte.
Both React and Vue have tiny and comparable bundle sizes, 32.5KB/101.2KB uncompressed for React, and 31 KB/84.4 KB uncompressed for Vue. However, the React team is adding more API features, and many expect its production bundle size to grow in future releases. On the other hand, despite having lots of helper methods and shorthands, Vue has a small size compared to its counterpart, which is an awesome feat.
Real-Life Projects
When choosing a technology for a project, it’s vital to know the companies and real-world applications that use these technologies.
React is used by:
- BBC
- Netflix
- Paypal
Vue, on the other hand, is used by:
- Gitlab
- Adobe
- BMW
- Euronews
- Vice
- 9Gag
- Nintendo
- Grammarly
There are pretty big names related to both technologies, which is a good thing as it promotes the development of both React and Vue.
Learning Curve
Out of all the front-end JavaScript frameworks, Vue is the easiest to set up and learn. This is all due to the excellent Vue documentation that provides explanations and examples to help the new developers understand the framework better.
One of the biggest advantages of React is its flexibility, but it comes at a cost. Since React is not a full-fledged framework but a library, it has a steep learning curve. For beginners, it might be challenging to wrap their heads around JSX templates instead of using standard HTML. React doesn't restrict developers to a standardized code structure that can lead to spaghetti code if not handled well. Vue provides a proper structure for building web pages that help developers write clean and scalable code.
One drawback of Vue is that it doesn't integrate well with TypeScript. To compare, in React, all you have to do is replace your `.js` with `.ts` extension and install TypeScript support for React. That is all it takes to get started with building React applications in TypeScript.
Universal Frameworks
SEO is one of the primary concerns of every company. Lots of websites that use React or Vue have a hard time getting their SEO right.
This is because when you build your website using these frontend frameworks, you get a Single Page Application that needs JavaScript to render any content on the web page. The search engine bots struggle to render the JavaScript and hence give your websites a lower.
The solution to this problem is either Server-Side Rendered(SSR) pages or static pages. This is exactly where Universal frameworks come in. Their main aim is to provide server-side rendering and/or prebuilt static pages. For React, you can use Next, and for Vue, you can use Nuxt as a universal framework.
Next is much more popular than Nuxt, not just in terms of GitHub stars, but NPM trends as well. Next has about 76.4k+ stars and Nuxt has close to 38.7k stars.
In the last two years, Next has had almost tenfold downloads as compared to Nuxt.
This popularity of Next is because Vercel, the company that develops and maintains Next, also provides its own web hosting infrastructure that is hugely centered around Next. This allows developers to spend as little time as possible on deploying their applications. Hence, most developers prefer Next over Nuxt.
Final Verdict
The ultimate question still stands:
Who is the winner, React or Vue?
Well, there is no clear answer to this question.
These two frameworks are so well developed and maintained that in the end, it doesn't matter which one you use— you are surely going to achieve your goal.
It all depends on the taste and preference of the developer or the engineering team. Undoubtedly, there are way more React developer jobs at the moment, which is the sole trigger for React to be the first choice among developers and engineering teams around the world.
On a personal front, I use both React and Vue, and I love both of them. I really honor and admire the work done by the open-source developers to develop these technologies and help others earn their livelihood through them.
However, if I was to pick a framework for developing a project today, I would pick Vue with Nuxt.js. I don't know why but every time I write code in Vue, I feel like an artist at work. I know what I am doing, but with React I have to be careful with the structure.
If you have a different preference and think in a different way, you are more than welcome to share your thought process behind your favorite technology.
Other Alternatives
The JavaScript frontend ecosystem is buzzing with new frameworks all the time. If you are a risk-taker, you might be looking to experiment with a framework other than React and Vue.
Here are some of the upcoming frameworks you can experiment with:
If you want to dig deeper and take your research to next level, you can check out this honest comparison with other frameworks by the Vue team.
Also, if React JS is your framework of choice, you can check out the article about how to build a CRUD App with React.js and Supabase and learn more about the possibilities of this framework.
Thanks for reading!
