React Is King? My Reaction To Ben Awad On Vue.js!

hey developers today we're doing something a little different we are going to listen to ben awad he is a big time youtuber talks a lot about react and he has tried vue for the first time so i'm going to go and watch this video and do a little bit of a mini reaction for you guys we're going to pause it i'm going to show different clips of it so yeah stay and watch till the end hey and if you don't know my name is eric i'm a full stack software developer but i'm also really big into vue.js react node angular all the javascript frameworks so i thought this would be fun to see someone else's perspective so yeah so let's let's jump into it alright so let's see uh let's see what ben has to say today is the day you have been asking for it i said it was gonna happen eventually and i woke up this morning with purpose with meaning in my life i don't remember my dream but it was probably a divine message from evan you himself telling me today ben okay if you guys don't know avenue is the creator of ujs so obviously that's a kind of a funny little joke if you know who created vue it's the day that you try vue.js and i can't say no to that so here we are so i'm excited to try view because i've never ever used view at all and we're gonna see how it stacks up i'm now faced cool yeah so i mean anybody who's starting with vue is kind of in this position like what to do how do you get started so i really like this idea he's going to go ahead and google how to get started with vo so let's see what he finds out and they have 3x and beta and i've been hearing people talk a little bit about 3x so uh right now vue 3x is actually out it just was released last friday which is awesome um let's see what he chooses you know if i was him i would choose 3x beta but let's see what he does and i'm kind of tempted to just try 3x and see the latest and greatest from view so hopefully this does not backfire bite looks like the way to bootstrap our project view okay so right here i would say this is a mistake using uh veet i guess that's that's actually the way to pronounce it is probably not the greatest way to learn view i would say just stick with view cli or using view using a cdn would probably be my suggestion for most people but you know let's see how it goes with with with ben here okay let's see what we got here source app.view uh oh my view code is emo let's see if we can fix that maybe install an extension text highlighting let's go okay we're good now okay so perfect i mean he noticed right away that his vs code didn't have any syntax highlighting so like one of the first things you do as a view developer is definitely look for some plugins and installations i would also install sarah drasner's extension pack which actually has like two or three different view extensions in it that's one i always use but i mean just definitely looking in the extensions in vs code for vue and looking for syntax is a good idea look at that hello world counter example already done i say done but i just mean it's running now because i didn't actually make this yet displaying a prop here first thing i'm noticing is we do double curly brace okay yeah i mean exactly he's going through each part um this is a great way to learn just look at the sample app if you hit if he had used view cli he would have been able to seek on the same thing it does come with like a hello world type a component that you can kind of take a look at so that's that's great as well and then we're displaying our calendar okay makes sense this is a type message of the type string what's going on here is view using typescript or is this just the string object that it's going to make me pass a message in let's see so uh i mean i could answer that definitely people kind of get confused when they first see this props that as actually as type message but it's a way to so when you pass props down that you'll actually get errors in the console if the type that you pass down doesn't match the type that you kind of set inside your props has nothing to do with typescript but sometimes you know it kind of looks like that but it's not you could also not just put in the the name of it you can actually put in some more defaults you can put in like if it should be uh if it should be like a object and you can also put in if it should be a number you can do ranges you can do a whole bunch of things and make sure that when things are being passed down it it satisfies some certain requirement okay so here's us rendering hello world message and what happens if i don't listen to you and i make this message five what in the world and then it parses it out to be a non-string at least maybe here i think what i have to do is in my props i say this is a number or something yeah exactly so i mean he's in the right idea so you pass in the number if you put the prop as a number it'll pass in as a number you can also do things where your whatever you're passing in you can do a v bind to it to an actual property a data property and then pass it in that way but obviously um as i said before you're kind of this criteria is it's a string so you should pass in a string so the answer was right in front of my face but i just didn't read their little comment here i have to use a v bind that way it's a javascript expression yeah so if he sets it using v bind then it should work correctly let's see what what he does here so let's go back to our app all right okay i don't need to i'm refreshing but i don't think i need to i think it just auto well he's using v view cli auto refreshes i think v does too um depending on how you set up yep does its thing so what happens if i make this a string now what was that doing i feel like that was just prop types i'm gonna open up the console here yeah okay that's just their version of prop types yeah so i'm not a huge um react but exactly you can see since he's passing in a number but it's actually expecting a string then you have the warning inside the console like i said earlier and valid prop gotcha okay so that's useless okay okay two-way binding not bad i don't know if that's useless per se but i think most good developers would be checking their console i don't know ben i'll do four loops v4 why am i coding everything with strings this feels weird yeah so if you're in the view ecosystem yep you are using those strings there yep that that happens so what i'm wondering now is with this if i integrate their typescript support because i know you can use typescript with vue at least i think you can is how much like intellisense and stuff can we get with these weird string things add script lang ts and i have to get the feature extension find component okay so now we've got some language support things got some linting i don't have a to-do.id okay that allows it i wonder if there's something else i have to config for that so i made it to the end of the typescript docs and i didn't see anything about types for in the html bit up here which makes me kind of sad if they don't have it but i'm get okay so what he's saying here is that he's not getting the types inside his he's actually switched this component over to typescript and now he's not getting types inside his template there is a vetoer extension there's actually a setting inside that extension that allows you to do types inside your in templates so he just doesn't have that turned on so that's why it's not working so it does exist guessing i just probably missed it somewhere well hopefully there is a view expert watching this video that may know how to do this otherwise i'm just gonna have to live my life with 80 percent typescript support and maybe that's okay but it just makes me like a little bit sad well uh don't worry it's don't it doesn't have to be sad i mean obviously it does exist so that's good is there not a way to get typescript to infer that this is an event type i guess there's not a way in view that's kind of sad but maybe you could set the type on the on submit itself maybe not necessarily having inferred but you could set it maybe there is i mean i'm just a view noob what do i know i don't know what this type is well i know what this type is now some vanilla so i i as for that i mean yeah you can define it i don't know in fact i don't know with typescript support on there if that works i'm just typing the word class feels very weird it feels very weird that that's not there yeah we don't yeah view doesn't use class name like react so that's a little different with view offering a more intuitive api and improved development experience shots fired at redux but i'm glad it's more intuitive and a cleaner api let's see it i started doing the view x getting started and i copied this from their docs and i tried importing use from view and it didn't exist for some reason i hovered over it it says no exported member so i was like oh that's weird i'll just go google it and i figured i had to do something to do with view three because i'm using the beta or something right and i see all these articles talking about how you might not need ux with view three and i was like hmm you know what this sounds really familiar yeah so in view in view three you have the composition api so there are ways you can like use inject and provide and there's also other libraries that you can use with composition api to kind of create a poor man store so you don't need to use vue x i personally think you should keep on using vux with view three but you know there's a lot of articles saying maybe you don't need it i mean just depends on what you're using i i actually did a video a little while back in pina and it was a really cool store not using vue x and it works with u3 ux i'm just going to use the cool vue 3 reactive stuff this reminds me of mobx but kind of even cleaner than mobx because you don't have to wrap your components and like observer things so you can create reactive variables like mobx or create oh yeah and that's another good thing you could like use reactive variables too and not use vue x but you know i have to do a video on that it's a little complicated okay that's probably enough ugs for one day overall i really enjoyed it probably my biggest gripe would be with typescript and not getting like typescript things in the html template part which as we said before we know that that's just a configuration issue and like not for prop names like i want to tell me when i misspell a prop or something like that which may even exist they might have some kind of linting for that and i just i'm just a noob and i don't know about it yet and also like typescript inference would be nice for these things but other than that it was pretty nice like i can knit pick a little bit if i really want to like it felt a little bit weird to like write a string right but you could say the same thing you know they probably say it's weird to do curly braces like that if they're coming from or going to react and then also like this is like a small thing this was weirding me out why are they the same color you know once again i think that's probably just like a setting i bet you can install some extensions to make things different colors i i don't know why it's not all the same color maybe it's a part of using the i don't know anyway i did like it and the api is very clean i enjoyed like how little boilerplate there was i really enjoyed just mutating stuff view is definitely on par as felt for me they felt very similar but i've only really done the basics of both and i'll probably develop a preference for one or the other after spending a little bit more time with each but uh just between you and me react is still the king so i mean that that's it that it's kind of funny he still gave a little jab there at the end but you know it's i think it's personal preference and i like how he was able to dive in and understand the view concepts really easily and that's what a really good thing about vue is you can get up and running super duper quickly and i think that ben saw that through that through this whole video how easily it was to get up and running uh you know other than maybe some configurations on his syntax and his id and maybe making sure he gets his types in his in his uh template i think he had a pretty good experience and i think everything worked really well uh you know i think that he really understood the concepts pretty well and i would have really liked if he would have jumped into ux a little bit more like i said i think it's still well worth using it's not something you have to use all right so well that's all i got today i guess if you guys like these type of videos leave a comment below and let me know you know i was really cool that that ben got to choose you and appreciate his opinion on it [Music] thanks [Music] you

Channel: Program With Erik

Views: 56,729

Keywords: Ben Awad, Ben Awad React, Reaction video Ben Awad, Ben Awad Vue.js, Vue.js Ben Awad, Vue 3 Ben Awad, Ben Vue.js, ben awad vim, ben awad angular, ben awad typescript, Learning Vue.js with Ben Awad, Program With Erik, Program Wihth Eric, Erik Hanchett, Vue.js Reaction, Vue.js vs React, Vue Vs React, React vs Vue 2020

Id: YXvZZh6ctvE

Length: 12min 48sec (768 seconds)

Published: Mon Sep 21 2020