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?
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)
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.
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.
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.
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.
For any serious development I stick with 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.
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.
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.
However, you can still use JSX and TSX with Vue if you want. Or mix them.
You might find useful information here: https://phabricator.wikimedia.org/T241180
(The Wikimedia Foundation describes why they went with Vue.js instead of React or other competing libraries)
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.
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.
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.
export default () => <div>{1+1}</div>This is neither valid JS or HTML.
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.
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?
You don't have to use JSX with React, but the vast majority of people do, because they aren't dogmatic about it not being "pure" JavaScript or whatever.
I don't take issue with how React works, I take issue with how it's being presented to new users and outsiders.
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.
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.
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.
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.