> Vue is definitely lot easier to learn than React
How so? Vue actually has a lot to it -- lots of template directives, computed properties, directives, etc.
How so? Vue actually has a lot to it -- lots of template directives, computed properties, directives, etc.
This is also how angular got popular. The tutorial said: Just add this one JS to the page and start making SPAs! Here is a 10 line example with everything in it explained, and it works!
Same with mongodb - their 10 step interactive tutorial website was extremely convincing
Not many people know you can get started the same with react by putting react, mobx and mobx-react on the page https://jsfiddle.net/ugh2xhfg/. Thats because its not advertised. You will still need babel / compilation though. JSX is still a major barrier to entry.
There is no easier way to make a project become popular than to offer an unrealistic-for-production getting started page that will get you rolling by doing almost nothing!
This is a false dichotomy. React is a fully-featured, standalone library and functionally equivalent to Vue if all you include is react.min.js. You don't need webpack or npm, you don't need Redux or MobX. This attitude stems from people learning React from create-react-app (which is geared towards a fully-featured, multi-developer, production-ready application) without doing FB's TodoMVC or even reading the React docs.
No, React beginner tutorial implies learning JSX , then you need to compile JSX into JS. Vue.js does none of that. You just write Javascript and HTML. And yes, Vue.js also supports server-side rendering.
It's all about the friction. Vue currently offers significantly less friction to jump into than React.
Not really, you also need react-dom.min.js ;) But even then, Vue is sporting automatic reactive dependencies, computed properties, watchers, conditional class names, and other things without requiring a trip to some random NPM package. And it's still a smaller payload than react/react-dom
The payload for that would be similar to vue: 15KB min+gzip for mobx + 7kB for inferno-compat + 4kb for mobx-react = 26KB min+gzip. Latest vue is also 26KB min+gzip
It's just easier to get started with Vue.js and I'm just tired of the constant marketing campaign from Facebook...guess what 99.9% of companies out there aren't facebook or google.
The relative ease to get into Vue.js and it's fast growing popularity are signs that it's hitting the right pain points with developers who don't work at Facebook.
This is the reason why I always choose React.
(Well, that, and the huge existing ecosystem, and fact that components are first class in the template language e.g. you can pass a component as a parameter to a template and you can bring components into scope by importing them. But those are fairly advanced features)
You don't have typescript's typechecking for templates.
You don't have higher-order components or first class components. Scoped slots are almost there, but not quite.
Also, "scoped slots" show that vue's simplicity is a bit of an illusion. There is a lot of reinventing the wheel happening underneath to get templates to the basic level of modularity / encapsulation / features of plain old JS.
It was similar with Angular. "Look how simple it is!" - yeah, until you actually need to build something serious with it... then you need to learn 3 times as much as React and all its tooling.
Here is an exercise: Write a spinner component in vue that renders either a spinner, an error message, or any other component (must be passed to the spinner component as a parameter) to which you can pass the data of the fulfilled promise.
Here is a react implementation:
https://jsfiddle.net/mm145xkj/
You just write a component where you pass two props: a promise to monitor, and a function that will take the data of the fulfulled promise and use it to render anything.
How do you do that in Vue? Is it simpler than the React implementation?
IMO, this is more readable than React, especially if extracted to their own .vue components.
1. Upon a successful resolve, you can make it render props/data to a custom component.
2. You can put each of the component into their own vue files to make it super clean: https://vuejs.org/v2/guide/single-file-components.html
This was a fun challenge, thanks!
I'm sure vue has some scoped slot template transclusion thing to solve it... actually scratch that, I'm not sure if the equivalent of plain old first class functions exist in its template language :)
Its not just about raw HTML: this might need to be a totally custom template with data bindings to other data. Here is an example, the spinner's promise provides the data for a dropdown component which in turn is bound to a member of the parent component's data.
The challenge does need some more work to make it more realistic :)
Only if you go the SPA route.
Well, unless you plan on writing all your code in one file (likely painful), or using an async loader (either slow, or painful because of manually managing dependencies and load order).
Of course, you could also re-code the spinner every single time. Or you could use an existing library of components and then you don't have to deal with modules, only that library does.
Sure, and modules are good even if you didn't need data binding at all. But the data binding and the module system you use are orthogonal and CommonJS/npm is still larger than any other module system by 10x, maybe 100x, maybe more.
You can get data binding in React with MobX, which pretty much gets you on par with Vue: https://mobx.js.org/getting-started.html . If you don't like how anemic setState is, and don't like the boilerplate / straightjacket of Redux, MobX is the way to go.
Admittedly, React's simpler options are harder to find :)
With vue.js you can write the good old HTML you are used to and enrich it with vue's magic, just like you could do with the original Angular. Anyone who comes from a jQuery or angular 1 background will be able to immediately pick it up. The only thing you will be missing are single file components.
Can you do proper react without studying a node.js Package manager, bundler, compiler, JSX?
One example why vue.js is easy and react is hard I just found: Google "vue two way binding input" and "react two way input binding". React's solution reads like a bad joke.
Yes. React is just a view rendering library. All those tools are just to make your life easier (including JSX) and don't have any inherent connection to React.
> Google "vue two way binding input" and "react two way input binding". React's solution reads like a bad joke."
Sure, but that's because "two way binding" isn't really Reactive. I guess it depends on what your past experience is, but as far as API surface area React and Vue seem to have similar complexity.
> isn't really Reactive.
The go to response of react users when confronted with "I want to do X, why can't I do X?". It might makes sense for you but it pushes a lot of developers away.
Granted most of the components/UIs are simple, but it works.
Uh... what solution, and in what way? React doesn't use "two-way binding", at least not in the sense that other frameworks do.
If you're talking about the idea of "controlled inputs", it fits with the rest of the React philosophy. Driving input values from state keeps the data flow predictable, and makes it easier to implement things like validation.
I've got a number of articles on React form management in my React/Redux links list ([0]). In particular, Gosha Arinich's article on the basics of controlled inputs is excellent ([1]), as is Loren Stewart's article ([2]).
[0] https://github.com/markerikson/react-redux-links/blob/master...
[1] http://goshakkk.name/controlled-vs-uncontrolled-inputs-react...
[2] http://lorenstewart.me/2016/10/31/react-js-forms-controlled-...
I guess I just don't fancy the "react philosophy", which is perfectly fine: I am happy we each got what we want.
As I'm currently very happy with React I know too little about them, so correct me please.
You mean "babel --presets react src > out.js"?
The problem here is people keep comparing the React ecosystem to the Vue library.
That is not a realistic workflow anyone would ever use.
The more advanced ones use the whole tool chain. Simple ones are just a silly 1 liner script like that. Some don't use JSX at all and just straight up stick React on a page. It all works just peachy.
I am not even a frontend developer!
I think it's possible, but at the moment the vue.js usage share is still FAR to small. One of my countries job search platform offers 89 jQuery jobs, 46 angular (1+2), 28 angular2, 28 for react. 1 (one) for vue. (To put this in perspective, 643 Java jobs).
The reason Vue was easier for me to learn is because it feels like regular JS + HTML, and single file components only strengthen that initial confidence when learning the framework.
Vue just feels relatively normal and was an easier transition for me into the SPA world. React feels like an entirely new thing, even though they are extremely similar at the core.
To each their own, but I find the Vue API small and simple enough for me to keep it all in my head at once. Reasoning about things has become it a lot easier because of this.