There exists a lot of great web development frameworks out there. I believe that every framework can be used to create the website you want. What you should choose only comes down to individual preference. Remember, there also is a possibility to use no framework as well.
Myself, I usually choose Vue. Here are my top reasons to choose Vue over the most used framework library React.
(Just to have it said, I have reasons to choose React over Vue as well, but I don't value them as much as the points below)
Without using a building tool
With both Vue and React you don't necessarily need a building step to create your website. It can be done with just vanilla JavaScript, HTML and CSS. Let's create a button that count's the number of times it has been clicked.
React
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="app"></div>
<script>
function Button() {
const [counter, setCounter] = React.useState(0);
return React.createElement(
'button',
{ onClick: () => setCounter(counter + 1) },
counter
);
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(Button), domContainer);
</script>
</body>
</html>
Vue
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="counter++">{{counter}}</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
}
});
</script>
</body>
</html>
| Size | Characters of Code | Drawbacks | |
|---|---|---|---|
| React | 40.7 KB | 740 |
|
| Vue | 32.6 KB | 389 |
|
I prefer Vue in this scenario because it is pretty easy to add reactivity to a website and the code is pretty much the same as "ordinary" Vue in a project with a build step.
CLI
React has the Create React App to set up your project. But when you want to add features, such as router, Sass, linter and more, you have to do it manually afterward.
Vue provides you with a CLI where you can pick what features you like when you are creating a project. Which makes the process of creating a project smooth and easy.
Template
A big difference between the frameworks is how the HTML is created. React uses JSX to allow you to combine JavaScript and HTML in the same render function. For me, this feels like it can quickly turn into spaghetti code.
In Vue you write your HTML in a template tag, allowing you to write normal HTML with directives to add functionality. (JSX is also an option in Vue, but not very used.) Look at my next reasons to see examples of the difference.
Bind Input Values
React
import React from 'react';
function InputBind() {
const [text, setText] = React.useState('');
return (
<>
<input type="text" onChange={e => setText(e.target.value)} />
<p>{text}</p>
</>
);
}
export default InputBind;
Vue
<template>
<div>
<input type="text" v-model="text">
<p>{{text}}</p>
</div>
</template>
<script>
export default {
data(){
return{
text: ''
}
}
}
</script>
Conditionally Render
React
Option 1: Ternary operation. Which isn't always as readable.
import React from 'react';
function CondinionallyRender() {
const [show, setShow] = React.useState(true);
return (
<>
<input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
{show
?
<p>👋👋👋👋👋</p>
:
<p>💨</p>
}
</>
);
}
export default CondinionallyRender;
Option 2: Logical Short Circuit Evaluation. Feels a little like magic and you need to know how logical expressions are being evaluated.
import React from 'react';
function CondinionallyRender() {
const [show, setShow] = React.useState(true);
return (
<>
<input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
{show && <p>👋👋👋👋👋</p>}
{show || <p>💨</p>}
</>
);
}
export default CondinionallyRender;
Option 3: if-else function. Best for understandability, but HTML code needs to be moved away from the rest of the HTML.
import React from 'react';
function CondinionallyRender() {
const [show, setShow] = React.useState(true);
const renderIt = () => {
if (show) {
return <p>👋👋👋👋👋</p>
} else {
return <p>💨</p>
}
}
return (
<>
<input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
{renderIt()}
</>
);
}
export default CondinionallyRender;
Vue
<template>
<div>
<input type="checkbox" v-model="show">
<p v-if="show">👋👋👋👋👋</p>
<p v-else>💨</p>
</div>
</template>
<script>
export default {
data(){
return{
show: true
}
}
}
</script>
List an Array
React
import React from 'react';
function List() {
const todos = ['Eat', 'Move', 'Code', '😴😴😴'];
return (
<ul>
{
todos.map(todo =>
<li key={todo}>{todo}</li>
)
}
</ul>
);
}
export default List;
Vue
<template>
<ul>
<li v-for="todo in todos" :key="todo">{{todo}}</li>
</ul>
</template>
<script>
export default {
data(){
return{
todos: ['Eat', 'Move', 'Code', '😴😴😴']
}
}
}
</script>
className vs class
React
<div className="center-box"></div>
Vue
<div class="center-box"></div>
I don't like to be pushed away from normal HTML.
Alter state directly
React
//declare state
const [human, setHuman] = React.useState({ name: 'Gaute', age: 28, favouriteDinner: 'Pizza'});
const [counter, setCounter] = React.useState(0);
//update state
setHuman({ ...human, favouriteDinner: 'Candy' });
setCounter(counter + 1)
Vue
//declare state
data(){
return{
human: { name: 'Gaute', age: 28, favouriteDinner: 'Pizza'},
counter: 0
}
}
//update state
this.human.favouriteDinner = 'Candy';
this.counter++;
This is a clear win for Vue, as I don't like the idea that I need to rewrite my whole object or value by using the previous state.
Examples above project stats
| Production Build Size | Project Size | Characters of Code | |
|---|---|---|---|
| React | 460 KB | 146 MB | 2345 |
| Vue | 443 KB | 67.2 MB | 1797 |
Conclusion
For me, Vue had a much quicker learning curve, as it took me some time to understand React, while Vue I got from the first second (maybe because of the similarity to AngularJS directives). It feels closer to ordinary HTML and JavaScript. I don't need to use JSX, where I often feel like the JavaScript clutters the HTML code. Vue also has single file components, where all component code (HTML, JavaScript, and CSS) are in the same file if wanted. Vue has scoped CSS for components, which also is super nice!
Example code can be found at GitHub.
This is just my friendly opinions. If you like something else, that's okay :)
Top comments (16)
Looking at these code, I'd much rather use Vue over React.
I've been seeing React codes a lot recently, read some basic tutorials, then read some more complicated codes, and I've come to the conclusion that React is a huge mess and makes absolutely no sense. There is no logic in the code. When I see those codes, they make me want to learn React less, everytime.
However, I haven't seen any Vue code yet, but seeing these examples, I already understand how they work, it's clear and logical. It easily makes sense.
I might take a look into Vue, and start learning it.
Little update:
After reading your article @gautemeekolsen , I've actually started reading about VueJS, and actually watched a 90 min long tutorial for the first time ever, to see how it works.
After that I had started reading more and more posts about it here, on DEV, mainly beginners' guides.
After that, I had gone to the documentations, since in one article I've seen that they explain everything very well there, and it was true.
So after reading about it for days, I've decided to start doing it by myself. It's been 3 days since I had started coding in Vue and I'm loving it a lot! It is truly amazing and simple, easy to understand.
I'm doing pretty good I think, I'm already familiar with basics such as components, data, computed and basic methods, watchers,props, passing data around/between components and working with them, conditional rendering etc. I'm also using BootstrapVue, since I've been using Bootstrap for years, and I'm very much used to it already.
I'm exploring new features every day, and trying to expand my knowledge in it as much as I can.
So again, thank you for this article!
Update 2: also, today I learned the basic usage of Vue Router. It wasn't easy to figure out how exactly it works, had to read a lot and watch some videos about it, but it was worth it :D
This is so cool to hear! Thank you for the update :)
I agree. I love react and I think it IS simple to use, but it gets too messy once you have to build larger apps, which is probably why they had to create Redux for state management. Vue has that nice HTML attributes feature that Angular has but without being a massive MVC framework that Angular is. Vue simply scales very well: you can use it in static websites by just importing it via tag (like jQuery) or you can create entire web apps if you include Vue Router, Vuex, Vue Apollo, and/or Vee Validate, not to mention Vuetify which has awesome Material UI components. </p>
React(Library) size < VueJs size (framework). C is better than C++ in performance , but 90% of desktop apps built on top C++ !! don't compare languages or frameworks. Life of productivity...
+1
VueJS is easy to learn from day 1. That was my feeling more than a year ago. Thank you for comparing those basic features in the 2 frameworks. 👍
I agree on pretty much everything.
I also found Vue easier to pick up (although I had nearly no real exposure to Angular/Ember) than React (which I started learning first).
On the plus side, Vue3 seems to make things more understandable and maintainable.
soooo... i guess you haven't played with svelte yet 😋😉
Svelte is good until you try to use typescript
oh yeah true.
fortunately im a non-believer of typescript 😊🙏
Well, most people who use svelte seem to be like that, but in todays ecosystem you cant make a library be truly succesful without good typescript support
yes for sure. typescript is a must for developing libraries.
The only turnoff of this godly sent compiler to me.
This is also why i choose Vue over React whenever i can. It insane how easy it is to use and I feel so productive.
I am tho' often forced to use React, fx. when I have to use components from Microsoft in Azure DevOps or Office extensions.
I feel like as a developer you need a lot more JS/ES6 experience/knowledge when developing React solutions, than Vue. That's maybe just my experience, but that how i feel.
You can use preact/react directly in browser without transpilation step, and without jsx using template literals. Vue and angular templates are not HTML anymore and should be learnt. Imo another extension should be used instead of HTML for Vue files. VHtml maybe. Preact, React, lit-html are just JavaScript object/functions rendering HTML. Matter of taste.
Love this! Vue all the way!