6 ms·

In a lot of cases it's easier, true, but for other cases it makes things a lot harder. E.g. - how do you conditionally wrap some elements in another element? It

by scq 5y ago

In a lot of cases it's easier, true, but for other cases it makes things a lot harder. E.g. - how do you conditionally wrap some elements in another element? It's easy in React (assign the subtree to a variable), but impossible to do cleanly in Vue. That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder.

manigandham 5y ago
The hard things are exactly the same as React because you can use whatever render function you want. JS itself is a single-threaded event loop and all view engines basically follow the same functional pattern of data-> render function -> output. Vue comes with an HTML parser to create that render function, React and others use a JSX parser, or you can write your own from raw javascript. You can technically use any of them with any render function parser, but Vue starting with HTML by default and all the other niceties around reactivity make it a better fit.
beebeepka 5y ago
I've used both extensively. IMO, complex composition is sometimes easier in React but Vue wins in pretty much everything else. It's almost never in my way. I'd say Vue is the much more powerful tool in the hands of a skilled developer
MartinodF 5y ago
I know it's just an example, but it's really straightforward: you create a component which accepts a boolean prop and, based on that, either outputs the default slot directly or a wrapper containing the default slot via a simple v-if. If you wanted to get fancy, you could also accept a tag prop and v-bind all other $attrs on the container to make that a general purpose component.
BiteCode_dev 5y ago
> how do you conditionally wrap some elements in another element ? You use a dynamic component: <component :is="condition ? 'WrappedComponent' : 'UnwrappedComponent"></component> > That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder. While react make the easy things annoying. It took me an afternoon to be productive with vue, several weeks with react. And all that for what? Having the privilege to "just use javascript"? Here is "just javascript" in jsx: {items.map((items) => ( {display && <SomeElement onClick={e => e.preventDefault() && foo()} className="`${active ? 'current' : ''}`" />} ))} Here is the same in vue template: <SomeElement v-for="item in items" v-if="display" @click.prevent="foo()" :class="{'current': active}" /> Not only the react blob is impossible to scan, but it will be different depending of the dev who coded it, because there is no enforced patterns. You must use brain power to parse every single template line. HTML, that thing that was simple and declarative, now becomes complicated and imperative. And that's not even weird or unusual code. That's regular stuff one writes all the time. Don't get me started on state management or spaghetti hooks. I have yet to work on a react code base I was more productive than on a vue one. And the gaps get wider if the team is not composed of excellent coders, because react code by junior is a nightmare.
- johtso 5y ago
  Well, the fact that you're "just using javascript" in jsx does also mean that you need to format things nicely to avoid having an unreadable mess. Using a code formatter like Prettier helps a lot. The "react blob" is less of a blob if nicely indented. Admittedly due to the nature of Vue syntax, it's harder to make a mess because everything is just key/value.. but then you have to learn an API to express things in that way. I enjoy the fact that you don't have that layer/step with react. I definitely feel that the 3rd party classnames package should be built into React, I agree that out of the box conditional class names look a mess. I don't have enough experience with either library yet to form an opinion on which I prefer, but I definitely appreciate not having the mental overhead of remembering the vue api. I'd rather have a bit of code that's more explicit/"just javascript" than have to think "what's that symbol I need to use again?". Definitely a personal preference thing though! {items.map((item) => item.display && ( <SomeElement onClick={(e) => e.preventDefault() && foo()} className={classNames({'current': item.active})} /> ) )}
  - BiteCode_dev 5y ago
    That's still a blob, just a longer one, with an additional dependency and more parenthesis to mess up. It's a compromise, not an improvement. And in the end, I still have to read 2 JS expressions before even figure out what DOM element I'm actually dealing with. Then I still have to evaluate what the heck is happening in onClick and className. I still have to parse code in my presentational layer, code that is interleaved with my template indentation so it also makes it hard to understand hierarchy and easy to make mistakes. Of course, the elephant in the room we are not talking about with react is that all those things compounds. When you have 5 of such blobs in your render functions, issues don't add up, they multiply. Then you add the store system on top of it, with actions, reducers and all that fun stuff.
    - mmgutz 5y ago
      Vue has vuex, so there's a need for actions and reducers. React state has become much simpler with packages like zustand and it works wonderfully with typescript. It's not really that big of a deal to have another import. Vue's directive's (not sure if that's the correct term) are a mix bag of magic strings that tie to functions somehow. Why can't they just be a function variable like in React? The answer of course is there are smart people and smart users behind both projects and those are the trade-offs we tolerate.

by scq 5y ago

manigandham 5y ago

The hard things are exactly the same as React because you can use whatever render function you want. JS itself is a single-threaded event loop and all view engines basically follow the same functional pattern of data-> render function -> output. Vue comes with an HTML parser to create that render function, React and others use a JSX parser, or you can write your own from raw javascript. You can technically use any of them with any render function parser, but Vue starting with HTML by default and all the other niceties around reactivity make it a better fit.

beebeepka 5y ago

I've used both extensively. IMO, complex composition is sometimes easier in React but Vue wins in pretty much everything else. It's almost never in my way. I'd say Vue is the much more powerful tool in the hands of a skilled developer

MartinodF 5y ago

I know it's just an example, but it's really straightforward: you create a component which accepts a boolean prop and, based on that, either outputs the default slot directly or a wrapper containing the default slot via a simple v-if. If you wanted to get fancy, you could also accept a tag prop and v-bind all other $attrs on the container to make that a general purpose component.

BiteCode_dev 5y ago

> how do you conditionally wrap some elements in another element ? You use a dynamic component: <component :is="condition ? 'WrappedComponent' : 'UnwrappedComponent"></component> > That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder. While react make the easy things annoying. It took me an afternoon to be productive with vue, several weeks with react. And all that for what? Having the privilege to "just use javascript"? Here is "just javascript" in jsx: {items.map((items) => ( {display && <SomeElement onClick={e => e.preventDefault() && foo()} className="`${active ? 'current' : ''}`" />} ))} Here is the same in vue template: <SomeElement v-for="item in items" v-if="display" @click.prevent="foo()" :class="{'current': active}" /> Not only the react blob is impossible to scan, but it will be different depending of the dev who coded it, because there is no enforced patterns. You must use brain power to parse every single template line. HTML, that thing that was simple and declarative, now becomes complicated and imperative. And that's not even weird or unusual code. That's regular stuff one writes all the time. Don't get me started on state management or spaghetti hooks. I have yet to work on a react code base I was more productive than on a vue one. And the gaps get wider if the team is not composed of excellent coders, because react code by junior is a nightmare.

johtso 5y ago
Well, the fact that you're "just using javascript" in jsx does also mean that you need to format things nicely to avoid having an unreadable mess. Using a code formatter like Prettier helps a lot. The "react blob" is less of a blob if nicely indented. Admittedly due to the nature of Vue syntax, it's harder to make a mess because everything is just key/value.. but then you have to learn an API to express things in that way. I enjoy the fact that you don't have that layer/step with react. I definitely feel that the 3rd party classnames package should be built into React, I agree that out of the box conditional class names look a mess. I don't have enough experience with either library yet to form an opinion on which I prefer, but I definitely appreciate not having the mental overhead of remembering the vue api. I'd rather have a bit of code that's more explicit/"just javascript" than have to think "what's that symbol I need to use again?". Definitely a personal preference thing though! {items.map((item) => item.display && ( <SomeElement onClick={(e) => e.preventDefault() && foo()} className={classNames({'current': item.active})} /> ) )}
- BiteCode_dev 5y ago
  That's still a blob, just a longer one, with an additional dependency and more parenthesis to mess up. It's a compromise, not an improvement. And in the end, I still have to read 2 JS expressions before even figure out what DOM element I'm actually dealing with. Then I still have to evaluate what the heck is happening in onClick and className. I still have to parse code in my presentational layer, code that is interleaved with my template indentation so it also makes it hard to understand hierarchy and easy to make mistakes. Of course, the elephant in the room we are not talking about with react is that all those things compounds. When you have 5 of such blobs in your render functions, issues don't add up, they multiply. Then you add the store system on top of it, with actions, reducers and all that fun stuff.
  - mmgutz 5y ago
    Vue has vuex, so there's a need for actions and reducers. React state has become much simpler with packages like zustand and it works wonderfully with typescript. It's not really that big of a deal to have another import. Vue's directive's (not sure if that's the correct term) are a mix bag of magic strings that tie to functions somehow. Why can't they just be a function variable like in React? The answer of course is there are smart people and smart users behind both projects and those are the trade-offs we tolerate.