Things I Don’t Like about Vue.js (as a React engineer)

hello everyone welcome back to my channel this is a follow-up from my last episode where i was talking about all the things that i think bjs does better than react and frankly there were quite a number of things that were better if you haven't seen that video i encourage you to check it out it's just the previous one there's a link down below as well i figured today i kind of flipped that video idea on its head and talk about things that i do not like about ujs as a react engineer i am historically a react engineer i like to code with react and despite delving into vue.js in recent times i will still be a react engineer so i wanted to share with you my thoughts on the things that vgs does that i pretty much like the react way better one of the biggest differences between react vgs is how each library framework approaches writing your ui with react it is the loved and appreciated jsx which i have definitely come to enjoy over the past years of coding in react i think it's pretty straightforward again i've drunk the kool-aid with react so easy for me to say but the simple idea with jsx is you have jsx that looks like this and when it's compiled down it turns into a function call and that's kind of like the meats of jsx like that it's as simple as that uh there's a few small gotchas probably but i've now integrated them so much that it's kind of hard for me to even remember what they are however when i look at what vue.js does vgs has a fully blown template syntax for writing your ui and i found it to be more complicated for me than it needed to be interpolating content is similar to react with vue you use double curly braces with react you use single curly braces so not too dissimilar but where things get a little bit more confusing to me is understanding the magic behind how the vgs template syntax works and how react.jsx works so again react is with jsx it's literally transforming this into a function call which in my small human brain i can understand pretty easily with vgs they say that it does compile down to render calls kind of like jsx but it's kind of abstracted away from me and not something that i know about at all uh i think that both of them have in common is that the content inside of these templates have to only be javascript expressions which you know is a it makes sense for why things work that way but even with having expressions being the only content that you can put inside jsx and inside uh view.js templates vue has actually some more caveats in there where it seems like there's a actual white list of globals that you are only allowed to use inside of ugs templates which is probably not a big deal and probably never bites any vgs engineer but just kind of leads me to believe that there's more magic happening with djs templates than with react um jsx so it's not bad uh but it's definitely different and something that requires i think i mean from my very naive look maybe it requires a little bit more work to learn the vue.js template syntax than jsx but again i've checked in that reactively for so long that that might not be true in jsx might actually be just as hard where things start to diverge more sharply is when you start talking about vue.js directives a directive is a special attribute with the v dash prefix and essentially it's a way for you to add functionality into templates uh the example here is the uh v if directive if the scene variable is true it shows if it's false it hides and then there's also this you know bespoke language for using directives in ujs uh directives can take arguments so this is the directive v-bind the argument is href essentially what this directive is saying is that bind the value in the url variable to the ref prop or attribute of that element and again not terrible but again it's just more to learn that's very and only bjs specific uh you can also have dynamic arguments with vjs which lets you kind of change what you're binding things to which is similar to es6 dynamic keys on objects and then lastly there's also modifiers on directives in my previous video i actually hold this up as a strength of ujs which i do believe because you can't do this in react because react is trying to be as close to just javascript as possible but and because vue.js has a template syntax that they can create and own and extend how they want they can add all these nicest into it but it definitely adds more weight when thinking about writing your vgs code um you have this list of directors which honestly isn't that many so it's not terrible to learn one thing i didn't like is the v4 directive syntax which kind of takes a python-esque syntax for writing for loops where you can have item index and items and objects and it's just stuff that's very unique to vgs like this knowledge is not transferable outside of ujs whereas with react because it's trying to be just you know a very thin wrapper to the actual dom you actually have to learn about on click on change on key down all these event names that you'd have to use in the html itself so it might be a little bit more confusing to learn because you have to kind of learn the actual like dom api but that knowledge is transferable wherever you go if one day vanilla js takes over the world then you'll be in a good spot with react with vjs you are definitely in bjs land using uh ujs directives here is a petty thing that i don't like so vgs has components just like react you can register them that's fine because vue.js is a template-based ui language when you actually want to use components inside of other components you have to register them so the example they give here is when you are using a module system like es modules you have to import the component and all its declarations and then in your component you're defining define it as a component that's accessible to this other component this this component b is this what they're calling this here which is one import two lines and then you have to also then use component a inside your template so for using one component you have to kind of touch three lines of code this is compared to react which requires two which is just importing the component and then using it directly so not a terrible difference but it's also a you know it's not really a restriction but it's a side effect of it being a template language where you have to actually tell the template compiler that this component exists and how it works so that you can actually use it inside other templates so nitpicky but also just kind of rub me the wrong way here's another little weird difference between react and pjs um when you want to pass when you want to have a parent communicate to a child in some ways the way to do that is with passing a function as a prop so you pass in a function called handleclick that a child component can use anywhere it wants and when then you can call that function whenever you want so you just pass down functions kind of the callback way of doing communication between parent and child seems pretty simple to me this is as opposed to vgs where they encourage you to use events for a way to message from child to parent so you have here this is a custom vgs component and the parent is using this component and saying that on the enlarged text event run this expression and inside this inside the definition of this blog post component you're saying that when you click this button to omit this event and this is not my favorite way of doing things and i know that vgs has added some tooling around this to make it a little bit more concrete what events a component actually can't emit to a parent so that the contracts a little bit more strict but it seems just like another way of doing the same thing which you could do with functions like here you can say that this blog post component emits the enlarged text um event so you can also argue that you know props is how you go from parent to child and events is from child to parent so i can i can understand that but coming from a react world where everything is a prop and nothing is not a prop and that makes things very um singular in focus is makes more sense to my brain so this is kind of like a weird difference in how child parent communication happens between vgs and reacts not it's not worse i'd be curious to see how this feels when i actually code with vgs at long stretches of time i'm sure it scales especially because the tooling built around it i'm sure it's rock solid because vgs tooling is rock solid but just seems weird i've been burned by event passing so many times in my past that to see it used here it just kind of scares me a little bit but uh i'm not going gonna really pass full judgment on it until i actually delve into it a little bit more and then speaking of uh uh method event names um because you are writing templates with vgs when you actually want to reference a method to call in a template you're passing a string so you have here this ujs uh component where you have methods that are exposed the group method and then the template you just pass through as a string uh when i was first looking to vgs i was like this is garbage like you'll have these typos so easily that you will understand that you wrote you know great with three e's and you'll just have things just break without any reason but we actually run the vgs compiler it can match and know that greet with three e's is not defined as a method so that's where your error probably is so in some ways it completely mitigates that issue but it still just feels weird this loose coupling it's loose by itself because you have the methods to find over here and they're being referenced in the template but because of ugs tooling they're able to kind of bridge those gaps to make sure that they're as close together as possible so it saved itself but on face value it's a little bit scary to see and last but not least is the way that bgs does changes of data they have reactivity built into vgs by default it's a way for things to kind of update when things change the way that it's done in bjs is with proxies to make it you know easy to know when some property changes to then update anything that's referencing that that that value has changed if you've used immer this is the same thing that emer uses using uh proxies but there's all these little gotchas with reactivity that i didn't really enjoy we actually define state you have to wrap it in this reactive function to say that this object is reactive um if you want to use a primitive value then you have to use ref just similar to reacts use ref but different ways to store different types of values which is a little bit strange to me ref for primitive values like booleans integer strings and then reactive for objects and then what's also kind of strange to me which is you know if you argue is strange where it's like a developer you know productivity win is that when you use ref by default the template will to reference this value you actually have to do count dot value because that's it's an object to be able to just do the implementation details but when you actually use count in the template you don't have to worry about calling dot value because templates automatically unwraps to the inner value which is a little bit magical in my opinion and not i don't like magic that much anymore in my career i can understand it being nice and it kind of hides away some animation details for you but um it kind of then it also changes when you have to be aware that implication exists and when it doesn't so like when you actually use a ref inside of a reactive object you don't have to worry about it because it's automatically unwrapped but if you want to then change the value i think you have to actually call you have to actually uh count.ref kind of value it's actually called count.value to change it so like if you want to change that value inside of the javascript and not instead of the template you actually have to be aware called that value so a little bit strange and if you want to destructure a reactive object you have to then it'll lose reactivity if you do this so instead you have to then wrap the d structured reference object with two refs which then makes all these their own refs object with title.value so it's a lot of this implementation you know it's a lot of you know nitty gritty implementation details to be aware of which maybe is hidden more often than i think when actually writing a large view application but just reading it kind of just you know feels like it could be painful to do um this is of course in juxtaposition with use state where you can just store whatever you want and then whatever you call set state with is what the new value is which is um a little bit more of an imperative api we actually say set count set state but it's also just simple and kind of hard i think to uh i mean i've definitely done it wrong so it's not impossible but i feel like there's more foot guns here with the uh reactivity in bjs again this is without having delt into it deeply but just from reading the docs that's kind of the impression that i get so that's kind of my list of things that i didn't really enjoy reading about ujs as a react engineer uh i'd have to kind of play with vue.js more to see how those actually feel in practice because right now i'm just kind of talking about them in theory uh i really curious to hear the pain points that people have i mean i see it at work and i'm sure i'm doing a poor job of remembering the pain points people have with react but honestly nowadays it's mostly use effect which is worthy of its own video talking about the foot guns that exist with use effect no framework is without their own issues so react definitely has its own issues to uh fix and make better for people but just comparing pgs and react this is the differences that i saw that i still really enjoy react's way of doing things better that's my video for this week hopefully you enjoyed i will look forward to seeing you again next week with a brand new video if you're not a subscriber become one for new videos like this every week in your youtube inbox until then stay happy stay coded

Channel: Harry Wolff

Views: 15,238

Keywords:

Id: zuLR3KcxIOY

Length: 16min 16sec (976 seconds)

Published: Mon Oct 26 2020