There are a lot of Javascript frontend framework in market right now, in which their hype to their own. The famous 3 - Angular, React and Vue (Svelte is still in the race as well), and also honorable mention for MeteorJS, Ionic. Of course there are higher frontend framework as well such as NestJS, NextJS and NuxtJS, but let's leave them for another discussion, shall we?
The purpose of this writing is not comparing both great framework for modern web app, but to highlight both features that gives the great developer experience, and where they can interchange the knowledge between both, so you won't have to start from scratch.
Disclaimer: I have professional experience in React for more than two years (and still counting upon me writing this article), and I just involved in Vue in my new project, so the comparison might not be fair towards Vue, so I hope I can do the best I can for Vue as well.
Another disclaimer: This is not a proper documentation for both frameworks, so if you look on how to use the framework, I recommend you to go to the documentation for the respective framework.
The Similarity
Both are javascript framework. I know right 😜?
Just kidding! Let us see the similarity offered by both before highlighting features those are unique to the respective frameworks.
Virtual DOM
Document Object Model (DOM) is an object that defines the document structure. To put it the easy way, the way you arrange all HTML elements. To optimize the DOM rendering when there is a change, both utilizes virtual DOM, where the DOM is structured right before the page with changes displayed to the user, so user won't have to experience a glitch.
Event changes
Both relies on event changes, where state plays an important role in triggering events such as mounts, renders, and updates (known as lifecycles). Differs with traditional JQuery approach, where you have to trigger the event on your own, React and Vue helps developer to encapsulate everything into an event, so the rerender can be triggered when there is state changes.
Component-based
To be able to produce components are what makes the framework the choice of developers, since it can save a lot of work, holding to the Don't Repeat Yourself (DRY) principle.
React
JSX
When you mention React, JSX will always come into play. Though you feel like you are writing HTML, you are actually using JSX, where Javascript will parse it in object later on and React will run the function to convert in into something like document.getElementByElement. That is why, inside JSX, you have to use className instead of class since the word class is reserved in Javascript.
const Component = () => {
return (
<div className="wrapper"/>
);
}
Declaratives
Since we composite everything under single function for a single component, it is easy to use the declared variable.
const Component = () => {
const name = "John";
return (
<p>{name}</p>
);
To trigger all javascript inside JSX, you only need to open curly braces, and you can do anything.
const Component = () => {
const names = ["John", "Adam", "Mark"];
const [age, setAge] = useState(12);
const increaseAge = () => setAge(age++);
return (
<div>
{ names.map(name => (<p>{name}</p>) }
<button onClick={increaseAge}>Increase Age</button>
</div>
);
};
Hooks
Don't get me wrong. Vue also has its own hook. However, React really has its strong suit with their hook implementation (given that you need to use functional pattern to use it). Before this, React uses Higher Order Component (HOC), which can also be implemented for both class component and functional component. To make it more verbose, React introduces hooks, which later introduce more verbose pattern and developer is able to split their code based on functionality, and not lifecycle. The most basic hook, useState and useEffect are the most used hooks in React ecosystem.
const Component = () => {
const [state, setState] = useState();
useEffect(() => {
console.log("Hello console!");
});
};
States and props
What I love about React is how you can actually optimize the state and props. From useState, you can optimize by memoize it using useMemo, then if you need to elevate and group bunch of states, you can use useReducer. Note that, you also need to know the cost of using the hooks as well.
To pass the props, you can simply pass it along with the function of the component as below:
const Component = (props) => {
// The rest of the component
<p>{props.name}</p>
};
When you import the component, you can pass anything that you need to the component this way:
<Component name="John" />
Let say, you don't have a lot of changes happened to a certain component, we can also use pure component, so the render is predictable for the renders, and you don't have to put useState inside it.
React Lifecycle
React has a standard component lifecycle - mount, update, unmount. In class component, there are methods that is used, like componentDidUpdate, componentWillUnmount. In functional components, its all packed inside useEffect, where you can set which changes will it subscribe to, and split code better.
const Component = () => {
useEffect(() => {
// Functions here are equivalent to
// `componentDidMount`, `shouldComponentUpdate`
// and `componentDidUpdate`
return () => {
// Functions here are equivalent to
// `componentWillUnmount`
};
}, [changesDeps]); // Changes can be state, props
};
Note that useEffect can be used repeatedly, oppose to class lifecycle method which can only be used once in a single class.
Vue
Before going into details about Vue, I will only use Vue 3 approach, mostly on Composition API. For React developers, I personally use Vue Composition API which are really similar to React. I might touch a little bit about the usual pattern, just to compare how simple Vue has been in term of verbosity and optimization.
Templates
Differs with React, Vue uses the usual HTML pattern, and not JSX. That is why, Vue recommends usage of templates (though you can also use render function and JSX if there is the need). You can use the usual pattern, including the usual element class.
<template>
<div class="wrapper"/>
</template>
Declarative
Vue has its own style of declare a variable. In traditional way, you can pass variable as data when you export the component, along with the templates.
<template>
<div>
<p>{{ name }}</p>
</div>
</template>
<script>
import { defineComponent } from 'vue';
const Component = defineComponent({
data() {
return {
name: "John",
};
},
});
</script>
However, starting Vue 3, where Composition API has been introduced, it provides developer a new way of writing the component, where React developer such as me, feel close to home, and helps me to adopt Vue as fast as I can.
Note that Composition API in Vue 3 didn't totally replace the old pattern in Vue 2, it's just providing a more verbose way of writing your component.
<template>
<div>
<p>{{ name }}</p>
</div>
</template>
<script setup>
const name = "John";
</script>
Simpler, right?
So, how about render that involve conditions and loops? Vue introduce binding, where you bind a variable to the content inside the template.
<template>
<div :class="wrapperClass" v-if="counter < 3">
<p>{{ name }}</p>
<button @click="increaseCounter">Increase</button>
</div>
</template>
<script setup>
import { ref } from "vue";
const name = "John";
const counter = ref(0);
const wrapperClass = "wrapper";
const increaseCounter = () => counter++;
</script>
States and props
Noticed that before this, we have a thing called data? Yeah, it serves the same purpose as React's state, where it will handle reactivity. This is to make sure the state is immutable. But in the following example, I'll just show the script setup equivalent.
<template>
<div>
<p>{{ counter }}</p>
<p>{{ user.name }}</p>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
const counter = ref(0);
const user = reactive({
name: "John",
});
</script>
So, how about props? Okay, let me show you the old and the new way.
<template>
<div>
<p>{{ counter }}</p>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
counter: Number,
},
});
</script>
<template>
<div>
<p>{{ props.counter }}</p>
</div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
counter: Number,
});
</script>
So, when you you import your component elsewhere, it behaves the same way as React pass the props.
<template>
<Countdown counter="3" />
</template>
<script setup>
import Countdown from "../sources/";
</script>
Vue Lifecycles
The flow of lifecycles between React and Vue are generally same, with Vue introducing some addition to the process. (I haven't use lifecycle extensively yet, so I will update it if I find new information).
So, the old way (Option API)
<script>
export default defineComponent({
mounted() {
// Execute function after mounted
},
});
</script>
The script setup way (Composition API),
<script setup>
onMounted(() => {
// Execute function after mounted
});
</script>
There, you can see the usage of hooks inside Vue!
Conclusion
React and Vue both offers their own way of managing states and props, the lifecycles, and their own way of binding and executing function to the HTML. Of course the next question should be "which one is better?", nevertheless both have evolved tremendously and will improve in future. So again, my aim to highlight the feature from both sides, so we can mutually recognize each pattern. Later, you can jump right to the other side, without worrying about relearning again.
Which one is easier for me? I will still say React is easy-win for me, but that doesn't give a fair comparison to Vue, given that I am still new to Vue.
If there's a missing part, that you believe is the key to each framework, comment down below 👇!
Top comments (12)
Personally, after job-searching for a while, seems like react offers more job opportunities than Vue. Probably for a beginner like me whose depending on making myself relevant in the industry, React is the go-to but for mid to senior dev who has free time and achieve job security, learning Vue for extra knowledge is always a plus.
I think Vue is much more beginer-friendly compared to React. Heck, you could just import Vue and start hacking around, adding reactivity as needed.
On the other hand, React will be a better bet in the long term, due the fact React is baked by so many organizations (Facebook, WordPress, even Microsoft IIRC)
Personally, I found Vue to be complex when I got into creating custom components. React is way more intuitive because you don't have to register components in the air. Just import and "call" the component.
By using Composition API, you don't need to register your component anymore, you can just use the same way React does! At least, that is how I feel with Composition API offered by Vue 3, to reduce the complexity behind Vue architecture.
I had to agree. Since Vue is much closer to the native HTML compared to React, Vue has a relatively lower learning curve to begin 😁.
JSX here, JSX there, where in reality it is actually an object 🙃😂
Great point there
in vue js you need to know how to make if or for and etc.. in react you dont :)
That is the good take of JSX, since they are Javascript in itself, so you can just use a standard conditions and loops. So, it's up to devs to optimise it the way they want.
Differ with Vue, they provided v-if, v-for and other binding method, so Vue will manage the optimization. There's a good take here as well, but of course, some prefers more dynamic optimization.
If you have a free time, then you should! Vue is also a cool framework, which has its own unique take on structuring your code.
Personally, I am proficient in React, given my experience. Having to move to Vue for my current project because of certain requirement, I thought it might take long time to adapt because I tried to explore Vue 2 before. But once they introduce Vue 3, and the existence of Typescript support and Composition API, my transition is as smooth as butter!
Vue is more intuitive and easier to understand
My take is React is much easier, when you organise your directory, configs and codes better. And so does Vue!
In fact, the way I structure my current Vue project the same way as I implement React project. It's all back to your styling and discipline. Readability is one thing, but of course, every dev has his/her own styling.
My opinion might differ, but the beauty is in the eye of beholder ✨
Hi Atif,
Thanks for the great overview and comparison 👍
The missing part that would be interesting to read about is how both frameworks approach CSS.
I might do this for the next series then 🤔
Nice idea, @fyodorio !