From the moment I started learning React, I completely fell in love with it.
I can create beautiful UIs just with JavaScript? Suddenly, I had the power of JavaScript inside HTML and CSS?
I absolutely loved it. Amazing.
I used the tool for years, but I couldn’t help myself from observing the Vue.js hype. Apparently, every developer that uses it loves it so much!
How’s that possible? I love React, but sometimes it makes me frustrated; why is there much less frustration in the Vue.js world?
I’ve started Vue on a commercial project a few months ago and completely moved from React.
I was a bit sad when I found out that I had moved from my beloved tool.
But those frameworks are just tools; we should never make strict career decisions based on them.
It’s the front-End world — all the tools will vanish soon; new ones will come quickly.
Now, after tons of experience in frontend development and frameworks like Vue.js, React, and Ember.js — let me explain why I find Vue.js the best.
One Really Simple App
We’re building a super simple app in both React and Vue.js today. It looks something like this:
Let’s dive into the code here. React, you come first. This is a project created with create-react-app; I slightly modified App.js here.
import { useState } from 'react';
function App() {
const [isMagicalAnswerVisible, setIsMagicalAnswerVisible] = useState(false)
return (
<div className="App">
<p className="magicalQuestion">
Which FE framework is the best?
</p>
<button className="magicalButton" onClick={() => setIsMagicalAnswerVisible(true)}>
Find out!
</button>
{isMagicalAnswerVisible && <p className="magicalAnswer">
.....what is life?
</p>}
</div>
);
}
export default App;
I know React well, so I can understand all of this. But let’s assume I’m don’t know anything about React — only something about FE development and Web in general.
With that knowledge, I want to know what will be rendered on the screen. When I look at the browser, I see only styled HTML elements there. Not JavaScript.
And here — everything is JavaScript! How do I know what will actually render on the screen?
I can see that this function App() returns some code that looks similar to HTML, but it’s not HTML. What is this?
Ok. I’ll assume that thing will render.
What is useState here? Why do need to assign its result to an array immediately?
I don’t care so much about the functionality. I want to see the same thing that I will see on the screen. Why is this strange stuff written first?
What is className? Why can’t I just use class?
onClick={() => setIsMagicalAnswerVisible(true)} why do I have to do this, can’t I just do onClick={setIsMagicalAnswerVisible(true)}? Oh, getting some errors now. I will return the arrow function even though I don’t know why.
{isMagicalAnswerVisible && <p className=”magicalAnswer”>…..what is life?</p>} What is this? What’s with the curly braces? Oh, the JS operator && is here. p will render if that’s true?
Imagine a huge component here. I want to see what I will see on the screen. But I can’t, because I have to scroll the first 100 lines of code to find the return statement.
I trust the naming of the functions. I believe they do what they say. I don’t want to look at the implementation details first.
Let me see what will render!
What Vue.js Has To Offer
This is a project created with the Vue CLI. I modified App.vue here a bit:
<template>
<p class="magical-question">
Which FE framework is the best?
</p>
<button class="magical-button" @click="findOutMoreAboutThatMagicalFramework">
Find out!
</button>
<p v-if="isMagicalAnswerVisible" class="magical-answer">
.....what is life?
</p>
</template>
<script>
export default {
name: 'App',
data() {
return {
isMagicalAnswerVisible: false
}
},
methods: {
findOutMoreAboutThatMagicalFramework() {
this.isMagicalAnswerVisible = true
}
}
}
</script>
Hmm, what can I see here? Oh, the template! I guess I will see this template on the screen.
Oh nice, class is here. Is this an HTML file?
Hmm, here is @click, as well as v-if. A bit strange at first, but actually makes a lot of sense.
And it’s so simple.
The <script> tag is here. Wait, is this really not an HTML file? Should I rename the extension from *.vue to *.html?
Nah, it’s probably fine.
What’s inside the export default here?
data(); what’s this? I’ll need to google it. Oh, it’s just the component’s state.
methods? Pretty straightforward.
I see exactly what will render first. I see something which looks like an HTML.
But it’s not. It’s an extremely powerful Vue.js app.
Vue.js Looks… So Familiar
I want to style my component. What do I need to do?
I’ll assume that it’s the same as in HTML; I’ll just add a <style> tag at the bottom of a *.vue.js file. Nah, that can’t work.
But it works!
The learning curve for React can be huge, especially if you deal with more complex stuff. Remember the times before hooks? So many Render Props, Higher-Order Components, and a bunch of other stuff.
How about this.handleClick = this.handleClick.bind(this)? I know so many React developers who don’t have a clue what’s going on behind the scenes here.
On the other side, everything is so simple with Vue.js. It feels like an updated version of HTML.
I’ve worked so much with Vue.js in the last couple of months, and the amount of frustration is minimal.
I can focus only on the real problem, not the actual implementation.
I wonder all the time — how is that possible? I grasped the core knowledge in 2 weeks, and I can build almost everything now?
It wasn’t like this with React. At times, it was really frustrating. But I still loved it just because it’s all JavaScript.
Everything in JavaScript is Amazing, But It’s Just Not True
The Web is composed out of HTML, CSS, and JavaScript.
If we want to have a deep understanding of it, we mustn’t confuse ourselves with saying that everything is JavaScript.
With Vue.js, I have a feeling that I learn much more general web-related knowledge, not just Vue-related.
With React, it was the opposite. You need to break your deep understanding of the web to adopt that mindset.
The problem is — the web will stay, and React will fade. It’s not a programming language, just a library.
Facebook will release something new; something better.
All your knowledge will vanish with React itself.
Of course, you’re learning a lot of things other than React itself — but with Vue, you’ll learn even more.
Vue works like the web. It’s a bunch of components, looking like the HTML, emitting the events like the real web.
Yes, you don’t pass a function as a prop. You catch a bubbled event that your child component emitted.
Same as in the real web.
Am I overexaggerating?
Ok, I know I am a bit.
Nevertheless, I still love React. Even though I don’t agree with the JavaScript-only web.
But I have a feeling that I can learn the fundamentals better with Vue.
I can focus on the real business problem, not the implementation.
Everything is so simple, yet so powerful.
So fun too, because there’s no frustration.
What do you think about this? I would love to hear something from you.
Top comments (89)
What I like about vue is that from the very beginning it had a focus on being "progressive". The official docs would teach you how to integrate vue in an existing site with just a script tag, and then they introduce all their tooling.
Even thought you can use React without any tooling, for simple use cases, the docs barely mention it. They quickly try to sell you
JSXand they focus on that. To me it doesn't seen like "progressive integration" is a goal for them.That's what I love about Vue so much. It sometimes seems like HTML on steroids.
HTML on steroids... That's the first time I've ever heard that and have to say that it's absolutely spot on!
I think that tagline may be more appropriate for alpine.js
Well guys slow down! Easy to talk about React as a Vue dev... I as a React Dev can say you can even use different versions of react in your project from what I know, and the react docs mention script tags I really don't know where you guys have looked.
I have loads experience with React (3+ years), that's exactly why I did this comparison.
The point is that Vue is intuitive and much more like the real Web, while React is something completely different.
React is just vanilla js and dom apis like createElement. If jsx confuses you then this is preference but when you actually look how web components look like they look just like a react component, you have your logic in a class/function and you return markup at the end.
I did say React docs mention that.
Let's move on to this.
But now try to see it from the perspective of someone who doesn't have a clue about what's going on in the javascript world (say a python or php dev). Based only on a quick look at the official docs, I say vue offers more information about incremental adoption on an existing website.
Ok but not every person is the same what you just said is correct a person new to web frameworks will find Vue docs easier to understand but we cannot speak for all people of the world, there are people out there who knowingly choose the harder path because the harder framework is exactly what they want to learn. And I know a bunch of people like this.
Actually I have seen some Vue but I don't see nothing that makes me leave React. The only advantage I see in Vue is that has some improvements on the development time since code is more simple cause of the 2 way binding, but nothing else, so I don't think I'll move from React to Vue...
Now Svelte, is another story 😏, that is a real sexy hot tool and definitely something I certainly want to try 🙂
"The only advantage I see in Vue is that has some improvements on the development time since code is more simple cause of the 2 way binding, but nothing else"
So the only advantages you see are the main factors in the the cost of building and maintaining robust applications - time and complexity.
Seems to me like two of the very best reasons...
The time improvements I'll accept them, but in large scale aplications, the two way binding is less predictive than the flux pattern implemented by React, actually that is the reason why React implements flux pattern at his core. I'm far from being a frontend expert, but I read a lot, I love to stay informed and everytime I look for recomendations in every place I got the same: Vue is faster to develop and best for small to medium apps, but for large scale aplications React is the tool to go. You may agree or disagree but this is the opinion I have seen every songle place there is a serious neutral comparison between frontend tools.
I don't see how it is any less predictable. Vuex is a first class extension to Vue and the authors state:
"This is the basic idea behind Vuex, inspired by Flux (opens new window), Redux and The Elm Architecture (opens new window). Unlike the other patterns, Vuex is also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates."
I occasionally see people stating this for large scale applications but they never seem to say why. You're right, I don't agree :-D. Both options support all sizes of applications. There's nothing in Vue that makes it suddenly unfeasibly once you get to a certain size.
And of course, If I will have in consideration to improve all the drawbacks that comes by using React then I won't choose Vue since in the end is used for the same. That Vue is simpler and require a little less boilerplate? Wtf, if I want less boilerplate, higher performance and a lot of new cool things out of the common SPA, then the right choice is Svelte, that is a great improvement in coding speed 😉
Maybe maybe. I don't have much experience with Svelte but I played a bit a while back.
It's interesting, certainly. When I did I remember it feeling to me like it's relying on a JavaScript trick - the labelled statement.
I don't think the ecosystem is anywhere near as large or mature, for example, for component frameworks.
It's definitely good for the frontend community that people like Rich Harris and Evan You come up with and build new concepts to drive things forward.
Of course it's ecosystem can't be as mature and vast like the Vue or React ecosystem since Svelte showed up in 2018, is a very new technology but still very very promising one an certainly we will see how it will get up and grow a lot next couple years
I think the biggest factor is which one you learn first - people who learn React first swear by React, people who learn Vue first swear by Vue. After learning one rather than the other you'll probably never be capable of being totally objective and unbiased anymore lol ;)
I learned Vue first. I was a Vue developer for about a year and even after I moved to a React company, I continued to use Vue on side projects. However as time has gone on I have slowly fallen out of love with Vue. Each time I came back to it after doing react every day, I found it a bit less convenient, and especially if you're trying to do complex or low level stuff, I found react easier to bend to my will.
Dont get me wrong, I still have a real soft spot for Vue and the whole team behind it, and the learning curve is way shorter than React's, but I'm definitely not biased towards my first love any more!
So in fact what you say is that React is more flexible ... which is probably the flip side of the coin of Vue being "opinionated" (i.e. "fewer ways to do something") ...
I'd be interested to know some concrete examples of what you found to be less convenient. Can you share?
I didn't mention the word convenient, I think you meant to reply to the other poster?
Sorry, yes, I was replying to the same comment as you, the ordering of the replies makes it look like I was replying to you.
This thread can be summarised into: "React is a library, Vue is a framework".
By definition, libraries are more malleable and less opinionated than frameworks.
2-way binding is just one small cool thing. It's all about it's simplcity. I quite rarely have to Google how to do something in Vue - I Google much more about pure HTML/CSS/JS.
While with React, I had to Google about it A LOT and I was sometimes frustrated because I couldn't get in working, no matter what I do.
And it's so incredible to me - how can I do everything with Vue, while keeping it so simple?
I have seen a lot of Vue since my best friend use it. And I just dont entirely like it so after seing a lot, I figure out that I won't use it. You say you google too much, well then React isn't for you, we are not always confort with a way of do things or a tool. For me write React and jsx is as natural as breath. In the end the supose to do the same but both have advantages and disadvantages compared each other, is a matter of personal taste in the end. For me React has all I need to make a nice job so I'll keep it for long 😊.
I have used both tools as a full stack engineer focused more on the backend. For me vue works better for building data driven applications with lots of business logic. I find it much easier to manage the state and logical layers in vue.
Anecdotally speaking, and excluding myself, I have noticed people writing high data/business logic types of applications in react take quite a bit longer to develop equivalent features vs people of equivalent knowledge in vue.
Interesting, some remarks - I think what makes Vue simpler than React (i.e. smaller learning curve) is that it's much more opinionated ("one way to do it") and way more "batteries included" - routing system is built in, state management is there (Vuex), and so on.
Fundamentally, Vue just "does" a lot more for you - for instance, reactivity is built in and taken care of, without you needing to worry a lot about re-renders (big topic in the React world).
I don't see nearly the same amount of discussions in the Vue world about best practices like render props, HOCs, hooks, Redux Thunk, Redux Saga, and so on and so forth, all of which can be very intimidating and very confusing for a newbie. The Vue world has less of this probably because it's way more "opinionated", and more 'batteries included'.
One caveat - the next release of Vue is apparently going to switch to React-style hooks and stateless "function components", so that's probably going to cause quite a bit of confusion initially - I don't know how that will work out for Vue's learning curve and intuitiveness.
"render props, HOCs, hooks, Redux Thunk, Redux Saga" - exactly this!
TBH, even though I used render pros and HOCs for such a long time, I still don't understand them completely.
I know how they work. I create them and use them. But still, there are things about them so counterintuitive that can't grasp them completely.
The problem is, at some point you "get it" and you understand how it works, but you only retain that knowledge if you keep using it ... if you don't use it for some time, then it fades away (I compare it to learning calculus and differential equations during math lessons, it's not hugely difficult per se and it's possible to learn it but don't ask me to do it 4 or 5 months later, sad to say it's all gone).
It's arcane knowledge and it doesn't come naturally. And note that most of this has gone away after hooks were added to React, so none of this HOC and props stuff and whatever was really that fundamental after all, it's just a bag of tricks (with trade-offs) to technically accomplish something.
This is what I've always seen as the biggest drawback of React, none of this stuff lets me focus on solving "business problems", while Vue lets me do just that.
Exactly! With Vue, I focus just on the business problem.
With React, I first need to think about possible solutions and pick something from 3 different options.
In Vue, there’s usually just one option - and it’s the simplest one for sure.
Agree with that, React is more complex and less newbie friendly, but once you got into it (at least gor people like me who enjoy challenges) is pretty fascinating world and don't find a need to look outside, instead I try to get better on it and understand everything. I know not everybody thinks the same way and maybe some people is just overwhelmed by the complexity of React and fell a great relieve when they find a much simpler tool that in the end allows to do nearly the same. But is not my way so 🙂...
I totally agree it's always simpler to work with Vue, especially because it adopt the concept of SFC. So there is no need to mix Javascript with HTML and CSS.
Even for state management, I think Vuex is easier to manipulate than Redux.
Of course!
Yeah, I agree that learning Vue is simpler than learning React, at least it was for me.
The opinion might be biased, though, as most will first learn React and then Vue, and those tools are very similar in what they do. I mean the whole ecosystem, not just the core React/Vue, I mean Vuex/Redux, router, templates/jsx, bundling, tooling and all that. So for those who have already learned React and all, Vue might come as pretty simple, since they already know most of the concepts.
I wonder if there's anyone who learned Vue first, then took React on.
I'm about to start my journey into frameworks so I'll take this on. I was going to start with React because it gives the base knowledge that I need to go into ReactNative ( a soft intro into the mobile dev world ) but the discussion here is fascinating so I'll start with Vue to settle the debate😅
Well if you want to learn ReactNative, definitely pick React over Vue!
It’s gonna be much easier since they have a lot of similarity 🙂
I can speak for this crowd! I learnt Vue in the summer of 2019, and loved it pretty much immediatly. I spent the summer internship learning it, both broad strokes and details, and it was a lot of fun, and very efficient.
The following semester (in school) we had "Web development" as a subject in school, and we learn (JQuery and) React.
Whenever I was faced with a new challenge in React, it just felt as if everything was hard to do.
Example: We built an infinitely scrolling application, and in order to make the content load on the correct event (and not somehow get stuck one event behind), we had to use both
useStateanduseRef-hooks, and I still don't know what the latter of those does.In vue, however, you just add a listener, and then remove it. No need for extra concepts. Love it.
I agree, I would love to hear opinions from somebody who switched from Vue to React (without prior knowledge about React)
ah yes I realized this a few weeks ago. I'm learning React right now for... reasons and 1) I don't see the why of the hype, when I tested Vue I personally liked it way more and 2) on a day I slept badly, had no coffee on me and it was 8am, the React course did a syntax comparison between Vue, React, Angular and Ember.js... guess which one I ended up gravitating to?
That's right, Vue was the only syntax I could look at that I immediately knew what was going on with my only two awake neurons. That is +100 for me because I tend to truly TRULY wake up at 11am (my awake neurons are the ones talking right now it's 8:30am right now).
So yeah, this is a fair comparison. My awake neurons approve.
Your neurons can’t be wrong 😉
I tried both React and Vue and i would choose React over Vue any time of day.
Vue's magical state management is precisely the thing that will bite you in the a** eventually. It works most of the time, but not all. Why isnt it working? Who knows.
Also there are the vue specific attributes you need to learn or resort to React like logic like JSX to do complex stuff.
Not to mention that Vue 3 is really really trying hard to be React so why just not use React?
PS: I don't get how JSX is considered confusing for people who've used HTML, it looks exactly like HTML. You can even use class instead of className and it will work, React will just complain about it.
Probably my comment will sound useless, but everytime this discussion about React and Vue came up, I feel that I have to comment this hahahaha, BUT, The feeling I have coding in Vue that is elegant and fluid, also the tooling are so organized and polished that i have pleasure doing that, in other hand, when i coding React i feel the simplicity of the hooks, but i don't feel like i'm getting all the power from web javascript, in the end is like I'm doing functions who was recalled everytime that component change. TBH I think React is good, but could use more of the web api, and decide at once where it will run, on frontend or backend, this kind of approach could change the mindset of the tool
Elegant and fluid, exactly that! ⚡️
another thing there i forget to mention, vue-cli NEVER give me problems with node-sass because i have the choise to use dart-sass out of the box
How about looking at this from the employer perspective. What if my developer decides to quit, or get hit by the proverbial bus. If they were a React dev I need to find a new dev who has some experience in React to replace them. If they were Vue dev, all I got to do is find a dev who knows JS and within 2-3 weeks of intense training he's good with Vue. No chance of that happening with React. And at the end of the day the customer doesn't give a rat's ass about what technology or tools you use, as long as the job is done right and in a timely fashion.
Absolutely true. I had 3+ years of Frontend experience when I started my first Vue.js job. I literally knew NOTHING about Vue!
However, I managed to ship features immediately. I was wondering how is this possible, am I missing something? How can it be so simple and intuitive?
Good to see opinions being expressed by devs who know both sides of the equation. I'm pretty old school (actually just old) and my first gig was writing Pascal for CTOS. I helped build one of the first internet banking sites in NZ using ASP Classic. Quirksmode was the goto for dealing with IE and Netscape issues, and javascript sucked but it was better than vbscript. The thing that drives me crazy about javascript development now is that maintenance is such a massive issue. Build something now, leave it alone for 12 months, and now all the dependencies have breaking changes. I like Vue because there's less magic than React but the tooling required to develop javascript PWA's is nuts.
Wow, you’re on the field for so long, it must feel amazing to see all this progress 🙂
I’m also against magic code so Vue gets a bit plus here
Have you built something with Vuex? It's a flux-like state management library that makes sharing state/data across your app pretty simple.
Yes, I use Vuex on our commercial project right now. I like it a lot, so simple to use.
I prefer to use vue-query or just Vue Observable. Now, you even could only use the new type "reactive" on Vue 3.
Thanks for referencing these! I work with rxjs on a daily basis. I just started learning Vue in my free time and wasn't aware of this.
For me nothing come close to Recoil.js in react
Having done both commercially, I tend to much prefer Vue, especially Vue 3. I like its reactivity model a lot better. Nearly everything works out simpler / faster than doing it in react. Not to mention you can still do jsx/tsx if you want to in Vue ( or even use pure js/ts ). Template syntax has an advantage in that various optimizations for updates can be done because the DOM can only be changed through specific mechanisms. Any js/ts only rendering can't be generally optimized as it could do anything.
I agree with EVERYTHING you said! Vue 💚
From the example given Vue seems like a great framework to integrate into already existing static project, however there is not enough reference provided on how it would work on a largere scale.
Also what are the current benefits of Vue over React besides being "progressive"?
I have not used much besides React, so I'm looking to broaden my Vue.
For me, the biggest benefit is the simplicity of use. Plus, it more intuitive and similar to the real Web.
In the terms of functionality, everything you can do with React can be done with Vue as well.
It's not any more or less scaleable than React. They both got reactivity, a way to define components, state management libraries, now hooks and the hooks-like composition API.
I think the other benefits over React are that Vue does a bit more for you out of the box and seems like it requires less time for new people to pick it up.
One thing I've also found is that Vue is more performant out of the box. React tends to render the whole children subtree when a parent updates, unless you specifically opt out of rendering, whereas Vue is by default only rerendering the parts that changed in the component tree. But it's been a while since I used React in production so maybe things changed on that side.
If this was a big deal, then SolidJS is even better than Vue, because there's no virtual nothing and React would stop being #1.
Yes, React is harder to learn than Vue, but it also has much more benefits than just saying "everything is JS."
An unusually uninteresting ranting post.
That’s the great thing about Frontend - we have so many different tools to pick 🙂
I think that you being an exception, most of the people who have stumbled on to React first and have used it for a period and then used Vue will prefer React more even though yeah Vue is more like the "real web". But the real web is also fading, very few actually make websites with html CSS and js, frameworks and jamstack is used more. And yes React needs more time to set in, but it's worth it. I think it's just preference, wouldn't say one is more better than the other.
This article is just my subjective opinion; there’s no clear winner here!
However, HTML, CSS, and JS are still the core of the Web. If we want to understand everything deeply, we can’t ignore them.