4 ms·

For someone with little experience with the modern front-end development, what are the reasons to choose Vue over React or vice-versa? Are they both just differ

For someone with little experience with the modern front-end development, what are the reasons to choose Vue over React or vice-versa? Are they both just different flavors of the same patterns or is there a philosophical difference in the two?

alharith 7y ago
I've worked extensively in both. In my opinion: Vue embraces web technologies. JS is to enhance your HTML. React is a javascript-first, FP-first mentality. Minor point: vue benchmarks slightly faster these days. The react runtime has gotten pretty thick.
eberkund 7y ago
Superficially the first thing that most developers I've spoken to notice is JSX vs HTML-based templating. But both frameworks are very similar. I started with Vue and when I took a job which used React I found that I already knew how things worked. Beyond that, I would say the biggest difference between the two is that Vue is the scope of the framework. Vue includes much more in the framework itself and as first-party helper libraries whereas React relies heavily on third-party packages of which there often many competing options and which one is used varies from company to company and project to project.
lobo_tuerto 7y ago
I think it's just easier to ramp up in Vue.js than in React. The Single File Component approach is easy to grasp for beginners since it just looks like an HTML file with three main tags: template, script, style. You might find useful information here: https://phabricator.wikimedia.org/T241180 https://phabricator.wikimedia.org/T241180 (The Wikimedia Foundation describes why they went with Vue.js instead of React or other competing libraries)
- jdxcode 7y ago
  IMO it's a huge difference in learning curve too. In Vue I was up and running in a day or two but React took me weeks to really feel like I knew what I was doing—and I learned React after I learned Vue. Single File Component tells you where you need to put things. You don't need to figure it out yourself and build up your own organization and patterns on top of Vue. You just start building the application. It's not a completely apt comparison: but Vue shares more in common with Rails than with Node development—at least in terms of grokking. My understanding is their performance is virtually the same. Some applications perform better on one vs the other.
dolphenstein 7y ago
I like that I can embed a bit of vue code into an existing web page. Bit like old school javascript. AngularJS 1.x was like that too and the inspiration for Vue. React/Angular require a whole build process with NPM/webpack etc etc to create a SPA.
superasn 7y ago
For me Vue biggest advantage is it's simplicity. I haven't learned much about Vue 3 yet but Vue 2 can still run the good old jQuery way and all you need is a script tag (no weback, etc). Also I find the syntax super easy and minimal. A valid vue component can be as simple as {template: <div>{{1+1}</div>'} Ofcourse you can extend it all you want and it even comes with its own cli but the fact they've managed to keep things so simple is what I love most about it.
- tlrobinson 7y ago
  For the record, an equivalent React component is equally simple: export default () => <div>{1+1}</div>
  - RobertRoberts 7y ago
    Now try and run that in a browser. This is neither valid JS or HTML.
    - JMTQp8lwXL 7y ago
      > export default () => <div>{1+1}</div> is export default function () { return React.createElement('div', null, 1 + 1) }; If your concern is for beginners, I can appreciate that. But for anybody developing an enterprise grade application, using a transpiler isn't an appreciable barrier to entry. For beginners, there's create-react-app, vue cli, and angular cli. So you can get started immediately, without even knowing what a transpiler is.
      - RobertRoberts 7y ago
        While I risk starting a pointless argument my readings about React have been that it's only javascript functions. But in reality it's a DSL. I have never read anyone bragging about DSLs in javascript. So react's marketing seems dodgy. Also is Babel a transpiler or compiler for JSX? And is React useful without JSX?
ng12 7y ago
They're pretty similar. I prefer React because the JavaScript-first approach is much better for large applications. It leads to a smaller API while simultaneously giving you more control over how things work. Also Vue has a lot more magic to it which you might care about on a large project. The use case I recommend Vue for is when you just want a quick drop-in solution. For any serious development I stick with React.
- bt3 7y ago
  For any serious development I stick with React. Isn't this a bit disingenuous given Vue's usage in true, scalable production capacities? I'm not the expert but companies like Netflix, Adobe, and GitLab have Vue deployed at scale. Since when was "quick" synonymous with "not sufficient for serious development"?
  - ng12 7y ago
    To my understanding the biggest reason GitLab chose Vue was because they were able to easily mix it in with their existing stack. That's part of what I was referring to by "drop-in". You can do the same with React but it's more heavyweight unless you plan on porting the lion's share of your app to React. As for the others I'm not sure what they're using Vue for specifically and can't really speak to the technical reasoning behind it. I'm not saying that you can't do serious development in Vue but rather that all else equal I will guide teams to adopt React, mostly for the better developer ergonomics.
    - manigandham 7y ago
      There's nothing trivial about being "drop-in". Usually these are complex apps running on traditional web frameworks and/or use server-side rendered pages where Vue excels in adding front-end interactivity because it uses HTML templates by default (with that HTML coming from the server).
deleted 7y ago
[deleted]
stickfigure 7y ago
Very very roughly: Vue tries to keep code and HTML separate. React says "everything is code". Having spent years in the old "MVC html template framework" world, I used to be in the former camp. But nowadays I find JSX/TSX incredibly convenient. It's nice that a component is represented by a single javascript(ish) language.
- JMTQp8lwXL 7y ago
  I agree on the templating as code, in terms of ease of us. (Already know JS? Learn nothing. With maybe the exception that "class" is now "className". `<Foo bar="1">` is a construct for `React.createElement(Foo, {bar: "1"}, null)`. It's wonderful.) I would imagine Vue is a much lighter, far less opinionated version of Angular. I've never been able to understand why templating is superior. And I want a strong argument that makes me seriously appreciate it, even if I don't change my mind. I've yet to see it. One gripe, at least with Angular templating, is templating constructs that are defined globally feel like leaky abstractions. Angular Pipes, for example. When I see a pipe, it's hard to find where's it's defined, where as React components are imported at the top of the file. Because I already know the language, it's easy to conceptually build on top of that, which is why JSX is simple. But templating essentially defines a whole new language on top of it. It's not an insurmountable barrier, but it increases friction. Maybe there's different brained folks where either "everything as code" vs. "HTML templating" is simpler.
  - keithnz 7y ago
    well, one reason why templating is good and one of the things we are expecting in Vue3 is fine grained optimization of updates. Because the templates are essentially a well known interface for change, you can optimize UI patching. However, you can still use JSX and TSX with Vue if you want. Or mix them.
beart 7y ago
When anyone I talk to asks me about developing modern web pages, I point them to Vue, and they have all come back with praise for it. I can't imagine doing that with React or Angular (I'm in the middle of a pile of Angular wishing I was somewhere else). The learning curve and simplicity, to me, is the number one killer feature of Vue.
ggregoire 7y ago
Vue is kinda the unofficial successor of Backbone.js, Angular 1 and friends. You write templates mixing HTML and Vue syntax that you bind to DOM elements. You can pass data and event handlers to your templates. You separate your markup, your CSS and your JavaScript like you have always been doing. It just works. Pretty easy and quick to get started, even without a big programming background. Meanwhile, React lets you write your UI with JavaScript functions, which is completely different from anything I've seen before. You develop a bunch of functions and reuse them everywhere. Since functions are first-class citizens in JavaScript (i.e. you can pass a function as argument to a function and a function can return another function), there are pretty cool patterns in React. Like functions that enhance or inject styles or logic into your components (which are just functions too). This offers a lot of composability and reusability options to design and code your applications. (personal tip: Add TypeScript and VSCode on top of it to make your productivity skyrocket)
earthboundkid 7y ago
React is more popular, which is a gift and a curse. It leads to a lot of amateur coding, which is quite bad, but if you just want to glue something together, you can find the parts. Vue itself is both smaller and more full featured than React. To make a working React you need to add a lot of parts (React DOM, CRA, Redux, React Router, CSS in JS…) which are often only semi-official, whereas Vue has solutions either built in or officially supported. I honestly wouldn’t recommend React per se to anyone who has a choice, but it’s good to be familiar with it to get a sense of how the trends are moving, and they often have ideas that inspire (built in or officially supported) parts of Vue.
cageface 7y ago
For larger applications using JSX together with Typescript means you get type checking in model code and view code. For that reason alone I'd go with React for bigger apps.
bgnm2000 7y ago
React can make people better javascript developers.
wolfspider 7y ago
For my uses Vue is actually much more friendly towards non-standard environments but that’s never been a selling point it’s just a bonus. I heavily use TS, Components, and VueX so Vue 3 here looks pretty good to me. I’ve seen more devs in my shop take a liking to react due to it being slightly more mainstream. Vue doesn’t offer an OOTB solution to everything as much as react does but the other side of the coin there is that it’s more adaptable to uncharted territory. I think for devs out there that just desire a few things and they’re ready to start coding Vue is the perfect framework.
neya 7y ago
They're pretty similar, but Vue enforces structure and good patterns early on in the development cycle. React gives you more freedom. I've been a consultant using both for over 3 years now, full time and I can tell you I just use Vue these days. Everything is more readable, well-organized when the project is finished. You could do the same with React too, but it puts the mental burden on you. I think performance-wise as well Vue is faster (it used to be). Not that it matters a lot. But, if you are a company, it's easier to find React developers than Vue developers. Also, in big company environments, teams using React always end up in messy code that's not maintainable because of the freedom the framework gives as opposed to teams using VueJS. So you need to pick the one that fits your use-case.
- kilburn 7y ago
  > Also, in big company environments, teams using React always end up in messy code that's not maintainable because of the freedom the framework gives as opposed to teams using VueJS. This is debatable... > But, if you are a company, it's easier to find React developers than Vue developers. ... and this is probably one of the reasons why you've found more "messy" projects in React than in Vue. In other words: people who know what they like (and hence probably do a good job with it) pick either Vue or React. Teams that don't know pick React because it is more widespread, easier to hire for, etc.
- ng12 7y ago
  > Vue enforces structure and good patterns early on in the development cycle Could you expand on this? They're both tools for building components, how does Vue enforce more structure? FWIW I usually expect the same high-level structure for applications with both frameworks.
zamalek 7y ago
They achieve similar goals, it's all about how they go about that. React is pretty opinionated; it wants you to do things a certain way. There's a very good reason for that way too: Facebook arrived at that opinion after solving some serious real-world problems. Vue seems to steer around any strong opinions. It feels like something that the W3C would have come up with, it feels like it belongs in a browser. You can use mostache-like templates (which approximate web components), or you can use JSX, or you can use no-frills raw JS (which really set it apart for something I was solving). It is mostly aesthetic parameters. There are functional parameters, but you're in rare company if you care about them.
IshKebab 7y ago
I started a project in Vue and strongly regret it. At some point I would like to switch to React. The biggest reason is that React works properly with Typescript. Vue can't type check anything in your templates, you can't type check Vuex (its state management system), you can't type check injected dependencies. Everything is strings. This means you'll spend a lot more time chasing down runtime errors and writing tests than with React. A lot more time. Other differences: * React doesn't have events, but frankly you should not use them in Vue either - use callbacks instead. * CSS has to go in a separate file in React. That is a little annoying to be honest. * React has an API split between traditional class-based components and function-based components ("Hooks"). They say to use Hooks in new code but I've seen some things that are really awkward to do with Hooks. Still you can just use class-based components if you like (same as with Vue). * The React NPM package has something like 5 dependencies. Vue has something like 1000. It's basically impossible to avoid the NPM insanity if you use Vue. * React has better documentation. Not that Vue's is bad, it's just not as extensive as React's. * React is way more popular. Easier to hire people to work on it, bigger community to get help from etc. * React has better tool support. Everything supports JSX/TSX. Not many things support .vue files. For example if you define a type in a .vue file you can't actually import it from any other Typescript files. Quite annoying. There are probably other things I've forgotten. If you're using the class-based React approach then yeah they are quite similar; React is just much better engineered. If you are using React Hooks then it is quite a different approach to Vue.

alharith 7y ago

I've worked extensively in both. In my opinion: Vue embraces web technologies. JS is to enhance your HTML. React is a javascript-first, FP-first mentality. Minor point: vue benchmarks slightly faster these days. The react runtime has gotten pretty thick.

eberkund 7y ago

Superficially the first thing that most developers I've spoken to notice is JSX vs HTML-based templating. But both frameworks are very similar. I started with Vue and when I took a job which used React I found that I already knew how things worked. Beyond that, I would say the biggest difference between the two is that Vue is the scope of the framework. Vue includes much more in the framework itself and as first-party helper libraries whereas React relies heavily on third-party packages of which there often many competing options and which one is used varies from company to company and project to project.

lobo_tuerto 7y ago

I think it's just easier to ramp up in Vue.js than in React. The Single File Component approach is easy to grasp for beginners since it just looks like an HTML file with three main tags: template, script, style. You might find useful information here: https://phabricator.wikimedia.org/T241180 https://phabricator.wikimedia.org/T241180 (The Wikimedia Foundation describes why they went with Vue.js instead of React or other competing libraries)

jdxcode 7y ago
IMO it's a huge difference in learning curve too. In Vue I was up and running in a day or two but React took me weeks to really feel like I knew what I was doing—and I learned React after I learned Vue. Single File Component tells you where you need to put things. You don't need to figure it out yourself and build up your own organization and patterns on top of Vue. You just start building the application. It's not a completely apt comparison: but Vue shares more in common with Rails than with Node development—at least in terms of grokking. My understanding is their performance is virtually the same. Some applications perform better on one vs the other.

dolphenstein 7y ago

I like that I can embed a bit of vue code into an existing web page. Bit like old school javascript. AngularJS 1.x was like that too and the inspiration for Vue. React/Angular require a whole build process with NPM/webpack etc etc to create a SPA.

superasn 7y ago

For me Vue biggest advantage is it's simplicity. I haven't learned much about Vue 3 yet but Vue 2 can still run the good old jQuery way and all you need is a script tag (no weback, etc). Also I find the syntax super easy and minimal. A valid vue component can be as simple as {template: <div>{{1+1}</div>'} Ofcourse you can extend it all you want and it even comes with its own cli but the fact they've managed to keep things so simple is what I love most about it.

tlrobinson 7y ago
For the record, an equivalent React component is equally simple: export default () => <div>{1+1}</div>
- RobertRoberts 7y ago
  Now try and run that in a browser. This is neither valid JS or HTML.
  - JMTQp8lwXL 7y ago
    > export default () => <div>{1+1}</div> is export default function () { return React.createElement('div', null, 1 + 1) }; If your concern is for beginners, I can appreciate that. But for anybody developing an enterprise grade application, using a transpiler isn't an appreciable barrier to entry. For beginners, there's create-react-app, vue cli, and angular cli. So you can get started immediately, without even knowing what a transpiler is.
    - RobertRoberts 7y ago
      While I risk starting a pointless argument my readings about React have been that it's only javascript functions. But in reality it's a DSL. I have never read anyone bragging about DSLs in javascript. So react's marketing seems dodgy. Also is Babel a transpiler or compiler for JSX? And is React useful without JSX?

ng12 7y ago

They're pretty similar. I prefer React because the JavaScript-first approach is much better for large applications. It leads to a smaller API while simultaneously giving you more control over how things work. Also Vue has a lot more magic to it which you might care about on a large project. The use case I recommend Vue for is when you just want a quick drop-in solution. For any serious development I stick with React.

bt3 7y ago
For any serious development I stick with React. Isn't this a bit disingenuous given Vue's usage in true, scalable production capacities? I'm not the expert but companies like Netflix, Adobe, and GitLab have Vue deployed at scale. Since when was "quick" synonymous with "not sufficient for serious development"?
- ng12 7y ago
  To my understanding the biggest reason GitLab chose Vue was because they were able to easily mix it in with their existing stack. That's part of what I was referring to by "drop-in". You can do the same with React but it's more heavyweight unless you plan on porting the lion's share of your app to React. As for the others I'm not sure what they're using Vue for specifically and can't really speak to the technical reasoning behind it. I'm not saying that you can't do serious development in Vue but rather that all else equal I will guide teams to adopt React, mostly for the better developer ergonomics.
  - manigandham 7y ago
    There's nothing trivial about being "drop-in". Usually these are complex apps running on traditional web frameworks and/or use server-side rendered pages where Vue excels in adding front-end interactivity because it uses HTML templates by default (with that HTML coming from the server).

deleted 7y ago

[deleted]

stickfigure 7y ago

Very very roughly: Vue tries to keep code and HTML separate. React says "everything is code". Having spent years in the old "MVC html template framework" world, I used to be in the former camp. But nowadays I find JSX/TSX incredibly convenient. It's nice that a component is represented by a single javascript(ish) language.

JMTQp8lwXL 7y ago
I agree on the templating as code, in terms of ease of us. (Already know JS? Learn nothing. With maybe the exception that "class" is now "className". `<Foo bar="1">` is a construct for `React.createElement(Foo, {bar: "1"}, null)`. It's wonderful.) I would imagine Vue is a much lighter, far less opinionated version of Angular. I've never been able to understand why templating is superior. And I want a strong argument that makes me seriously appreciate it, even if I don't change my mind. I've yet to see it. One gripe, at least with Angular templating, is templating constructs that are defined globally feel like leaky abstractions. Angular Pipes, for example. When I see a pipe, it's hard to find where's it's defined, where as React components are imported at the top of the file. Because I already know the language, it's easy to conceptually build on top of that, which is why JSX is simple. But templating essentially defines a whole new language on top of it. It's not an insurmountable barrier, but it increases friction. Maybe there's different brained folks where either "everything as code" vs. "HTML templating" is simpler.
- keithnz 7y ago
  well, one reason why templating is good and one of the things we are expecting in Vue3 is fine grained optimization of updates. Because the templates are essentially a well known interface for change, you can optimize UI patching. However, you can still use JSX and TSX with Vue if you want. Or mix them.

beart 7y ago

When anyone I talk to asks me about developing modern web pages, I point them to Vue, and they have all come back with praise for it. I can't imagine doing that with React or Angular (I'm in the middle of a pile of Angular wishing I was somewhere else). The learning curve and simplicity, to me, is the number one killer feature of Vue.

ggregoire 7y ago

Vue is kinda the unofficial successor of Backbone.js, Angular 1 and friends. You write templates mixing HTML and Vue syntax that you bind to DOM elements. You can pass data and event handlers to your templates. You separate your markup, your CSS and your JavaScript like you have always been doing. It just works. Pretty easy and quick to get started, even without a big programming background. Meanwhile, React lets you write your UI with JavaScript functions, which is completely different from anything I've seen before. You develop a bunch of functions and reuse them everywhere. Since functions are first-class citizens in JavaScript (i.e. you can pass a function as argument to a function and a function can return another function), there are pretty cool patterns in React. Like functions that enhance or inject styles or logic into your components (which are just functions too). This offers a lot of composability and reusability options to design and code your applications. (personal tip: Add TypeScript and VSCode on top of it to make your productivity skyrocket)

earthboundkid 7y ago

React is more popular, which is a gift and a curse. It leads to a lot of amateur coding, which is quite bad, but if you just want to glue something together, you can find the parts. Vue itself is both smaller and more full featured than React. To make a working React you need to add a lot of parts (React DOM, CRA, Redux, React Router, CSS in JS…) which are often only semi-official, whereas Vue has solutions either built in or officially supported. I honestly wouldn’t recommend React per se to anyone who has a choice, but it’s good to be familiar with it to get a sense of how the trends are moving, and they often have ideas that inspire (built in or officially supported) parts of Vue.

cageface 7y ago

For larger applications using JSX together with Typescript means you get type checking in model code and view code. For that reason alone I'd go with React for bigger apps.

bgnm2000 7y ago

React can make people better javascript developers.

wolfspider 7y ago

For my uses Vue is actually much more friendly towards non-standard environments but that’s never been a selling point it’s just a bonus. I heavily use TS, Components, and VueX so Vue 3 here looks pretty good to me. I’ve seen more devs in my shop take a liking to react due to it being slightly more mainstream. Vue doesn’t offer an OOTB solution to everything as much as react does but the other side of the coin there is that it’s more adaptable to uncharted territory. I think for devs out there that just desire a few things and they’re ready to start coding Vue is the perfect framework.

neya 7y ago

They're pretty similar, but Vue enforces structure and good patterns early on in the development cycle. React gives you more freedom. I've been a consultant using both for over 3 years now, full time and I can tell you I just use Vue these days. Everything is more readable, well-organized when the project is finished. You could do the same with React too, but it puts the mental burden on you. I think performance-wise as well Vue is faster (it used to be). Not that it matters a lot. But, if you are a company, it's easier to find React developers than Vue developers. Also, in big company environments, teams using React always end up in messy code that's not maintainable because of the freedom the framework gives as opposed to teams using VueJS. So you need to pick the one that fits your use-case.

kilburn 7y ago
> Also, in big company environments, teams using React always end up in messy code that's not maintainable because of the freedom the framework gives as opposed to teams using VueJS. This is debatable... > But, if you are a company, it's easier to find React developers than Vue developers. ... and this is probably one of the reasons why you've found more "messy" projects in React than in Vue. In other words: people who know what they like (and hence probably do a good job with it) pick either Vue or React. Teams that don't know pick React because it is more widespread, easier to hire for, etc.
ng12 7y ago
> Vue enforces structure and good patterns early on in the development cycle Could you expand on this? They're both tools for building components, how does Vue enforce more structure? FWIW I usually expect the same high-level structure for applications with both frameworks.

zamalek 7y ago

They achieve similar goals, it's all about how they go about that. React is pretty opinionated; it wants you to do things a certain way. There's a very good reason for that way too: Facebook arrived at that opinion after solving some serious real-world problems. Vue seems to steer around any strong opinions. It feels like something that the W3C would have come up with, it feels like it belongs in a browser. You can use mostache-like templates (which approximate web components), or you can use JSX, or you can use no-frills raw JS (which really set it apart for something I was solving). It is mostly aesthetic parameters. There are functional parameters, but you're in rare company if you care about them.

IshKebab 7y ago

I started a project in Vue and strongly regret it. At some point I would like to switch to React. The biggest reason is that React works properly with Typescript. Vue can't type check anything in your templates, you can't type check Vuex (its state management system), you can't type check injected dependencies. Everything is strings. This means you'll spend a lot more time chasing down runtime errors and writing tests than with React. A lot more time. Other differences: * React doesn't have events, but frankly you should not use them in Vue either - use callbacks instead. * CSS has to go in a separate file in React. That is a little annoying to be honest. * React has an API split between traditional class-based components and function-based components ("Hooks"). They say to use Hooks in new code but I've seen some things that are really awkward to do with Hooks. Still you can just use class-based components if you like (same as with Vue). * The React NPM package has something like 5 dependencies. Vue has something like 1000. It's basically impossible to avoid the NPM insanity if you use Vue. * React has better documentation. Not that Vue's is bad, it's just not as extensive as React's. * React is way more popular. Easier to hire people to work on it, bigger community to get help from etc. * React has better tool support. Everything supports JSX/TSX. Not many things support .vue files. For example if you define a type in a .vue file you can't actually import it from any other Typescript files. Quite annoying. There are probably other things I've forgotten. If you're using the class-based React approach then yeah they are quite similar; React is just much better engineered. If you are using React Hooks then it is quite a different approach to Vue.