DEV Community

loading...
Cover image for Vue.js vs. React — Not Your Usual Comparison

Vue.js vs. React — Not Your Usual Comparison

Domagoj Vidovic
London-based Frontend Engineer. Let's make our Frontend lives more magical ✨ JS/CSS/HTML enthusiast
・5 min read

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:

our-really-complex-app

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (88)

Collapse
vonheikemen profile image
Heiker

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 JSX and they focus on that. To me it doesn't seen like "progressive integration" is a goal for them.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

That's what I love about Vue so much. It sometimes seems like HTML on steroids.

Collapse
martim0t0 profile image
Marcin Jaszczuk

HTML on steroids... That's the first time I've ever heard that and have to say that it's absolutely spot on!

Collapse
dasdaniel profile image
Daniel P

I think that tagline may be more appropriate for alpine.js

Collapse
ivanjeremic profile image
Ivan Jeremic

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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.

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited

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.

Collapse
vonheikemen profile image
Heiker

I did say React docs mention that.

Even thought you can use React without any tooling, for simple use cases, the docs barely mention it.

Let's move on to this.

Easy to talk about React as a Vue dev... I as a React Dev

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.

Thread Thread
ivanjeremic profile image
Ivan Jeremic • Edited

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.

Collapse
khorne07 profile image
Khorne07

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 🙂

Collapse
rcoundon profile image
Ross Coundon

"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...

Collapse
khorne07 profile image
Khorne07

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.

Thread Thread
rcoundon profile image
Ross Coundon

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.

Collapse
khorne07 profile image
Khorne07

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 😉

Thread Thread
rcoundon profile image
Ross Coundon

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.

Thread Thread
khorne07 profile image
Khorne07

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

Collapse
leob profile image
leob

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 ;)

Collapse
jackmellis profile image
Jack

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!

Thread Thread
leob profile image
leob

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") ...

Thread Thread
rcoundon profile image
Ross Coundon

I'd be interested to know some concrete examples of what you found to be less convenient. Can you share?

Thread Thread
leob profile image
leob

I didn't mention the word convenient, I think you meant to reply to the other poster?

Thread Thread
rcoundon profile image
Ross Coundon

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.

Thread Thread
riccardop87 profile image
Riccardo Polacci

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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?

Collapse
khorne07 profile image
Khorne07 • Edited

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 😊.

Collapse
buphmin profile image
buphmin

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.

Collapse
leob profile image
leob • Edited

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

"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.

Collapse
leob profile image
leob • Edited

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.

Thread Thread
domagojvidovic profile image
Domagoj Vidovic Author

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.

Collapse
khorne07 profile image
Khorne07

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 🙂...

Collapse
chamsedinebouhouch profile image
BOUHOUCH chamseddine

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.

Collapse
iamabdulazeez profile image
I-am-abdulazeez

Of course!

Collapse
panditapan profile image
Pandita

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author • Edited

Your neurons can’t be wrong 😉

Collapse
dakujem profile image
Andrej Rypo

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.

Collapse
sebastianvitterso profile image
Sebastian Vittersø

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 useState and useRef-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.

Collapse
thabisomagwaza profile image
ThabisoMagwaza

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😅

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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 🙂

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

I agree, I would love to hear opinions from somebody who switched from Vue to React (without prior knowledge about React)

Collapse
aliakakis profile image
Antonios Liakakis • Edited

No you do not exaggerate. W3C and WHATWG are the main bodies governing the web as we know it, but unfortunately hype and good marketing has transformed web development in a need to know library job. It happened with jQuery as well, and I categorize React as such.

I have not taken part in ANY two of the same React projects. Moreover, as a React app grows larger and larger two things start to happen. Unreadable code and low performance. However, the biggest issue is the hype driven engineers supporting React with such fervor which seriously surprises me. I write about people which are probably NOT active maintainers of React, not having a React based npm package and in general not actively profiting by it.

Is Facebook trying to resolve some issues. SURE, hooks was a nice addition although it didn't help much and imho are the same as Crockford objects, React 18 will have concurrent mode helping with perf and memory leaks. But since React lacks some kind of structure or architecture like Vue, Angular or Svelte it still will create monsters of projects with countless dependencies. Because you just CAN'T use React by itself. You have to use a bunch of 3rd party supported(?) libraries. To be honest they did release RecoilJS as a facebook supported state management.

However, the truth is that if you are actively looking for a job React dominates the scene making it a must have in your CV. However, take in mind that most React based gigs require you to refactor and support mostly spaghetti-fied code, most PROBABLY. That is my experience until now. Moreover, since no two React projects are alike, you will need an on boarding period. Also, hope that the lead front-end is not a "resume driven engineer I read some blokes blog and take it literally" person, otherwise you are in deep trouble.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Let’s just hope that more and more companies will adopt Vue! TBH, it would be really hard for me to switch to React now.

Collapse
gab profile image
Gabriel Magalhães dos Santos

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

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Elegant and fluid, exactly that! ⚡️

Collapse
gab profile image
Gabriel Magalhães dos Santos

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

Collapse
daveclarke profile image
daveclarke

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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

Collapse
juniordevforlife profile image
Jason F

Have you built something with Vuex? It's a flux-like state management library that makes sharing state/data across your app pretty simple.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Yes, I use Vuex on our commercial project right now. I like it a lot, so simple to use.

Collapse
andressaa profile image
Andres Saa

I prefer to use vue-query or just Vue Observable. Now, you even could only use the new type "reactive" on Vue 3.

Collapse
juniordevforlife profile image
Jason F

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.

Collapse
ivanjeremic profile image
Ivan Jeremic

For me nothing come close to Recoil.js in react

Collapse
psuplat profile image
Piotr Suplat

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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?

Collapse
keithn profile image
Keith Nicholas

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

I agree with EVERYTHING you said! Vue 💚

Collapse
merthod profile image
Merthod

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

That’s the great thing about Frontend - we have so many different tools to pick 🙂

Collapse
frankanger profile image
Constantine

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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.

Collapse
andi23rosca profile image
Andi Rosca

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.

Collapse
npongracic profile image
Nebojša Pongračić

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.

Collapse
rjitsu profile image
Rishav Jadon

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.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

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.

Collapse
ivanjeremic profile image
Ivan Jeremic

I stay with react/nextjs + recoil for me nothing come even close to this stack. I have tried Vue but it is to much logic in strings and also component registration is time consuming, in react I just use my component.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

I was afraid of this logic in strings too, but with VS Code tools those strings seem like the JS variables. Autocomplete works amazing.

Collapse
bonatoc profile image
Christian Bonato

AngularJS was a smart concept from the very start, it was just not so performant and too proprietary.

Quasar Framework shows the true potential of Vue. Not affliated, I am using it for a serious PWA, and it's just mind-blowing how fast you can develop and iterate.

Collapse
zzoukk profile image
zZouKk

Svelte wins my heart!
I learnt React for work purpose. But I hope I won't have to learn Vue at all and skip to use Svelte instead.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Have to try Svelte, so much hype about it! But now right now, I'm in love with Vue, it would feel like cheating

Collapse
zzoukk profile image
zZouKk

Then I'd call that puppy love... until you meet Svelte lady

Collapse
aliakakis profile image
Antonios Liakakis

Indeed Svelte is very close to Vue and is crazy fast. React apps as they get larger become clunky.

Collapse
lotfi profile image
Lotfi

Interesting. I have experimented with React and Angular, but not yet Vue.JS. What do you think about angular?

Collapse
andi23rosca profile image
Andi Rosca • Edited

Not the guy you asked but Angular to me is like Vue with extra ceremony and steps around doing anything.

Kinda like how OOP languages like C# and Java force you to add extra boilerplate and ceremony around some things that you could do in one line of JS.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Unfortunately I’ve never used Angular in production so it’s hard for me to say anything 🤐

Collapse
_udemezue profile image
udemezue John

I agree, Vue us better

Collapse
aaiing profile image
AAI INGENIERIA • Edited

I used Vue and it gave me several problems with its libraries, I am with react and it proves to be a powerful tool that can last for many more years

Collapse
jfmacdonald profile image
John Farrell MacDonald

Knowing, or at least familiarity, with React can make you a better Vue developer. I lead a small team developing e-learning web apps using Vue—and JavaScript is not their strong point. Vue was the clear choice precisely for the points that Domagoj raised. However, in developing base components, I find using render functions with JSX more efficient and powerful and cleaner than templates. Also, the composition API makes for more reusability. Using JSX, Vue looks a lot like React. The advantage of Vue is that high-level components can use HTML templates while core functionality is in JavaScript. That’s a win for everyone.

We’ve moved to Vue 3 for recent projects, and I have to say that, while worthwhile, it's been a bumpy road. The ecosystem isn't quite there yet, and getting everything in the package.json to play nice has been a challenge.

For a personal project, I considered using Next.js rather than Nuxt.js and was blown away by how smoothly everything worked with Next. Maybe that’s a red herring, but it does seem the React ecosystem is larger and more flushed out than the Vue ecosystem—particularly now that Vue is transitioning to Vue 3. In comparing Vue to React, the ecosystem too should be considered. I want to focus on my app, not the tools!

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

TBH I haven’t tried using JSX in Vue yet, but I’m definitely gonna do that.

About Vue 3 - still keeping it 😉

Collapse
bruechler profile image
Dominik Brüchler

Totally agree with you. I began my JS frontend journey with Vue before I learned React. I still prefer Vue over React for the same reasons you mentioned here.

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Let's just hope that even more companies will adopt it!

Collapse
cosmicskull profile image
Cosmic

You are over exaggerated! React is there and it's here to stay don't lie! Don't Diss on react I like it!

Collapse
snickdx profile image
Nicholas Mendez

I think this is actually a pretty fair comparison. Vue embraces vanilla web a bit more.

Collapse
gchandran profile image
Hemachandran G

Any svelte.js followers here?

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Many of them - still haven’t tried it properly so I can’t say anything about me!

Collapse
tonylopesdraper profile image
Tony Lopes

I feel the same.

Collapse
oniichan profile image
yoquiale

React looks more like a mess compared to Vue, it doesn't even has directives.

Collapse
jefferson682 profile image
J. Jefferson N. do Vale

congratulations for article! really cool!

Collapse
domagojvidovic profile image
Domagoj Vidovic Author

Glad you like it! Much more coming in the future 🙂