8 ms·

Single file components are extremely common in Vue. You can also render templates with JavaScript (although from what i've seen, this is much more intuitive in

Single file components are extremely common in Vue. You can also render templates with JavaScript (although from what i've seen, this is much more intuitive in React than Vue)

ng12 9y ago
That doesn't solve the problem though -- you still have two sources of truth. Is this array processed in the template or the JS? Where does this crazy directive get called? How does the model get updated when you click some element? That mental back-and-forth becomes a huge pain in a big project. With JSX you never have to worry about it. For the life of me I cannot shake the feeling that Vue is just a simpler Backbone/Marionette. React was life changing because it actually solved the problems I had as a professional I-do-this-every-day web developer. I can't feel that way about Vue.
- linkmotif 9y ago
  Have you tried Vue? I had that impression too—that it's like Backbone/Marionette—but people have told me it's not. I don't think you mess with the DOM and I don't think you refer to elements except for the root, like in React.
- outsidetheparty 9y ago
  I don't know where you formed your impression of what Vue is like, but what you're describing is really not anything like it.
  - ng12 9y ago
    This is my impression of templates as a tool. I dislike Vue for the same reasons I dislike Angular and Marionette.
    - outsidetheparty 9y ago
      Ok... I mean, JSX is templates too; it's just a different syntax. Vue supports JSX if you prefer that syntax. I think you have a mistaken impression of Vue, it's much more similar to React than it is to Angular.
      - ng12 9y ago
        JSX is different though -- it's sugar around a 1:1 mapping to plain old JavaScript. There's no magic behind the scenes binding variables or interpreting stringly-typed code. I wasn't aware you could use JSX with Vue. If you do, what benefits does Vue offer?
        elcritch 9y ago
        Vue simplifies a lot of the "data propagation" from what I've seen of React. I loved React's vdom and props, but just felt the syntax for props (e.g. `.setProp({name: val})` was excessive boiler plate. Vue simplifies that aspect with reactive props and data, its just more intuitive for me than React. One big improvement is the really nice system for `computed` and `watch` properties which reactively transform data. Your templates (jsx or the default html-directives, which I prefer) can rely on `computed` properties to transform from say an Dict to a list for say a list of `li` components. It gives a nice "raw input data -> reactive data transforms -> reactive html repr` flow.
- wwweston 9y ago
  "sources of truth" usually refers to data. Having some designated separation of presentation and data is usually understood as a good thing. I get that having them located in strongly separated locations increases workflow friction, but that isn't how Vue does things, and the rest of the problems you're talking about are present in any system where presentation and data have some kind of separation convention. I'm also not convinced there where React is used to collapse the difference between the two it's actually solving problems rather than switching to a different set of problems, but then again I suppose every engineer has the right to pick which set of problems they prefer to wrestle with.
- ElatedOwl 9y ago
  In a larger Vue application you would use a data store (ie Vuex). The only thing that can mutate the data are "mutation" methods in the data store. It is your single source of truth. If you aren't using a data store, your parent component would solely be responsible for mutating data. If the child component needed to alter it, it would raise an event that the parent would listen to and make whatever modifications necessary. I'm having a lot of trouble truthfully understanding your "mental back-and-forth" issue and I'm wondering if it's an inexperience with Vue issue. Give it a try... I'm willing to bet you'll love it.
  - dabernathy89 9y ago
    My guess is that they started looking at Vue before v2.
  - ng12 9y ago
    Maybe using "source of truth" was bad phrasing, the question is about rendering data not the data itself. I am convinced templates are a fundamentally broken technology. In React there's only one place things happen: in the JSX. This is not true for Vue -- you have at least two discrete objects (the template and the view) communicating back and forth.
    - ElatedOwl 9y ago
      Have you seen Vue's single file components? It's a (single file), which would look something like (idk how to format code on h/n lol): <template> <ul> <li v-for="message in messages">{{ message }}</li> </ul> </template> <script> export default { data () { return { messages: ['hello', 'world'] } } } </script> I realize this is a completely trivial example, but is this what you're getting at? Everything related to that component is in a single place. The template itself handles any UI specific logic: conditionally showing an element, looping, binding an event. Any real logic is going to be handled from the component itself. That said, Vue actually supports using a render function as opposed to using a template. You can even use JSX if you want (though I certainly wouldn't consider JSX a first class citizen in Vue).
- crooked-v 9y ago
  Vue has one source of truth: the data stored in each component. You bind elements in the template to that data and they get automatically re-rendered when it changes, and you bind events in the template to methods (or just ad-hoc things like @click="toggleVar = !toggleVar" for a boolean) that update that data. This includes child components, which trigger events that you bind in the parent component.
  - ng12 9y ago
    > @click="toggleVar = !toggleVar" Oh boy. Another reason why I don't like templates -- you invariably end up with magical incantations like this. Working with JSX has given me an incredible distaste for templating languages.
    - afd8856 9y ago
      Somewhat magical. All bound expressions in Vue are javascript expressions. Names are typically bound on "this", which is the component instance. So the above expression is equivalent to this.toggleVar = !this.toggleVar.
      - ng12 9y ago
        Not entirely true -- I know there's at least special processing for filters: https://vuejs.org/v2/guide/syntax.html#Filters https://vuejs.org/v2/guide/syntax.html#Filters

Single file components are extremely common in Vue. You can also render templates with JavaScript (although from what i've seen, this is much more intuitive in React than Vue)

ng12 9y ago

That doesn't solve the problem though -- you still have two sources of truth. Is this array processed in the template or the JS? Where does this crazy directive get called? How does the model get updated when you click some element? That mental back-and-forth becomes a huge pain in a big project. With JSX you never have to worry about it. For the life of me I cannot shake the feeling that Vue is just a simpler Backbone/Marionette. React was life changing because it actually solved the problems I had as a professional I-do-this-every-day web developer. I can't feel that way about Vue.

linkmotif 9y ago
Have you tried Vue? I had that impression too—that it's like Backbone/Marionette—but people have told me it's not. I don't think you mess with the DOM and I don't think you refer to elements except for the root, like in React.
outsidetheparty 9y ago
I don't know where you formed your impression of what Vue is like, but what you're describing is really not anything like it.
- ng12 9y ago
  This is my impression of templates as a tool. I dislike Vue for the same reasons I dislike Angular and Marionette.
  - outsidetheparty 9y ago
    Ok... I mean, JSX is templates too; it's just a different syntax. Vue supports JSX if you prefer that syntax. I think you have a mistaken impression of Vue, it's much more similar to React than it is to Angular.
    - ng12 9y ago
      JSX is different though -- it's sugar around a 1:1 mapping to plain old JavaScript. There's no magic behind the scenes binding variables or interpreting stringly-typed code. I wasn't aware you could use JSX with Vue. If you do, what benefits does Vue offer?
      - elcritch 9y ago
        Vue simplifies a lot of the "data propagation" from what I've seen of React. I loved React's vdom and props, but just felt the syntax for props (e.g. `.setProp({name: val})` was excessive boiler plate. Vue simplifies that aspect with reactive props and data, its just more intuitive for me than React. One big improvement is the really nice system for `computed` and `watch` properties which reactively transform data. Your templates (jsx or the default html-directives, which I prefer) can rely on `computed` properties to transform from say an Dict to a list for say a list of `li` components. It gives a nice "raw input data -> reactive data transforms -> reactive html repr` flow.
wwweston 9y ago
"sources of truth" usually refers to data. Having some designated separation of presentation and data is usually understood as a good thing. I get that having them located in strongly separated locations increases workflow friction, but that isn't how Vue does things, and the rest of the problems you're talking about are present in any system where presentation and data have some kind of separation convention. I'm also not convinced there where React is used to collapse the difference between the two it's actually solving problems rather than switching to a different set of problems, but then again I suppose every engineer has the right to pick which set of problems they prefer to wrestle with.
ElatedOwl 9y ago
In a larger Vue application you would use a data store (ie Vuex). The only thing that can mutate the data are "mutation" methods in the data store. It is your single source of truth. If you aren't using a data store, your parent component would solely be responsible for mutating data. If the child component needed to alter it, it would raise an event that the parent would listen to and make whatever modifications necessary. I'm having a lot of trouble truthfully understanding your "mental back-and-forth" issue and I'm wondering if it's an inexperience with Vue issue. Give it a try... I'm willing to bet you'll love it.
- dabernathy89 9y ago
  My guess is that they started looking at Vue before v2.
- ng12 9y ago
  Maybe using "source of truth" was bad phrasing, the question is about rendering data not the data itself. I am convinced templates are a fundamentally broken technology. In React there's only one place things happen: in the JSX. This is not true for Vue -- you have at least two discrete objects (the template and the view) communicating back and forth.
  - ElatedOwl 9y ago
    Have you seen Vue's single file components? It's a (single file), which would look something like (idk how to format code on h/n lol): <template> <ul> <li v-for="message in messages">{{ message }}</li> </ul> </template> <script> export default { data () { return { messages: ['hello', 'world'] } } } </script> I realize this is a completely trivial example, but is this what you're getting at? Everything related to that component is in a single place. The template itself handles any UI specific logic: conditionally showing an element, looping, binding an event. Any real logic is going to be handled from the component itself. That said, Vue actually supports using a render function as opposed to using a template. You can even use JSX if you want (though I certainly wouldn't consider JSX a first class citizen in Vue).
crooked-v 9y ago
Vue has one source of truth: the data stored in each component. You bind elements in the template to that data and they get automatically re-rendered when it changes, and you bind events in the template to methods (or just ad-hoc things like @click="toggleVar = !toggleVar" for a boolean) that update that data. This includes child components, which trigger events that you bind in the parent component.
- ng12 9y ago
  > @click="toggleVar = !toggleVar" Oh boy. Another reason why I don't like templates -- you invariably end up with magical incantations like this. Working with JSX has given me an incredible distaste for templating languages.
  - afd8856 9y ago
    Somewhat magical. All bound expressions in Vue are javascript expressions. Names are typically bound on "this", which is the component instance. So the above expression is equivalent to this.toggleVar = !this.toggleVar.
    - ng12 9y ago
      Not entirely true -- I know there's at least special processing for filters: https://vuejs.org/v2/guide/syntax.html#Filters https://vuejs.org/v2/guide/syntax.html#Filters