Comment by dmak
4 years ago
It's just my personal opinion.
When you learn React with JSX, you just need to know JS and everything else is pretty much predictable. Whereas in Vue, you have to learn JS and all the declaration markups of Vue (ex, v-bind, v-for, etc...); it's less predictable and someone who understands JS would still have to learn those things. Ex, if you knew how to write a loop in JS then you can write a loop to output React components. In Vue, you have to learn how to use v-for. When you start talking about filters and other things, it gets overly complicated in Vue (like AngularJS).
Two-way binding was a thing in early AngularJS days similar to Vue, and they both found out through iteration that it's not as great in practice as in theory. I believe Vue3 is only one-way binding now? With the composition API, you're encouraged to use defineEmits as the callback mechanism to parent components similar to React's paradigm. When React came out, it was all one-way binding and it made sense and worked well.
Vue's composition API with the defineProps and defineEmits creates a similar component composition structure to React's effect hooks. However, the general structure of the component still requires Vue syntax (ex, <template>, <script setup>, etc...). In React, you just write a JS function and return what you expect to render.
Vue is also a bit too magical in how their props work especially when you are using <script setup>. It's not obvious that props can be inherited unless you read the documentation. In React, it's just JavaScript and you get the props through the function arguments.
I think the common "strengths" of Vue are often applicable to all frontend frameworks, because it's all JavaScript at the end of the day. This is all just my opinion though.
We've been leaning heavily into Vue3+TSX over at https://radiopaper.com which addresses some of these gripes. It's true there's more "magic" and ceremony around creating components than just a simple function, but not much – you just return what you expect to render from the `setup` component method and all is well. You also get niceties like well-typed props & emitted events, and even runtime prop data validation if desired, built right in.
Vue3 also has `FunctionalComponent` now for the cases where you really want a simple component from a function – and again props work beautifully with Typescript.
In contrast, I'm finding integrating Typescript with the largely-JS React codebase I work with on the day job to be a bit nightmarish – the amount of prop destructuring which seems to happen in every single component makes typing their signatures a repetitive, tedious affair (largely due to TS's handling of destructured arguments). I'm not sure how universal this style is in modern React but I do seem to come across it pretty frequently. To be fair, React's simplicity does make it eminently typeable, this is more of a code-stylistic issue.
All that said, appreciated reading your take on the two frameworks – it's extremely difficult to remain objective about the tools we use day in and out and these sorts of comparisons absolutely help. We all want to be moving towards systems we enjoy building with and will continue enjoying for decades - I for one am infinitely grateful to React and its community for bringing JSX/TSX into the world (which I'm sure is still a somewhat controversial stance in 2022- but for me personally, after a 6 or so months with it, the firsthand experience told me all I needed to know). Happy xmas to you!
> Vue3 also has `FunctionalComponent` now for the cases where you really want a simple component from a function – and again props work beautifully with Typescript.
This kind of reinforces my point about having to learn Vue. I personally think it's just unnecessarily building more API to memorize on top of JavaScript.
> In contrast, I'm finding integrating Typescript with the largely-JS React codebase I work with on the day job to be a bit nightmarish – the amount of prop destructuring which seems to happen in every single component makes typing their signatures a repetitive, tedious affair (largely due to TS's handling of destructured arguments).
To be fair, I find issues with this with TypeScript everything. Moreover, I think that is the natural progression for all typed systems or languages. I honestly prefer JS without TypeScript. I may use TypeScript some times for certain areas like having enums.
> All that said, appreciated reading your take on the two frameworks
I'm happy to hear that!
Merry Christmas to you too!
Fair points. I feel the need to clarify that you don't _need_ to use `FunctionalComponent` in bare JS, it just gives you an opportunity to type your component props (all `FunctionalComponent` is is a TS interface). This works just fine, from a `.tsx` file: ``` const MyComponent = ({ greeting = 'Hello' }) => <p>{greeting} world!</p>; ``` and can be used in TSX or standard-Vue templates as ``` <MyComponent greeting="Hi" /> ```
There is certainly more surface-area to learn about than React, though my feeling is that hooks have evened that equation quite a bit (one React component class vs. a whole quirky hooks toolkit; and admittedly Vue has forms of both as well). I'd argue both are far less to learn than Angular – I've had a tiny bit of experience there and recall feeling continually lost. I also think there are tradeoffs that justify extra bits of learning, but that's a subjective matter that (imo) can only be informed through some amount of firsthand experience building something complex with the frameworks.
Typescript is not everyone's cup of tea! Tradeoffs abound there – personally while I agree it can be cumbersome, I have trouble going back at this point (though I will when necessary). Interesting that you enjoy enums – I do as well but have found a distaste for them in the TS community which saddens me.
Prop destructuring isn't necessary. A lot of people changed to accessing the props via property access and this is often a better approach for conciseness. Don't force yourself to do something stylistic if it doesn't fit!
Thanks for weighing in, that's good to know. After wondering if this could be auto-refactored, I came across https://github.com/jsx-eslint/eslint-plugin-react/blob/maste..., will definitely have to give that (with `--fix`) a try in the new year and see if I can get the team on board! – desire for typescript being a compelling factor.
Personally I do like the non-destructured `props.abc` throughout component code, really helps clarify at a glance where something is coming from, whether it's locally or externally defined, etc. Code style is an endless exercise in compromises/opinions though, even _with_ tools like eslint and prettier.
1 reply →
I would add to your prediction:
we will see a trend away from React Hooks to something that feels less magical, but is also different from the old way of using class components.
Thanks, that's a clear and thorough explanation. Enjoy your Christmas!
You're welcome! Happy holidays!