Trying Vue.js for the First Time

today is the day you have been asking for it i said it was going to 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 is the day that you try vue.js and i can't say no to that so here we are and i've said for a little while now that if i wasn't such a fan of react or i didn't want to use react that i would probably be using vue but maybe like the past month or so it kind of switched in my mind a little bit what happened is i tried svelt and i kind of liked it and that might be my number two right now 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 with the eternal question that plagues all beginners and that is how do i learn view what tutorials should i watch what course should i go through and i'm gonna let you in on a little secret right here this is a pro tip that only senior developers know about and we're going to just head over to my best friend here google.com and i'm just going to type vue.js and i'm going to head on over to the official site and i'm just gonna go to getting started and follow this guide and i'm immediately faced with a dilemma it looks like the current version is 2x and they have 3x and beta and i've been hearing people talk a little bit about 3x and i'm kind of tempted to just try 3x and see the latest and greatest from vue so hopefully this does not backfire bite looks like the way to bootstrap our project view hello world 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 look at that hello world counterexample already done i say done but i just mean it's running now because i didn't actually make this yet so let's take a look at the code for just this counting example so i see a script tag we got an object and this object has a name of our component i'm guessing the props which is a message and then we have some data here where we're returning a count of zero and then we're just straight mutating this count with what looks like an on click handler okay use at sign we're displaying a prop here first thing i'm noticing is we do double curly brace okay 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 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 okay so i this is me before i saved it i save it and prettier made this into a string okay hold on maybe i need to do this is that how i pass dang it how do i pass numbers so i'm in the props documentation and it looks like they just passed numbers as strings 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 and it parses it to a number but that's just my guess sorry let's remove that so now if i say message plus 5 that displays 55 okay so now what if i say this is a number no okay i was wrong so the answer was right in front of my face but i just didn't read their little comment here i have to use v bind that way to javascript expression 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 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 and valid prop gotcha okay so that's useless okay okay two-way binding not bad not bad it's easy to toggle the presence of an element two if seen v if oh does it handle the null case for you let's go easy peasy now do four loops v4 why am i coating everything with strings this feels weird so what i'm wondering now is with this if i integrate their typescript support because i know you can use typescript with view 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 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 i only saw stuff within the define component which makes me kind of sad if they don't have it but i'm guessing i just probably missed it somewhere let's go to our handy-dandy google friend view typescript html part so i spent a whole two minutes googling this and i'm not seeing anything so 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 typescript support and maybe that's okay but it just makes me like a little bit sad all right i think it's time for us to try making our own to-do list and we'll use our v model and we're connecting it to text and bam we already have our form done now we just push on this dot text and this is going to be an object so this is going to be text and complete it's going to be false parameter e implicitly has any type 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 there is i mean i'm just a view noob what do i know but because i'm passing it in here i can't just like stick a stick of lamb to there ishmael form event and so here's the thing and types and react how i would figure this out is i would hover over the handler and the handler would tell me what the param type is but i don't know how to do that in view i don't know what this type is well i know what this type is now some vanilla css haven't seen that in a while i'm just typing the word class feels very weird it feels very weird that that's not there f4 does not work even though it doesn't air out but of course it doesn't air out because that works as well and it doesn't do typescript checking but i forgot about that stuff so i was just like you know what it's not mad at me of course it's okay okay let's go back to correct syntax now to do dot complete is equal to not to do dot complete nice it actually works i like writing stuff like that okay that's text is actually kind of nifty so i guess if this variable is true it shows a class called active bam piece of cake what i've heard is really nice in view is their state management so i want to try view x next so let's hop on over to the docs information for react developers hey that's me so you may be wondering how vue x compares the redux you know what i am wondering that how does it compare redux is actually view layer agnostic view x is different it knows that it's in a vue app this allows it to better integrate 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 view x with view three and i was like hmm you know what this sounds really familiar i'm like when react contexts come out all the articles are like do you still need to use redux with react context and they're going through the same thing in view three so i thought that was kind of funny so anyway i'm ditching view x i'm just going to use the cool vue 3 reactive stuff this reminds me of mob x 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 reactive store things and then i just pass the source of truth object to my view components return it here this is my first component and then i have access to that count and then i just literally mutate the count here like nobody's business right and then just increments it and then i also have this component one over here which is the exact same component and they're just sharing the state between the two of them right and then when i increment this one it increments that that's pretty dope that was actually like zero boilerplate whatsoever to like access this i really like that 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 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 i want i want my prop and my prop data to be different colors that would be nice but anyway i did like it and the api is very clean i enjoyed like how little boiler plate there was i really enjoyed just mutating stuff like this was probably my favorite part of the entire experience was just being able to mutate a single to-do item and then it just magically re-renders and handles that entire thing for me that's super nice view is definitely on par this 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 just between you and me react is still the king you

Channel: Ben Awad

Views: 243,178

Rating: 4.891634 out of 5

Keywords:

Id: 3OhLUYNw0TI

Length: 11min 58sec (718 seconds)

Published: Mon Sep 14 2020

Reddit Comments

[u/[deleted]]

I watched it and it made me giggle

This boy is very opinionated. It’s almost like watching someone take ten minutes to tell you they like react more than anything else

[u/grafilicious]

so are there solutions to the wishes he had about the typescript support?

[u/vutran951753]

well with vue 3 + typescript + render function = fully support now..

[u/wherediditrun]

Comping up next: a hammer used by a saw carpenter!

[u/DOG-ZILLA]

I wish Vue 3 was in a full stable release for him to try. Things are in limbo right now so it’s probably not the best time to try and Google your way around how to do stuff in Vue. Lots of blogs are mixing Vue 2 stuff with Vue 3 and whilst both API’s are supported, I can see how it would be a little more confusing than it should be to find the consensus.

[u/LessThanThreeBikes]

It sounded like the OP enjoyed the language, but didn't like the language module that he was using in VSC.

[u/wobsoriano]

I myself have been coding vue since 2016 in my recent company, and shifted to React with TS last year. I cant go back to vue. Though I tried the composition api, I really want it to have type checking in templates. Without jsx.

[u/DeltaFireBlues]

Why the comparisons? Learn all 3 major frameworks. Become a JavaScript developer rather than just a react and this way you’ll always have a job. Once react goes away and a new JS framework comes along it’ll be a breeze to pick up

[u/OldSchoolBBSer]

I enjoyed this. When learning something new we come in with preconceived ideas of how something might work from past experiences. This was interesting to see first impressions. No clue why some thinking opinionated. Initial impressions aren't really opinions, they're.. well.. initial impressions.