Trying Vue.js for the First Time
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- I code React all day every day, but today I decided to change it up and give Vue.js a try for the first time.
#benawad #vue
----
Checkout my side projects:
If you're into cooking: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Twitch: / benawad
Medium: / benawad
GitHub: github.com/ben...
Facebook: / benawad97
LinkedIn: / benawad
Instagram: / benawad97
TikTok: / benawad
----
Follow me online: voidpet.com/be...
#benawad
![FizzBuzz - You Suck at Coding [0]](http://i.ytimg.com/vi/mZWsyUKwTbg/mqdefault.jpg)
![FizzBuzz - You Suck at Coding [0]](/img/tr.png)
![[TH] VALORANT Champions Seoul - Lower Bracket Final - LEV vs TH](http://i.ytimg.com/vi/fyYkI80GG4o/mqdefault.jpg)
The church of React will not forget this
😂😂😂
🤣
🤣
🙂😁😂🤣🤣🤣🤣🤣
Have you heard the word of v2.imba.io ?
next video: trying angular for the first time (GONE WRONG) (911 CALLED) *I GOT SICK*
Found u
Someone stole my kidney I wokeup married with 5 kids I now live in germany Angular gone very wrong
I'm actually tempted to try Angular after I tried NestJs on the backend. And yes, I got the joke xD
lol, got u
💀💀💀 I'm dead 🤣😂
You're gonna get a lot of vues on this video.
Damn that’s a good one 😂
Nice one😁
@@gecko499 only from seething react fans :P
😂😂😂
You're gonna get a lot of Reacts on this comment
Almost every major programming TH-camr: Does relevant and essential programming videos.
Techlead: How I clean my ear wax with gold (as a millionaire)
Ben always has a smirk like he is making inside jokes with himself all the time. So meta!
Typing "class" into HTML feels veird? :D Typing className is veird!
He got disturbed by the basics ha ha
exactly!!
className is very weird
`class` is a reserved word in JS. If you have to write HTML on your JS I much prefer to avoid the language reserved words :)
www.ecma-international.org/ecma-262/6.0/#sec-keywords
@@neochumbawamba7096 The point is, the Vue template allows you to be closer of the standard HTML syntax
As a vue fan I was on the edge of my seat during this whole video. I dont usually say that about youtube videos (let alone programming ones). Glad you liked it
Can't wait for "Trying Angular2 for the first time"
HyperDenAbramov
@@hatrick3117 Dan Gaybramov*
Also "Escaping from the React prison"
That ain't gonna happen 🤣🤣
Ain't gonna happen.
7:07 - Well, I know what this type is now *typing "any"
That's where I smashed like btn
LOL same here
shahahahaha))
hackerman
I couldn't stop laughing
He lighted green light in the background for making "Vue mood" .
I'd like to see red light in the background as well, if you what I mean.
@@alexmercerind nO
1:47 “uh oh, my vue code is emo”
“That’s just their version of prop types” “Okay, so that’s useless” 👌😂🌹
3:12 you won't have type issues if the user doesn't even know how to pass the wrong type, thats a big stonks right there
😂😂😂
Haha 10/10 solution
Next video: "React dev codes a Vue crud app"?
Would be fun and very clickable!
1:46 "oh, my vue code is emo" LMAO
me: oh, he's talking about vue, maybe he will do one about svelte
Ben: Ive been trying svelte
me :0
Ben: and ive kind of liked it
me: and you didnt make a video about it!?!?
Svelte all day!
He streamed a bit on twitch...
@@antonshtipliyski 😲 i need the linkkkk
there will probably be some future videos on svelte, sit tight ;)
Svelte life is silky smooth
What I like about Vue is it's simplicity. Templates are pretty much plain HTML and data manipulation and events are pretty easy
7:05 "Well I know what this type is now". You got me laughing there 😂
The “I don’t know what the type is... I know what the type is now” made me laugh so hard because I literally did that a few minutes ago
it's kind of weird to hear people saying it's 'weird' to use "class=xxx" instead of "className=xxx" in their template.... lol
I also am used to typing class since I didn't use frameworks
Typical React "devs" that never learned HTML standards
@@OzzyTheGiant You sound extremely obtuse
This is what I did last xmas - the two biggest things that make vue stand apart from a *cultural* perspective IMO;
* progressive "incrementally adopt" approach to functionality (Ben you probably noticed this, you could just 'add on' as you needed and the docs were right there telling you how to)
* A solid API that hasn't really changed since 2016, no real major deprecations ( a couple of attempted deprecations but unlike React they actually consult the community on these matters!)
Also - did you know vue supports JSX? I think that's how you might get your typescript checks working.
7:07 "Well, I know what this type is now."
😂 That's hilarious :D
Was looking forward to this :D
The reactions are hilarious 🤣🤣🤣🤣🤣
I'm a recent Vue convert myself
6:55 Good ol 'any' solving problems since the beginning of times.
not considering myself a vue+typescript expert but I have been working on vue+typescript for more than a year.
So the way it works is that you don't need to assign types when you are in the template. You need to define that when you are in the script. And part of it is because, unlike react, vue complies temples like angular's HTML.
In the template, it's JS only, no TS, as far as I can tell.
You absolutely can use a lambda in the @click="".
Event type is just `Event`.
async changeLanguage(e: Event) {
// (e.target as HTMLInputElement).value
//...
}
I will say, I used Vue before React... going into React I hated it, but the more I used each, the more I liked React due to it's better typescript support.
Vue is awesome. Especially so for those that don't write a huge amount of JS, or don't want to use TypeScript.
But React is far better if you are interested in using TypeScript.
Same ^
@@MarisaClardy The problem with Vue right now is to rename symbol. Renaming a variable from both template and script file is horrifying. String based emit is awful as you can be prone to error when using this.$emit("your-parent-function"). Vuex(Vue's Adaption to State Management) typescript support is still awful. Luckily there is a package called nuxt-typed-vuex it does give me intellisense, but configuration is hell as fuck. Using typescript with props gives you an error.
Vue 3 doesn't do the same as it still doesn't support Typescript out of the box. Vue is easy, but as your project goes, you can't expect to scale your project that well with Typescript.
you need a skillful vue developer to know what or when to use these v-directives instead of an IDE helping you what you want to know without disturbing other devs.
Agreed!
@@martinmalia7228 How is it related? we are talking about the strong typing inside the templates.
Thanks for showing us to all React developers that we’re not really missing anything.
True. Functions as string === no
@@filipemedeiros8238 its not really strings right? its just the indicator for the start of javascript. Can be { can be " but yeah, the choice of " for start of javascript is poor!
@@Jossnaz ahh that changes thing actually. But like you said, it's still weird. Well as long as TS and linters can work with it absolutely normally, fine by me I guess
Jump cutting out all the intermediate typing and reading the docs is AMAZING. Love it. Most of us don’t need hand holding.
Vue 3 was recently released built with Typescript in mind and has first class citizen support.
7:06 "well I know what this type is now" hahaha
10/10
When using Vue you don't need to use Pure components/React.memo as it internally takes care of the dependecies. That's the coolest thing about vue.
Vue is great! I am interested to see if you think react is still the king after being in vue a little more extensively lol There are some great vue extensions in vs code and vs co-sign that help with some of lifting/auto complete stuff you mentioned :)
that "reactive" state management from vue3 is literally laughing out loud at all my suffer to understand Redux with only one line
I would recommend you to just read about Vuex. I love how well-structured the docs from Vue libs are and how easy it is to understand stuff, and Vuex will definitely help you better understand State Management libraries. Redux will make much more sense after you understand Vuex.
There is nothing wrong to understand flux architecture later on you may need it
what chrome extension was he using to get the keyboard shortcuts on chrome?
I found it btw its vimium
As a JSX fan, when i started using vue it felt really weird to me, and the the thing that bothered me the most was having my template at the top but when you put the script tag at the top and start using vue with composition api or typescript, man it was somehing else, i fell in love with it right after that
As someone who has worked with several templating languages across different programming languages, it always irks me when people feel uncomfortable with other syntaxes. I feel a good developer should extract the concepts of templating and be able to work with different ways of templating. Also, as someone who prefers OOP for better code organization, I think Vue 3's composition API has been a disaster because it's just a ripoff of Reacts disgusting hooks and this is leading to messier code.
This could easily be renamed to `Trying Angular for the First Time`
In fact, vue is like react and angular having sex, and it is their baby
It’s funny he likes the template syntax so much because it’s a lot like Angular’s.
The day he switches to angular. He'll go crazy.
So... When we are going to see a red light in your background? 👀
I choose Vuejs as my first front end framework to learn. I pass the course on udemy and start use it at work.. funny thing is that version 3 came right the next day after I have finished my studies. Now I will finish mvp at work and will do migration to vue 3
vue or react finally :) ?
@@emdadgar_official you can build cross platform with Vue now, any platform even on desktop and mobile, and backend is handled with Nuxt and/or Appwrite. I am building an MVP with Vue, Nuxt, Quasar, Appwrite and Django all by myself, in microservices and apis, if it was another stack I would be so slow.
Vuex is one of the main reasons I prefer Vue over React. Vue and vuex are made exclusively for each other and are not interchangable with other frameworks - which is great - much less friction when modifying state.
“That’s just their version of prop types. Ok, so that’s useless”
Seems about right
Vue state management feels like a breath of fresh air after dealing with old react state for so long. Hooks definitely helped but still not at Vue level.
Yeah?
Hooks ruined React for me, I shouldn't have to think about how changing state and side effects affect rendering other than if a value shows up on the screen or not.
Vue was my favorite framework about a year ago. I came back to it recently and man, its gotten way more complex!
How so?
@@samuelmorkbednarzkepler First, documentation and examples are now split between V2 and V3 which makes finding help/googling harder. It especially makes starting a new project more challenging because you want the newer, fancier stuff in V3 but need to know in advance if all the packages you want to use work in V3, since many don't. Second, before it felt like starting a project was like 2 cli commands and thats it. Now there is way more configuration you need to do with Babel and Webpack. Creating a blank project is still easy of course, but as soon as you try to put in new packages or third party additions like google maps or just code you found online you are almost guaranteed to run into Webpack/Babel errors which are a nightmare to debug (especially for the aforementioned reason of there being solutions that work for V2 but not V3 or vice versa)
Haha! Nice ending ^^ I'm a react webdev about to Start a new position as Vue webdev... after watching your video I feel more ready and can't wait to start that wonderful journey. 🙌
Thanks for sharing!
From a theoretical POV flutter is superior
Awesome video - really good to see how someone else explores and learns new tech.
This dude learning in a few seconds what took me a whole day
*few seconds + the years of frontend dev I already have
@@bawad How many years? :O
@@leisiyox I have about 1 year in vue now, About 5 years in total but mostly jQuery/Vanilla JS before vue. Like Ben said I once you have years of front end experience its easy to bounce to another framework, they all have well we got this thing like this thing your use to AKA redux vs vuex. Makes the learning process much easier when your up to date. Coming from jQuery/Vanillia JS -> Vue was a bit odd and took learning but going from Vue -> React was a lot easier. Really do like Svelte latley though, but I enjoy writing SPA and for that reason Vue is better than Svelte I've noticed. Not that its not do-able but it just seems way easier and pretty much baked into vue with vue-router
@@ZombieSaysUploads Based on your experience... do ppl still hire for vainillaJs/jQuery for new developments or its just for maintaining existing websites?
It seems that everyone just wants a frontend framework with SPA, CMS like wordpress or JAMstack (dunno if its as popular as word of mouth say)
How valuable is to learn the vainilla stack before actually jumping into a frontend framework or library ?
@@leisiyox I think learning vanilla javascript is pretty much essential to doing well in a new framework like Vue/React. If you don't understand JavaScript it is just that much harder to learn. My company still to this day uses jQuery so yes there is plenty of work out there that is still using js/jQuery. I would'nt say jQuery is a must know but if you wanted to get into jQuery is extremely simple and just saves you time on regular javascript we mainly use it for ajax & document listeners. Now my company is a special nut case as we basically have made our own JS & PHP framework which is actually nuts, I love it and hate it at the same time. We also use handlebars which is just a tempting language once again very rare to expect someone to know.
As an Architect at my company I am involved in hiring whenever it comes to our specific area of the software (ERP). And I would prefer to see someone have JavaScript knowledge over framework knowledge. And we have jQuery on the ad but really if you did'nt have jQuery experience I would not care, if you did not have handlebar experience I would not care. If you can answer some core JavaScript questions you can figure everything else out. (I will just leave it front end as we don't hire just front-end but full-stack -- But that is what I look for front-end wise)
Been programming for a year, using Vue for a month and its the first time I watch a coding video that makes me laugh from time to time, thank you.
Came for VueJS stayed for Vimium
The directives remind me of AngularJS days!
this video is super chill just started out learning coding I like the video format your doing. its help me understand better the mind behind coding
Anyone know the name of that util that marks the links with what I assume to be keyboard shortcuts? Can be seen at 1:10
Very interesting, might make a React-ion video on this!
7:05 this was hilarious
when you assign a property to v-bind directive, if you want to send a string you would do: v-bind:prop="' ' Hello ' " also, you don't need to write v-bind you could do just :prop=" ' Hello ' ", great video Ben! I've been following you for a while because I want to learn React, thanks for sharing your content is gold.
Vue is hands down, no questions asked so much better than react. React has too much crap going on with it and too many ambiguities. Too many libraries to choose from in react and it makes the developers exhausted from trying and selecting which ones to use. And react third-party libraries keep changing. Vue makes it easy and has the core team working Vue-router and Vuex. So you know what to use right off the bat. You DONT need to learn JSX, so that’s one less thing to learn and think about and being a developer, this matters a lot. Vue is so much easier to understand and pick up and debug because it’s so easy to understand relative to how complicated react is to understand. Most react developers have no clue what they are actually doing and they are just using react because everyone else is. Vue, you can pick up and fully understand in less than a day. Whereas, react it could take weeks to months. Vue also isn’t controlled by any corporation like react is with Facebook. The Vue team listens to the developers and they are on top of things. Lastly, Vue got to where is it without the backing of a large company name like react with Facebook and angular with google. This is because it is THAT GOOD by itself and didn’t need to be back by a big company to gain popularity. The rise in popularity is purely organic. Vue is the best front end framework on the market in my opinion. I used to be a react dev for 4 years and now I’m fully switched over to Vue. React is a fucking nightmare to work with and when I switched to Vue, I felt like all my problems were solved! LOVE VUE ❤️
Agreed
I like vue, but I prefer react, because it is focused on immutable style of programming, also I got used to the JSX syntax. Both vue and react are dope.
Nah. I don't want this magical if and for statements, along with shit TypeScript support. React is still king in those categories.
Can someone explain the value of reading the docs when learning. You can't intuit everything.
Angular and Vue are used by the same rebels who do red sql.
I prefer for(...){} above
Hey Ben, when React is still the king for you, it would be very interesting to tell, what do you like more in React.
How did you enable that characters on each controll of page. I wanna do the same. It's convinient I guess
1:12
Hey man, it's called Vimium, thanks to @Vinicius from this comment section for pointing it out.
@@benyamynbrkyc It's perfect thing, thank you. I'll leave it here th-cam.com/video/t67Sn0RGK54/w-d-xo.html&feature=emb_logo
@@benyamynbrkyc This is awesome! Thanks!
I was just about close the video b4 the end bro but I was tempted to watch.
Just to make it clear, React is still the king!🔥🔥🔥
Hey can I know how did you control your browser with keyboard keys only.. which software is it?
Why did I laugh so hard at "My Vue code is emo" 1:47
because the way he's saying it is funny af 😃
Him: i hope theres a vue expert watching
Me: oh yeah thats my friend from school
Using vue with webstorm is heaven
I enjoyed so much React but when I got a project using Vue....boy..... it's so cool!!
If you want more typescript, use only the vue setup function with the composition API. You can replace data, computed, methods, etc just by returning object from setup function and it has better typescript support. I’ve fully switched over and I’m not going back
"Let's just head over to my best friend, google.com"
Did I just hear that right?
Weird how much YT algorithm loves your content
FYI: the use of v-bind: isn't necessary. You can abbreviate it by just using :
(E.x. :msg="5")
Make a series called “Ben Tries” or something. Svelte next??
Well before that, he should do a video trying Angular
Try adding vue-class-component and vue-property-decorator. I think that takes Vue to the next level.
Great move dude! You gonna love it!
You are the best React teacher on youtube nowadays
It's incredible how in one year. You beat TraversyMedia, Web Dev simplified, Net Ninja and Dev Ed in quality of content
I can't believe these guys have more subscribers than you
You made me realy love react and typescript, and you are supersmart aswell
I think only one youtuber, who is close to you is CJ Garden
You should do Code Catas with him .
That would be clash of the titans for me :)
Sorry for bad english and Thank you for superGreat free content.
I was wrong about you. I'm sorry
He is great. V from Codevolution is great in content delivery too. With react
Me: "Vue is now the king"
I'm so happy Ben is experiencing the exact same feeling I had when I was trying to make TS works in Vue lol
Ben :- My best friend is google.com
Also Ben :- Hates Google's friend Angular
I like vue because it is different enough from vanilla JS that it doesn’t feel like I’m replacing JS with a framework. As a proud vanilla js developer I take pride in that, as opposed to some other frameworks that are sort of a different version of JS and it feels like I’m sort of undoing What I’ve learned. I prefer something that compliments my current JS not something that completely takes over it
welcome to the good side
People are still talking about there being only one king. Open your mind people, the market is so big that you can't just have one King.
Currently you have enough capacity for four kings or more. Let's say those kings are Vue, React, Svelte, Angular (Respectively XD)
I think by comunity and other xy ranks, React is king, others three are princess
@@jurajhecko4889 I will wrap this up with the following.
You find people who like React and people who hate React.
You find people who like Angular and people who hate Angular.
But but but, you can never find people who hate Vue. Everyone so far loves Vue after trying it.
Still there many other frameworks who are out to be not worth learning, but the top three are all worth learning and you can find jobs for each one of them.
That was fun. I'd love to see more videos on Vue!
Hi Ben. How do you show the shortcut keys for each link on the page at 1:10 ?
it is an extension called Vimium, I believe
Can you make a video to tell us why react is still the KING ?
I like your videos, I mean your style, so funny yet useful :D
Svelte is awesome. So little boilerplate and encourages you to try to keep your apps small without preventing you from using libraries if you wish. Great balance.
I find alot of devs, simply won't like that because they can no longer pretend to be smarter than the next dev. I'm a new developer I picked up Svelte and Vue within the first hour of reading the docs.
Love how you just dive in!
The framework itself has typescript support, but it was introduced in 3.0, which was officially a few days ago. So some of the toolings may not work as expected. The documentations, browser extension, Vetur are all being updated still. It literally came out a few days ago, and since Vue 3 is new, there aren't a while lot of people who are expert at Vue +TS
TypeScript has existed in Vue since 2.0 but the most efficient way to use it in Vue 2.0 is to adopt the Class API
Enable VTI to add the type support in the temple
This is cool and all but I'll stick to my pseudocode for web dev
What's that thing that you're using to use your keyboard to click buttons?
I want to know too! Please tell us
I may find it: Vimium
@Ben Awad +Ben Awad
Hey. I've been intending to explore this stuff today. So, your video forced me to start. Thanks
Damn I am going to search your view about vue
My experience with frontend frameworks so far is that vue is the best all round framework, react is just as good for highly technical teams, angular is just a bore and svelte was promising until i figured out you couldn't really easily mutate slot content the way you can with vue.
Vue3 has a way to go with typescript, specifically tooling, vetur needs better typescript suppprt in templates. But the core of vue3 is typescript now so the future is bright
The reactive stuff instead of vuex is fine but with VueX you can make it more scalable and allow you know where mutations and actions before mutations happen. Keeps your code seperated and ensures that you can trace back any bugs that may arise.
Yup unless you are making a hello world app never mutate state directly in the component
I love this! live learning, and it looks like Ben loved Vue, RIP react
The Vue syntax is very similar to Angular. Maybe He'll like Angular if he tries it.
I know this video is ancient in TH-cam time, but: the reason you're not getting IntelliSense/code completion in templates is because the Vue extension is just a simple grammar for syntax highlighting, not a full-on language server. To get all the bells and whistles you would need something like what Angular Language Service does for Angular templates, but 1) it's really not a trivial thing to implement, and 2) most of that effort wouldn't translate to other editors/IDEs, which makes it sort of a questionable investment of effort.
Immediately after I click on the video,
I check the date.
"It's not April 1!!!"
Hey Ben, what's that feature you used at 1:09 that assigns some characters to everything on the screen?
If I remember correctly it's called Vimium
@@mecomputer100 Thanks a lot, it is indeed Vimium :)
Found it, thanks to
Benjamin Brkic & Michael Gitart.
It's called Vimium, thanks to @Vinicius from this comment section for pointing it out.
th-cam.com/video/t67Sn0RGK54/w-d-xo.html