10 ms·

Reasons why Vue will rock your socks off - Don't need to know jsx! - Sane way of scripting puts the script in an object and each component is <template>html</

Reasons why Vue will rock your socks off - Don't need to know jsx! - Sane way of scripting puts the script in an object and each component is <template>html</template> <script>javascript</script> <style>css</style> - Event buses allow sharing of variables between child components without either redux or pushing variables down one child at a time (finally!) - v-for looping is saner than reacts mapping - v-if allows v-if statements without renderIf component or multiple render statements in react (antipatterns boo!). - two way data binding with vue-model - native vuex with an index file that holds state sanely, rather than just having state held in each reducer as done in react - Great documentation! - Yay !

jmschlmrs 9y ago
This sounds very much like Angular 1.
- kowdermeister 9y ago
  "Some of Vue’s syntax will look very similar to AngularJS (e.g. v-if vs ng-if). This is because there were a lot of things that AngularJS got right and these were an inspiration for Vue very early in its development" https://vuejs.org/v2/guide/comparison.html https://vuejs.org/v2/guide/comparison.html
  - jmschlmrs 9y ago
    So is it fair to say that Vue is for people that wish Angular had stayed on the V1 path and not diverged to be more like React for V2 onward?
    - lobo_tuerto 9y ago
      No, I think it would be fairer to say that it's like if AngularJS and React had a child and named it "Vue.js". Because in the end, Vue.js has stuff in common with React, like the virtual DOM (you don't see this in Angular 2+) and has stuff in common with AngularJS (the good parts). Check this out: https://vuejs.org/v2/guide/comparison.html https://vuejs.org/v2/guide/comparison.html Don't go thinking you are going to read a biased comparison, the Vue.js vs React section has the blessing from a core React contributor (Dan Abramov): https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740 https://github.com/vuejs/vuejs.org/issues/364#issuecomment-2...
- deleted 9y ago
  [deleted]
naiyt 9y ago
> two way data binding Maybe it's better in Vue than it was in AngularJS, but this seems like a downside to me.
- chuckdries 9y ago
  v-model is meant for use specifically with <input> tags, so your local component state stays synced with what the user sees. You can use it on components, but you're not meant to. In general, vue encourages you to avoid using two way data binding on custom components unless your component is a souped up input component, like a fancy date picker or something.
g_b 9y ago
> Don't need to know jsx! You don't need to know jsx for using jsx. You only need to know html. You do need to learn something more with vue, you said so yourself, those v-for, v-if directives. > each component is html.file, javascript.file, css.file I prefer to only have one file per component so that I can just "import Component" and use it. With 3 files I need to make sure all 3 of them get loaded. Disclaimer: I do not know how Vue works. The rest sound interesting.
- Klathmon 9y ago
  The one thing that Vue does great is exactly what you say you like about React (edit: not to say there aren't other things Vue does great, just that this is one of them). In Vue you have one file that contains the styles, code, and HTML for the component, all in their own HTML tags. That means that there is a "blessed" solution for styling, that I'm afraid React will never have. Between "styled components", CSS-Modules, css-in-js, and tons of other options, many in-operable with each other. Styling is React's worse part, and it doesn't look like it's getting any better...
  - naiyt 9y ago
    styled-components are actually really nice, so I don't think it's fair to say "styling is React's worst part". This seems like a more general criticism of React's agnosticism when it comes to so many things. React falls more heavily on the library spectrum than the framework one. It's rather un-opinionated about a lot of things: styling, state management, routing, code organization, etc. Definitely not something that's unique to styling. On the one hand this offers a lot of flexibility to do things the way you want, but also makes the learning curve a lot steeper. Honestly I would love for somebody to build a more full fledged framework around React that makes most of the decisions for you. A sort of "good for 90% of use cases" setup. (I guess create-react-app is sort of like that? You still have to make too many decisions, I think.)
    - Klathmon 9y ago
      I completely agree, but at the same time styling still sucks in React when it comes to using 3rd party components. Not to mention that with each way of doing it there are big tradeoffs (styled-components pushes a bunch of what I feel could be compiled before release to the client at runtime). Most of the other parts of React are great with the freedom of choice. I can use a 3rd party component that handles it's state internally, or expects to be controlled externally, or uses or doesn't use JSX, or organizes it's code however it wants. But if I want to style it (which i'll need to do), I need them to support the method I'm using in my app, or have this very ugly and hard to support "bridge" between what I'm using and what they are using. I'm not trying to be all doom-and-gloom, but it is a pain point for me, and it's not getting better in my experience, it's getting worse. It's not nearly bad enough to get me to switch away from React, but it's something I would like a nicer solution to.
chuckdries 9y ago
Seconded for Vue, I used it for a contract project for a year and was consistently blown away. Gitlab sums it up for me "Vue isn't a buzzword, Vue is a workhorse" https://twitter.com/gitlab/status/928675879676497920 https://twitter.com/gitlab/status/928675879676497920
Klathmon 9y ago
Honestly I don't think Vue is better than React, or React better than Vue. They are just different, and that's where a lot of the arguments come from. For me, Vue is such a monumentally large step backwards. I loved React because there are no templates, there is no 2-way binding, you don't have the vuex style state handling. Using Vue is an exercise in frustration for me, dealing with all of the templating headaches that I was so happy to escape, needing to learn the "template pseudo language" which ties your hands in a way that I haven't found helpful. But this makes Vue no more wrong or worse than someone using tabs instead of spaces is "wrong" or "worse". But for others, React is a nightmare because of those reasons. A friend of mine greatly dislikes the React paradigm, and was always more productive and wrote better code in a templating style. And I genuinely don't think it has anything to do with productivity or skill. Vue's style might be better at some things, worse at others, React is the same, but in different ways. They are both fantastic frameworks.
- vanillaboy 9y ago
  To me React is superior for a very simple reason. There is a huge deficit of intermediate-advanced Vue tutorials compared to React. There are like 30 advanced-level tutorials on Egghead on React and like, what 3-4 advanced Vue tutorials (Nuxt, Nuxt and using Angular-like decorators to write proper classes instead of the 'it just works' vanilla boilerplate)? Learning the ropes of Vue is easy. It's a go-to framework of the Laravel crowd for this very reason - you don't need to know Javascript much if at all, just learn some basic syntax and you're good to go for some basic virtual DOM magic.
  - spikej 9y ago
    Add to that tooling compatibility issues with TypeScript & Vue
    - CharlesW 9y ago
      Mind elaborating? As of late, Vue's TypeScript support seems pretty nice.[1] [1] https://vuejs.org/v2/guide/typescript.html https://vuejs.org/v2/guide/typescript.html
mlsarecmg 9y ago
The points you've listed are the very reasons why i would prefer React actually ... - JSX fixed all the templating issues from 10 years ago, i see no reason to go back to dependency injection, scope loss, arbitrary code-in-html expression and a semi-javascript accent - Presentational view logic belongs to the controller while business logic is elegantly abstracted in React: view=fn(state). There's no point in ripping view creation from the presentational layer. - Context and higher order components. Can't have those in an imperative architecture. - v-for is not sane to me. Also odd, being forced to mix-in extensions for the simplest basics that go beyond the few presets Vue provieds: https://github.com/Krizzu/vue-for-range https://github.com/Krizzu/vue-for-range A React user doesn't solve problems by searching the internet for framework specific solutions, they import _ from 'lodash' and use _.range, like everyone else does. - {condition && <div>hello javascript</div>} - We have suffered through two-way data bindings with Angular already - Vuex is not native. It mutates state by aggressively transforming state into setter/getters, with nasty edge-cases. Once Vue switches to version 3 using proxies, you'll maintain two incompatible codebases. React has Mobx, even though Redux is great. Also lots of lean and promising alternatives like Unistore. - Knowing React you don't rely on documentation (though official docs are on point). It is simple enough to grasp it after looking at a view examples once. The api surface and cognitive overhead of React is a tiny fraction of Vues. Coming from Angular it is amazing that one month of learning and half a year of consulting docs turned into a week and a couple of months consulting with Vue. Yet, you can learn React fully in the shortest amount of time while simply remembering the few things you'd need to know. A generic round-trip, for instance the one at egghead, costs you 60 minutes total. - http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular/core http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular...
- deleted 9y ago
  [deleted]
- deleted 9y ago
  [deleted]
- hungerstrike 9y ago
  These are exactly the same reasons that I think React is the best. Vue looks like it's going backwards compared to React. Furthermore, you get native mobile apps for free with React Native. Also, React has a much, much bigger community and bigger companies supporting it.
matwood 9y ago
> - Sane way of scripting puts the script in an object and each component is <template>html</template> <script>javascript</script> <style>css</style> Each component I have in React is script + css. It did require some setup though. > - Don't need to know jsx! Except you need to learn the v- bindings. I prefer JSX and JS here. > - two way data binding with vue-model Two way data binding is a problem, not a feature.
- pythonaut_16 9y ago
  OP is slightly incorrect about two way data binding. Vue doesn't have two way databinding in the same way that AngularJS does. Vue's "two way databinding", i.e. v-model directive, is actually just a syntax sugar that's equivalent to adding an event handler and a dynamic property on the value/text of the element.
Kiro 9y ago
I've used Vue for larger project and like it but the things you list are the drawbacks IMO: - Don't need to know jsx! But you need to learn Vue's template DSL. JSX is just HTML and JavaScript. - v-for looping is saner than reacts mapping - v-if allows v-if statements without renderIf component or multiple render statements in react (antipatterns boo!). Strongly disagree! - two way data binding with vue-model I suggest anyone thinking of using two-way binding for anything to rethink their choice. There is always a better way.
- dsego 9y ago
  JSX is NOT just HTML and JavaScript! If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className="">. It's not even just javascript, or I would be able to write a simple if-else statement. JSX is a DSL, a minimal one, but still. I mean, you could say it's even worse, because those subtle differences can cost you hours of looking for mistakes.
  - pitaj 9y ago
    It is Javascript, but JSX brackets only allow an expression within them. Conditionals are statements in JS, so you have to wrap them in an IIFE or a `do`-expression.
  - hobofan 9y ago
    > If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.
    - dsego 9y ago
      Well, if you're being pedantic, DOM is not HTML.
  - 9y ago
ggregoire 9y ago
You just listed all the reasons why people moved from Angular 1 to React.
rmrfrmrf 9y ago
As someone who had to use AngularJS for a while, just wait until those template directives get replaced in future versions to support random-use-case-17483 and force you to refactor a bunch of template code for literally no tangible gain. Then you’ll understand why using native JS to generate elements makes more sense.
mmargerum 9y ago
The reason I prefer vue/vuex over react/redux is that I can mutate my days structures instead of pretending JS supports immutable data structures .

jmschlmrs 9y ago

This sounds very much like Angular 1.

kowdermeister 9y ago
"Some of Vue’s syntax will look very similar to AngularJS (e.g. v-if vs ng-if). This is because there were a lot of things that AngularJS got right and these were an inspiration for Vue very early in its development" https://vuejs.org/v2/guide/comparison.html https://vuejs.org/v2/guide/comparison.html
- jmschlmrs 9y ago
  So is it fair to say that Vue is for people that wish Angular had stayed on the V1 path and not diverged to be more like React for V2 onward?
  - lobo_tuerto 9y ago
    No, I think it would be fairer to say that it's like if AngularJS and React had a child and named it "Vue.js". Because in the end, Vue.js has stuff in common with React, like the virtual DOM (you don't see this in Angular 2+) and has stuff in common with AngularJS (the good parts). Check this out: https://vuejs.org/v2/guide/comparison.html https://vuejs.org/v2/guide/comparison.html Don't go thinking you are going to read a biased comparison, the Vue.js vs React section has the blessing from a core React contributor (Dan Abramov): https://github.com/vuejs/vuejs.org/issues/364#issuecomment-244575740 https://github.com/vuejs/vuejs.org/issues/364#issuecomment-2...
deleted 9y ago
[deleted]

naiyt 9y ago

> two way data binding Maybe it's better in Vue than it was in AngularJS, but this seems like a downside to me.

chuckdries 9y ago
v-model is meant for use specifically with <input> tags, so your local component state stays synced with what the user sees. You can use it on components, but you're not meant to. In general, vue encourages you to avoid using two way data binding on custom components unless your component is a souped up input component, like a fancy date picker or something.

g_b 9y ago

> Don't need to know jsx! You don't need to know jsx for using jsx. You only need to know html. You do need to learn something more with vue, you said so yourself, those v-for, v-if directives. > each component is html.file, javascript.file, css.file I prefer to only have one file per component so that I can just "import Component" and use it. With 3 files I need to make sure all 3 of them get loaded. Disclaimer: I do not know how Vue works. The rest sound interesting.

Klathmon 9y ago
The one thing that Vue does great is exactly what you say you like about React (edit: not to say there aren't other things Vue does great, just that this is one of them). In Vue you have one file that contains the styles, code, and HTML for the component, all in their own HTML tags. That means that there is a "blessed" solution for styling, that I'm afraid React will never have. Between "styled components", CSS-Modules, css-in-js, and tons of other options, many in-operable with each other. Styling is React's worse part, and it doesn't look like it's getting any better...
- naiyt 9y ago
  styled-components are actually really nice, so I don't think it's fair to say "styling is React's worst part". This seems like a more general criticism of React's agnosticism when it comes to so many things. React falls more heavily on the library spectrum than the framework one. It's rather un-opinionated about a lot of things: styling, state management, routing, code organization, etc. Definitely not something that's unique to styling. On the one hand this offers a lot of flexibility to do things the way you want, but also makes the learning curve a lot steeper. Honestly I would love for somebody to build a more full fledged framework around React that makes most of the decisions for you. A sort of "good for 90% of use cases" setup. (I guess create-react-app is sort of like that? You still have to make too many decisions, I think.)
  - Klathmon 9y ago
    I completely agree, but at the same time styling still sucks in React when it comes to using 3rd party components. Not to mention that with each way of doing it there are big tradeoffs (styled-components pushes a bunch of what I feel could be compiled before release to the client at runtime). Most of the other parts of React are great with the freedom of choice. I can use a 3rd party component that handles it's state internally, or expects to be controlled externally, or uses or doesn't use JSX, or organizes it's code however it wants. But if I want to style it (which i'll need to do), I need them to support the method I'm using in my app, or have this very ugly and hard to support "bridge" between what I'm using and what they are using. I'm not trying to be all doom-and-gloom, but it is a pain point for me, and it's not getting better in my experience, it's getting worse. It's not nearly bad enough to get me to switch away from React, but it's something I would like a nicer solution to.

chuckdries 9y ago

Seconded for Vue, I used it for a contract project for a year and was consistently blown away. Gitlab sums it up for me "Vue isn't a buzzword, Vue is a workhorse" https://twitter.com/gitlab/status/928675879676497920 https://twitter.com/gitlab/status/928675879676497920

Klathmon 9y ago

Honestly I don't think Vue is better than React, or React better than Vue. They are just different, and that's where a lot of the arguments come from. For me, Vue is such a monumentally large step backwards. I loved React because there are no templates, there is no 2-way binding, you don't have the vuex style state handling. Using Vue is an exercise in frustration for me, dealing with all of the templating headaches that I was so happy to escape, needing to learn the "template pseudo language" which ties your hands in a way that I haven't found helpful. But this makes Vue no more wrong or worse than someone using tabs instead of spaces is "wrong" or "worse". But for others, React is a nightmare because of those reasons. A friend of mine greatly dislikes the React paradigm, and was always more productive and wrote better code in a templating style. And I genuinely don't think it has anything to do with productivity or skill. Vue's style might be better at some things, worse at others, React is the same, but in different ways. They are both fantastic frameworks.

vanillaboy 9y ago
To me React is superior for a very simple reason. There is a huge deficit of intermediate-advanced Vue tutorials compared to React. There are like 30 advanced-level tutorials on Egghead on React and like, what 3-4 advanced Vue tutorials (Nuxt, Nuxt and using Angular-like decorators to write proper classes instead of the 'it just works' vanilla boilerplate)? Learning the ropes of Vue is easy. It's a go-to framework of the Laravel crowd for this very reason - you don't need to know Javascript much if at all, just learn some basic syntax and you're good to go for some basic virtual DOM magic.
- spikej 9y ago
  Add to that tooling compatibility issues with TypeScript & Vue
  - CharlesW 9y ago
    Mind elaborating? As of late, Vue's TypeScript support seems pretty nice.[1] [1] https://vuejs.org/v2/guide/typescript.html https://vuejs.org/v2/guide/typescript.html

mlsarecmg 9y ago

The points you've listed are the very reasons why i would prefer React actually ... - JSX fixed all the templating issues from 10 years ago, i see no reason to go back to dependency injection, scope loss, arbitrary code-in-html expression and a semi-javascript accent - Presentational view logic belongs to the controller while business logic is elegantly abstracted in React: view=fn(state). There's no point in ripping view creation from the presentational layer. - Context and higher order components. Can't have those in an imperative architecture. - v-for is not sane to me. Also odd, being forced to mix-in extensions for the simplest basics that go beyond the few presets Vue provieds: https://github.com/Krizzu/vue-for-range https://github.com/Krizzu/vue-for-range A React user doesn't solve problems by searching the internet for framework specific solutions, they import _ from 'lodash' and use _.range, like everyone else does. - {condition && <div>hello javascript</div>} - We have suffered through two-way data bindings with Angular already - Vuex is not native. It mutates state by aggressively transforming state into setter/getters, with nasty edge-cases. Once Vue switches to version 3 using proxies, you'll maintain two incompatible codebases. React has Mobx, even though Redux is great. Also lots of lean and promising alternatives like Unistore. - Knowing React you don't rely on documentation (though official docs are on point). It is simple enough to grasp it after looking at a view examples once. The api surface and cognitive overhead of React is a tiny fraction of Vues. Coming from Angular it is amazing that one month of learning and half a year of consulting docs turned into a week and a couple of months consulting with Vue. Yet, you can learn React fully in the shortest amount of time while simply remembering the few things you'd need to know. A generic round-trip, for instance the one at egghead, costs you 60 minutes total. - http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular/core http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular...

deleted 9y ago
[deleted]
deleted 9y ago
[deleted]
hungerstrike 9y ago
These are exactly the same reasons that I think React is the best. Vue looks like it's going backwards compared to React. Furthermore, you get native mobile apps for free with React Native. Also, React has a much, much bigger community and bigger companies supporting it.

matwood 9y ago

> - Sane way of scripting puts the script in an object and each component is <template>html</template> <script>javascript</script> <style>css</style> Each component I have in React is script + css. It did require some setup though. > - Don't need to know jsx! Except you need to learn the v- bindings. I prefer JSX and JS here. > - two way data binding with vue-model Two way data binding is a problem, not a feature.

pythonaut_16 9y ago
OP is slightly incorrect about two way data binding. Vue doesn't have two way databinding in the same way that AngularJS does. Vue's "two way databinding", i.e. v-model directive, is actually just a syntax sugar that's equivalent to adding an event handler and a dynamic property on the value/text of the element.

Kiro 9y ago

I've used Vue for larger project and like it but the things you list are the drawbacks IMO: - Don't need to know jsx! But you need to learn Vue's template DSL. JSX is just HTML and JavaScript. - v-for looping is saner than reacts mapping - v-if allows v-if statements without renderIf component or multiple render statements in react (antipatterns boo!). Strongly disagree! - two way data binding with vue-model I suggest anyone thinking of using two-way binding for anything to rethink their choice. There is always a better way.

dsego 9y ago
JSX is NOT just HTML and JavaScript! If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className="">. It's not even just javascript, or I would be able to write a simple if-else statement. JSX is a DSL, a minimal one, but still. I mean, you could say it's even worse, because those subtle differences can cost you hours of looking for mistakes.
- pitaj 9y ago
  It is Javascript, but JSX brackets only allow an expression within them. Conditionals are statements in JS, so you have to wrap them in an IIFE or a `do`-expression.
- hobofan 9y ago
  > If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.
  - dsego 9y ago
    Well, if you're being pedantic, DOM is not HTML.
- 9y ago

ggregoire 9y ago

You just listed all the reasons why people moved from Angular 1 to React.

rmrfrmrf 9y ago

As someone who had to use AngularJS for a while, just wait until those template directives get replaced in future versions to support random-use-case-17483 and force you to refactor a bunch of template code for literally no tangible gain. Then you’ll understand why using native JS to generate elements makes more sense.

mmargerum 9y ago

The reason I prefer vue/vuex over react/redux is that I can mutate my days structures instead of pretending JS supports immutable data structures .