3 ms·

And you have everyone of those with Vue too btw

spion 10y ago
Not really. 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/ 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?
- eblanshey 10y ago
  Nobody responded to you, so I took on your challenge :) I'm still pretty new to Vue, but after a while of fiddling I came to a pretty simple solution: https://jsfiddle.net/jsfiddle4ephi/6xLwgqxk/1/ https://jsfiddle.net/jsfiddle4ephi/6xLwgqxk/1/ 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 https://vuejs.org/v2/guide/single-file-components.html This was a fun challenge, thanks!
  - spion 10y ago
    Nice try, but I expect that the template is contained within the app template (or really any other template), i.e. `<spinner promise=promise> <inner template parameterized on data here></spinner>`. I don't want to be passing raw html strings around. 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 :)
    - spion 10y ago
      I also forgot: 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 :)

spion 10y ago

Not really. 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/ 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?

eblanshey 10y ago
Nobody responded to you, so I took on your challenge :) I'm still pretty new to Vue, but after a while of fiddling I came to a pretty simple solution: https://jsfiddle.net/jsfiddle4ephi/6xLwgqxk/1/ https://jsfiddle.net/jsfiddle4ephi/6xLwgqxk/1/ 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 https://vuejs.org/v2/guide/single-file-components.html This was a fun challenge, thanks!
- spion 10y ago
  Nice try, but I expect that the template is contained within the app template (or really any other template), i.e. `<spinner promise=promise> <inner template parameterized on data here></spinner>`. I don't want to be passing raw html strings around. 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 :)
  - spion 10y ago
    I also forgot: 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 :)