What are my thoughts on Vue3

all right so I want to make a little video to kind of talk a little bit about View and what are my thoughts on view and is view worth learning or using I will say that if you go to my channel like a long time ago I used to make some view content now I don't know how to easily find it because the filtering on YouTube videos is not that great like where's the search bar here it's not here so I guess it's over here um so so if I search my channel for view I mean I have a couple of view tutorials like I started building some smaller components with view I built like a full stack application with you and this was all in view two this is like two years ago and my experience using it was actually pretty good I really liked it I did say I would say that the syntax is a little bit weird for the templates in my opinion but it's nothing that you can't learn right um the reason I kind of like reacts templates a little bit better is because everything's just like JavaScript which I mean you can argue that's it makes the templates look ugly but in view there's things that I like the things I don't like so I'm just going to kind of talk about some of these things and uh you guys can call me out if I'm saying something that seems like I shouldn't be complaining about so right the bat I mean I created a view project with Veet and after you create it some of the things that I like about Vue is that all of your components are in a single file right so you know all the scoping and all the styling for that component is in this file there's there's like if you use reactors thousands of ways that you could potentially style your components there's like style components there is uh Tailwind or css modules there's like inlining CSS there is uh there's like emotion there's just so many different ways to style react and it's really kind of overwhelming and kind of pointless to have all these different ways view I like it's kind of just like right off the bat you just have CSS right and coming from a traditional standpoint like that's a beautiful thing because you just have to worry about learning CSS you don't have to worry about anything else you can also I believe change this like SAS if you wanted to which is another great post-processing or as a pre-processing I don't know um a styling language built on top of CSS that allows you to like do nesting right so I could do like uh at hover here and then I could potentially put this logic here right and I would personally use SAS if I was going to like make a view project because sash just gives you a lot more benefits but there's nothing wrong with just pure CSS as well and I do like how you can just put the scoped tag here and like all this styling will be completely scoped to your component and you know it won't affect any other component in your application that was one of the main reasons why we use like something like bem uh the Bim Paradigm to basically scope arc our things so that we don't potentially affect styling throughout our whole application so yeah the single file components I like now one thing I don't like with the single file components is like if you just need a small little component that you just need to use on this page you have to make a new file that's something I'm not a big fan of like I I wish in react you could easily just make like a new a new function and a new component and just use it with view I believe you have to make a new view file which just an extra like right click make new file scaffold it out which is kind of a pain in my opinion but hey it's not too bad for the script area I like how you can say ling equals TS and then like you automatically get typescript support that's been pretty nice um now I have been working on like a side project this this game I kind of talked about and it's in view I will say that some of the things that would have complained to me like for example I just put a component here called hello and off the bat my my editor is not yelling at me right there's nothing called hello here um so that's something that maybe I just need to work further setting up my view uh you know configure something to have it yell at me but there's some things that I've noticed when working with Vue that like Auto importing stuff doesn't work you know making stuff red when there's this should not be a component called hello here doesn't do anything not a fan of that now let's talk about the actual syntax of stuff so let's just go ahead and do this make sure we can go to our page the syntax of you especially view three if you're using the composition API which I would recommend using because it just seems like it's more concise if we use this setup term there's a lot of stuff that like you don't have to put anymore in their stuff is just like kind of made Global I believe so one of the cool things about Vue is that if you need some data in your div like if you need to render something you could literally just make a constant here called like people I can make an array and I'll put like Bob in Sally or something right and then inside of the template itself this is the thing that I'm not really a too big of a fan of I do like reacts use of dot map because it's kind of it Maps one to one with JavaScript but in view you have to do a special syntax that kind of reminds me of angular I'm not a fan of it but hey you get used to it you learn it and then the syntax of this is for person in people now I don't know why I use the keyword in here because if you're using JavaScript the way the loop over an array is of so four person of people but they chose in for some reason and there's this little like nuances of like you have to if you want the index I believe you do something like that um like if I do index and then I can also say person name I just changes the name how about that so let's see if this works I haven't swapped obviously his name in this index so a lot of my gripes or me just I haven't really memorized the Syntax for some of these templating things but it's pretty easy if you look at the code you can be the deciding factor that no like is this cleaner then reacts mapping like does it make more sense to say people.map name index and then like make a div here that says name index right and then the Syntax for interpolation is a little bit different in react we just use one curly brace and view you use two but just the subtle differences like that uh so there's other stuff as well like let's say you wanted to when you click on this div you want to do something right so now we have the at symbol click and then we could pass it some strings which again coming from a view standpoint it's a little bit strange but you can say handle click and then you can go up here and you can make a function called I'll say function handle click foreign like that and we can just go ahead and console log clicked or something so now if we go back to our code and click on some of these things we see that clicked points out to the console pretty cool and if you want to pass some information to hear like you could potentially pass in name directly here like this and I could say clicked name we can use that there's something cool that I actually did like a couple days ago actually yesterday where built into view um it's very easy to like set up drag and drop now you might be able to do this in other languages as well but you basically just say like draggable equals true and then you can actually start adding listeners for like drag start um like this and I can say handle drag start get that event and go ahead and make a function up here function handle drag start get that event and we're going to go ahead and just console log that real quick so now if I click and drag Sally notice that I get a drag event I can do stuff with it okay so some other things let's see what else I can I can figure out so let's say we want to like do something when we click on the name to like I don't know change the color of the styling or something how would we do that well in view you actually have the ability to just make references kind of like in react we have a reference but the reference is actually going to like re-render View and update the page when it changes so like I could say people is actually a reference like this I got the imported right there so now this is actually like I think a reactive thing right so like if I change the underlying array then the page will also change I don't think it would have done that before like let's actually try that out so like if I were to click on this and also keep track of the index that we clicked which would be here let's just do that and we said people index is equal to people index plus an exclamation mark would that append an exclamation mark and would that re-render the component and display that I don't know let's try it out so let's go here uh let's click on Bob and notice that nothing happens right the on click should be getting called right here but I mean let's just make this a number so it's not complaining at us and let's also print this out just just to make sure okay so it is a pending you see it in here but the page is like not displaying those exclamation marks so basically if you make this a ref then view knows what to do to kind of like update this thing and you have to say view dot uh per people.value people.value here to kind of update that which I'm not a fan of that but hey you got to do what you got to do it's the same as like react we say ref.current um but overall I mean like it's just a lot more concise I believe there's some things that are a little bit strange like you have to do a computed in view if you want to basically uh computed like if I wanted to make uh all caps people right I could make a computed this is actually pretty cool like if I say computed and then I go ahead and just give it a function like this I could have this return people and then I can map over it and I can say name name.2 uppercase like that and I believe what this is going to do if I put value here is it's going to every time people changes it's going to capitalize everything in it so if I go ahead and just like instead of adding an exclamation mark I add an a if I want to use all caps as like a computed or derived I could do that here I believe I'll say all caps okay so now as I add characters it's going to actually append a lowercase a here but then the computed is going to react to basically this people right changing it's going to recompute this and get a new array and we can use that I think there's also like a reactive keyword I haven't really used it I think I've used it once um now some more things I like about View I think if you look at their docs I mean their dogs are great I love the views docs back when I started with view two and view three the docs are just very very um it tells you everything you need to know basically I don't want to go to view X u3 so inside of you like they have a really easy way to just make a store so like if I can get to the view docs hold on a second I'm here I'm at the view docs let me find the search bar let me type in uh store okay so out of the box they have this cool way that you can basically make like a a global store throughout your entire application if I just make a file called store here and just paste in that code I now have this thing that I can import and actually increment the count and do whatever I want that can be shared amongst all of my pages so let's just go ahead and import a store from door is that how you do it I don't know if I have the absolute a relative path setup let's see let's try this so now I should be able to basically when I click on let's just refactor this code just a little bit instead of doing all this um we are going to basically get rid of the for Loop and we're going to Output store dot count make sure you use double quotes okay and I'll say handle click go ahead and call that delete these things and we want to basically just have this store thing update so I'll say store dot count plus plus and if I delete all this other extra code that I'm not using anymore in this example you should see if I were to paste this in the right place you should see this store thing update okay but now I have this thing that I can actually share amongst all my components so I didn't have to bring in view X I didn't have to bring in like Redux I didn't have to bring in all these State Management libraries because there's a way built into view that basically share stuff and asphalt does this as well I like the fact that the less you have to download to like hit the ground running and build out components the better from using react I mean like they they give you context but to use context is super bloated they even tell you that there's like performance issues with using context because it's going to like re-render the parent and all the children that are wrapping that context or that are wrapped inside the context there's just a bunch of overhead um but view is pretty concise and easy to kind of do what you need to do without having to pull in some extra stuff now one thing I would say is kind of confusing about view is that you read through these docs and you're going to see some code that is going to look like there's two different apis there's a composition I guess there's an options API so you have to kind of make sure that like here's the other approach there's going to be two different approaches to writing View kind of like how react had a class components for the longest time and then they switched to like functional components the same thing with view so you have to be kind of cognizant of like what you're reading and and you you can potentially mix and match these things I think instead of saying data here that's you know an object that returns or a function that returns a new object I think we just use refs right so the composition API you would just use refs or you could potentially use reactives or stuff like that um the docs themselves like they have like a setup function here but the fact that I'm doing setup here um basically makes this entire block I believe be my setup function or you can declare like State and stuff like that um there's some other stuff that's kind of like confusing for a beginner there's like the V on directive but we use the add simple shorthand so they're I think in view there's a lot more ways to do the same thing which can kind of be overwhelming like this could potentially be Beyond following click and I believe it'll work the exact same way as it did uh before but it's just stuff like that just like oh it's kind of kind of confusing like which one am I supposed to use um so you might have to set up like a lender to make sure that you're using the proper ones there's also like models I do like the fact that we have access to 2A bindings if you use react and you want to have an input here like let's just go ahead and put an input like this and let's say we wanted to have this thing update some State as we typed into it well how do you do that well you basically say um the model I believe and you can point that to a reference so if I were to add a reference here and say const um I don't know I'll just say like name is equal to a ref of empty string let's just go ahead and import re-import ref because I deleted it but let's just go ahead and pass the V model to this and basically what I can do is I can render out the name here below the input and then when someone types like this oops let's refresh the page real quick now I don't know I had to refresh the page that's kind of weird um usually with next and react like this thing would have been hot module reloaded or would it refresh for me don't know if I had like a little bug but anyway notice that when I type into the input I automatically get this thing updated okay it's a lot more convenient it's a lot more concise than if you remember in react you'd have to add an on change listener to this like you'd have to say on change and then you have to do some I don't know some garbage like this where you get the event and you say like set name is e.target.value and you literally have that on every single input and then you have to go over here and say like this would be a value is equal to a name like this okay so there's some stuff in view that I do like it's just a lot more concise it's a lot more easier for a beginner to hit the ground running and start using because they have like these awesome helper things that literally every web application is going to need and bi-directional data flow is not always that bad as if you use it carefully so I think it's pretty cool and of course like view has the ability to pass properties between components right so if I had made another component here you can Define some props like this you can type them you can specify like if I were to try to bring this hello world component this thing requires a message prop so if I were to go ahead and go down here just kind of start with that I'll say hello uh world complaining now the messages are not very easy to understand if you read through this typescript error it's like you have no idea what this thing is complaining about but the issue I believe is because you're not passing a message here so I will say that I think the typescript feedback you get in react would have told you like you're missing something uh and it wouldn't be that obtuse to understand this error is very very hard to read for me I mean maybe for a beginner maybe for someone who's like been been doing this for a while you could easily tell what this is but like I can't I just can't tell so some stuff like that which I don't know if that's because of the composition API or that's just because of something I've done with the setup but that could use some improvement to have better error messages if that's even possible but it might not be just the way that typescript is kind of done with this stuff I'm trying to think is there anything else that I'm like missing like some fundamental things like we have computed so we have shareable store State main components we got props and we already kind of showed you events like at this if this thing wanted to emit some type of event I don't know if we still have that in view three like is there a way to emit an event from a compositional oh These are nice basically on your events you can say like dot prevent so like remember if you have a form like let's say we have a form here and you wanted to do something when someone submits the form like add submit equals you know run this function we can actually say dot prevent and that'll just attach a e dot prevent default so that it doesn't refresh the page right very convenient just to add a DOT prevent to to prevent the default behavior of something um I wish react had that it doesn't this is super nice and I have to like put it everywhere um let's see what else how do you I'm trying to see how do you emit an event up you three composition how to admit an event don't know if it's even possible okay looks like you can say Define a bit emits so if I go back a little bit at this point this video is becoming like a freaking tutorial about view but if I go back I can easily just say that this component emits a hello event and when you do that basically I think react that's another thing it's not complaining about this like I feel like this thing should have been required um kind of weird but now if I do add symbol we get a hello like maybe there's a way to say that it's required here I guess it doesn't matter it's an event so you can pick and choose if you wanted to uh listen to it um so hello and this is going to call a function like hello event okay let's just go ahead and make that and let's just print out some data that we get back which I don't have so I'll just go put data there go ahead and delete some stuff oh message is gone so let's just say like hello here so now inside the hello world component what we can actually do is I believe when we were to like click on something just add a click here and we're going to call hello now I don't know how you get that let's let's go down here and try to figure that out emit so you can actually get it by saying admit is equal to this and then we could say emit Dot let's see if we get any intellisense we do not get intellisense oh well obviously because I don't know what I'm doing if I did hello here I can then omit hello I can think I could pass some data to like one two three and I think that would then pass data which would be a number we should be able to print that out so let's try that let's click on go back to the page and let's click on something I don't know what I added it to I added a click to here here it is so now when you click on this thing the child component is actually emitting an event up parent is listening for that event and calling this callback function where this file can do whatever it wants when that happens which this isn't anything different from react I mean like you can pass a callback function as a prop in react and you can have the child component invoke it so I don't think there's anything different here I'm just kind of showing you a different syntax it's a little bit different but I do say I do think that since there isn't really a way to type that event that I know of like maybe there is like I wasn't getting the intellisense right so when I admit this thing if I wanted to make this have a payload that was required of one two three or some type of number I'm not really sure how to do that in typescript but I'm sure there's a way to do it I hope but uh yeah I mean that's like a quick little overview of view and kind of my thoughts on it and me just kind of talking about it and playing around with some of the features overall I like it it's concise um the reason I don't use it really is because I work with react full-time at work so I don't really want to invest more time learning something that I'm not getting paid for like it's fun to build some side projects on it or using it and it is kind of refreshing to do some of these things when I'm playing around with view on my side project um but again like I'm not getting paid to work with view so that's why I don't really make videos on view now same thing with svelt's felt is also very concise and it has like a really nice way to write code I think svelton view are very similar kind of but there's a lot more that I want to kind of play with at some point like I want to check out solid.js I want to maybe build out bigger applications using svelte well I know I talked for a while my overall recommendations is if you just learn like vanilla.js with like event listeners and whatever you just learned CSS and HTML using view is probably going to be the easiest step forward to like start building out components in highly interactive applications right it's a it's a lower learning curve in my opinion that go from vanilla.js and HTML CSS to view than it is to go from that to react okay um although you do have to learn some of this weird syntax and stuff which might trip you up a lot I do think that view is a lot easier with these single components and like it's just more beginner friendly and the docs are really great as well the react docs suck I'll be honest there's a beta react docs that are pretty good but the react docs as is like they're just not that good from what I remember reading through them um but I will also say that these view docs are kind of confusing when I look through them because they have like different ways to do different things uh they they show you examples with this setup stuff but then the way I've learned view three is use this setup keyword so it would be nice if the examples actually showed you like code that looked like this instead of all of this um so that could be very confusing as well okay here's an example it shows you right here here's an example and they kind of talk about why you can do it here like why the setup thing works but then I think if you scroll down they go back to uh oh no they start giving you examples anyway hope you guys enjoy my little talk rant about View and uh my thoughts on it again I like it I just use react so if you enjoyed this talk give me a thumbs up subscribe press the Bell icon and like always feel free to join me Discord if you want to find a place that you can ask questions that could help with your development Journey or talk to me directly have a good day and happy coding

Channel: Web Dev Cody

Views: 10,514

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: pH8wsqXgSu4

Length: 25min 20sec (1520 seconds)

Published: Sat Jan 14 2023