Comment by coldlight
4 years ago
Could you explain more (or link to an article) about how Vue is AngularJS (and how that's a problem)?
Could be very useful as I'm a Vue fan and currently investing heavily careerwise.
4 years ago
Could you explain more (or link to an article) about how Vue is AngularJS (and how that's a problem)?
Could be very useful as I'm a Vue fan and currently investing heavily careerwise.
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!
1 reply →
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!
2 replies →
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!