Это видео недоступно.
Сожалеем об этом.
Web Components Crash Course
HTML-код
- Опубликовано: 16 мар 2020
- This is an introductory crash course on web components including custom elements, shadow DOM and HTML templates.
Code:
codepen.io/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Course Links:
www.traversyme...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
If you want to look at some more in depth examples that are still pretty understandable, check out - github.com/mdn/web-components-examples. I know this is a lot to build some user cards, but the point is to show you how to do it so you can build bigger and better things :)
Awesome! I recommend reading "Please consider not adopting Google WebComponents" available on Hacker News.
Please do a course on web components with story book, Tree shaking bundlers
@@ebol08 Read "Web Components VS Frameworks". It's an article I wrote on Medium a few years back.
You might be interested in StackBlitz. It's basically VScode in the browser. It also has a bunch of pre-built projects templates and a live code viewer built in. Pretty much looks like what you have set up there except you wouldn't need to split Code and a browser or run a local server.
@@ebol08 I dont like this, it honestly feels like google is attempting to make the web into their own personal app store...
If you need a video idea then I would suggest debugging code. I haven't seen a tutorial on your channel about it and I don't know how to use VS code debugger.
@@budket2513 That is a great suggestion. I would love to see that tutorial and it's (Brad "the alien" Traversy)😁 My gorgeous friends. 😁
that is a very good suggestion
You could do an entire channel dedicated to "deep diving" through visual studio code. It has so many features it's mind blowing.
Great idea, looking forward to that crash course!!
I don't really know how to use the debugger of vscode.
Brad is making sure we stay sharp during the pandemic! Appreciate it!
Yes, definitely. As much as it sucks, take the time to improve knowledge :)
@@TraversyMedia Is this a similar process as to how some parts of Angular and React are written, the displaying of it at least
Can you imagine it’s been year already?
it's like I wasted my time watching other web tutorials, but since I came across your Traversy Media channel, I have become fans and addicts, thank you, you do well and clearly explained, we expect more from you.
Geez hold up, why don't you dig out the stuff reading docs and practicing ....
And then trying to lay it all off in a video.
And then someone comes along and say we expect more from you. Keep up.
Give the guy some hold off....
Your tutorials are great! You provide comprehensive explanations of WHY and WHAT which most tutorials skip or skimp. I really appreciate how you don't assume your viewers know certain things - THANK YOU
I have been a programmer for about 20 years and have been watching your videos for several months.I mostly do java backend development, but use other languages as needed. I was recently tasked with doing my first fullstack javascript project. Your videos have been extremely helpful in allowing me to get up to speed quickly on the latest frontend techniques and increasing my versatility in my day job. Thanks for putting these videos out there.
today I watched a video about web components for the first time and I didn't get any of it. so I look for it in brad's channel. you cannot imagine how declarative and easy you make the stuff that you teach.
Brad Traversy continually giving his expertise and time to the community. This man is the rising tide that raises all ships.
Brad - I watch a lot of videos on RUclips pertaining to Web Dev, and there's a lot of content out there, but your content proves to be by far and above the best I've come across. @2.22M subscribers, I think I'm not alone in my views here. I'm grateful you continue delivering these great crash courses!
This is one of the most beautiful things I ever see on web development! Awesome crash course as always!
I'm so happy right now... I love how you always follow through on things Brad. You said you'd do it, and here it is!!! A video on Web Components (You promised this in your Vue Crash Course 😄). Thanks for being so Awesome Mr Traversy. My Hero and the darling of the global dev community... Stay safe, healthy and blessed always Sir 🙏, you and yours.
Banky K thanks 😊 same to you my friend.
Nice video. But removeEventlistener() needs to be called on an element with arguments of which event to remove and which function.
was looking for such comment. His implementation has a memory leak
true
Web components are really awesome, they make you have that component based structure that are in javascript frameworks and makes writing html less painful, instead of having to copy the same piece of code each time, thank you Brad
If I'm searching for tutorials on a subject I want to learn, and I see that you've got one on it, I will always watch it first. Great job as always on this.
Yes, I needed this! Brad, you make everything look easy. Keep up the great videos!
Thank you Brad for this very cool web component intro tutorial, I've learned something, now web-api is getting powerful each day, I think in the near future single page application is gonna become part of browser, just like vue, react, angular, so there is no need to learn those fancy frameworks, native browser api is gonna takes care of everything !!!
I desperately needed this. I know react but I got tired of not knowing how to correctly answer "Do you know how React works?" This has definitely opened up my understanding.
I had gone through a lot of blogs before finally youtubing about it. Nothing beats this tutorial. Now I can go back to those blogs and finally make sense! Thanks man! This is awesome and much appreciated!
That’s a very useful tutorial like always.
After watch your video “What Learn Before a JavaScript Framework”, I came here cuz I didn’t knew anything about components, and this video was very helpful. Im doing your course Modern Javascript on udemy and it fills all of JS “gaps” needed to learn Angular (that I need cuz of the work)… Thank you so much Brad, you have been blessing us with very useful content for free. May God bless you back.. ❤️ from 🇦🇴
Been all day just about doing one of Brads tutorials....FOLKS for the price he sold it for.... I don't know how he stays in business....but I am enjoying the heck out of it for $11.00. I been at it for 3 days and got 1/4 of the way through 1 series, bought 3. The level of teaching versus price is way off...but I do appreciate it for sure....AWESOME JOB Brad. 👍👍🐱💻
Your way of explaining things step by step and the art of breaking things in little understandable parts is amazing.
It make things a lot easier than they actually are!
Thanks❤️
every time I am starting in a new concept I like to refer to Traversy Media, never disappointed.
This is amazing! In case you guys didn't know, RUclips is made with web components (no react, no vue, etc)
reeally?
@@majidmoradi5952 Yeah! When you use the Firefox Devtools to inspect the DOM you can see custom elements definitions all over the place. I think RUclips uses Polymer for its custom elements. Some examples of the custom elements used in RUclips are ytd-app, ytd-page-manager, ytd-comments, ytd-popup-container, yt-page-navigation-progress, etc. You can inspect the DOM yourself to check all of those out
As a Californian, I could listen to Traversy say "dra-wer" all day! 😆
Love your mission and your execution, man. Thanks for all the lessons. 👍
This is so helpful, thank you. Been using react for my web components until recently when I was asked to use just vanilla js. I was confused, didn't even know that was possible. Brad swoops in to save the day again. Thank you.
That is why I like. Vanilla Javascript and components . Thanks Brad!
Incredible Video - I think web components are the future, they will eventually replace React Vue Angular etc
So this a very important topic, they are quite a challenge to teach, because they are so powerful .
This is by far the best explanation I have ever seen of web components - in both video or text.
So clear so concise, amazing how much ground you cover in less than 30 minutes, custom elements, shadow dom, html templates, slots, styling and interactivity.
Well done and Thank You Brad.
This is what they said back in the days. Literally no one uses them anymore lol. Awkward to work with
Finally, for many years of using "John Doe" as a test value. We now know what John Doe looks like 😂😂😂 Kidding aside ... thanks Brad! this excites me to jump to my computer first day in the morning to try this out.
Different never knew this existed, never know when I would use it. Just love following along with your video's and banging out the code.
BEST Professor of This Planet.
Bishal Sen HDRI the net ninja is better but he good too 👍
Brad, you are never short of content. Top notch stuff as always.💥💥
Hello Brad... it's like you read my mind! I've been searching for a descent and updated course on web components but I've been meeting outdated trash all over the web. Please do more in-depth web components tutorials.
Thank you for your unending suit of tuts
Liked before watching. You r best 👌
yea i did, before i saw ur comment.
mmm khete chaiaiiiiiiii
I never do this...I always assume that he might fail and put out a complete disaster of a video. Hasn't happene dyet but I remain vigilant.
I just looked into web components a few days ago with a packt course, but still insta-liked this one :) -- then watched this and still liked.
Great Brad. It will be also great to add another video about using lit-html and LitElement to create web components.
I'm using litElement for many months at my work and like it.
Always short, clear and comprehensive. Love your courses because those provide maximum knowledge in the minimum time.
Quality no BS tutorial... and may I add, by the voice of an angel. I found learning very easy with the chill vibes of this guy. Also this video goes perfectly with some lofi beats
This is a brilliant tutorial, thanks!
If I may give some unsolicited advice though: I wouldn't start with the PowerPoint. It may work well for those that already follow you, and just want to learn classroom style, but I almost skipped your video because of it, since I expected the video to be 100% theory, without any practical information because of the PowerPoint. I was looking for a way to get repeatable elements in HTML, because that's what I need right now in my development, so I need practical examples. I want to see code, so I can type along, and I want to see results, basically exactly like you did starting at the 6 minutes mark.
In my personal opinion: I'd attach the PowerPoint (as a PDF) to the description of the video, for those who like that quick reference, and just start with the practical stuff immediately. You can always explain the theory while also showing that it works. I've had a lot of professors bore me to death with hours of theory, which only started making sense when they put it into practice.
Every Js-Framework Developer should watch this
Really interesting stuff, I've been using Vue for a while now and thought the main building blocks of Vue were pure sorcery, however, after seeing this it's clear to see where it comes from. Cheers 🙂
read the source code
Best web component video I have seen till know ! 👏👏
I'm about to prep for a front-end interview for a role involving Web Components. I've never worked with it before. I've only heard of it.
This video was just f@#king awesome Brad - Thank you! 💪
Really great overview! It should be noted that extending existing HTML elements unfortunately isn't supported by Safari at this time 😠 It's too bad, because this would be super useful for extending native semantics and functionality for semantics, while also reducing the nested internal markup. That being said, custom elements still have a lot of value!
Thanks for this amazing course ! Back in 2014 I was learning jQuery from your tutorials now I am learning web components .. time flies :) Thanks for all the great work!
I would love to have a course like this in a professional application environment. A real project using this technique
one of the most useful videos on youtube. Very well explained. Thanks!
The "move the line up" key combination sparks joy.
I always enjoy watching this channel, Thank u Brad!
We use Polymer at my company currently. With LitElement/ lit-html improvements, we'll basically be on native components before too long.
I really like this course. Thanks Brad. I'll learn to be like you one day.
Wow just before I sleep new notification on my youtube.. Nice one Brad
excellent video Brad, i really like this concept, it is a bit clumpy, but no more so really than any other framework, much like using CSS3 Components to reduce development time, building your own web components can be very useful
This tutorial was great. You have explained everything in so simple and step-by-step way that I got the basic idea and concept.
Man I love your stuff, when I go to buy a course its always yours, appreciate your work!
Never knew this was possible. Thank you for this knowledge.
Worth video tutorial! Watched this video fully without seeking!
Using web comp, every developer can create js frameworks!
brad the rock n roll programmer
I really need this crash course. Liked before watching. Thanks Brad.
Thanks for the advice Brad. You prove time and time I didn't go wrong when I first subscribed to your channel, you add value to my time.
Have literally been looking for tutorials on web components for a couple weeks, not much new content out there. Thanks so much for making this vid
Web components are not new, they have been around for some time, but the thing is that were buried by React & Angular when they came out (which use them under the hood). Why you dont see to much content about it? well, the frameworks keep updating and there is not much need to implement web components by yourself
@@aldocaamal7740 yes I'm aware they aren't new, but I just learned of their existence recently and all the material based around them is from a year or two ago. I understand they may not have changed much but it's nice to see material that isn't a couple years old, and even then there aren't anywhere near as many videos on web components as there are other technologies.
@@Levelupment We often think that content from years ago wont help us, I have been on that place, but it will still allow you to understand how something works, many times older documentation has saved my butt. And also RUclips Dev channels, most show pretty basic stuff, articles and documents are the best way to learn
@@aldocaamal7740 The best way to learn is subjective, while I believe solid documentation is definitely one of the best resources, I personally find value in hearing (or reading) things explained in different ways and from different perspectives. Additionally, this specific technology is one with a vague enough name to make it that much more hassle to track down relevant information.
@@Levelupment Yeah I get you; you can call this specific case "custom elements" or "reusable components". Is great to see you are one of the people that really want to dive in more complex architectures, and sadly RUclips will fall short in most topics, tho I expect to cover them in the future. Really love some great chats like this one, have a good one Nikolas, success for you my friend
A very understandable introduction to a complex topic!
Great crash course Brad, I had no idea this was possible!
Thank you very much :)
When running the code I had a issue with giving null values to this.getAttribute('name') always. I could fixed it to moving following two code lines inside of the connectedCallback() method.
this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
Thanks man,
That came in clutch
Brad's intro is sick! I wonder where the inspiration came from.
MIND = BLOWN 🤯
This tutorial is a career booster, Brad. I have been long searching for the missing link between vanilla JavaScript and frameworks like React and Angular. This kind of tutorial, showing how frameworks function under the hood, is simply gold.
This is the kind of content that makes me tell about you for every developer I know! 💪🏼
Web components is on my list of things learn and lo and behold your video popped up. Thanks brad
Hello Brad Traversy ! Thank you for your stunning content. extremely helpfull
@Traversy Media - Great mini crash course! I'd love to see a more in depth course with you explaining & showing more features/advantages of W3C's WebComponents!
React,Vue,Angular all have their own way of implementing components but they are only specific to those frameworks/libraries & not reusable elsewhere. WebComponents has been out for years and it's time people start using them! They are native, faster, less code bloat & more performant than having to implement React/Angular/Vue WebComponents.
Safari has such a bad code base, they would need to rewrite their engine just to support Native/Vanilla W3C WebComponents, as of now they have declined it's support for WebComponents but you can use Polyfills in place for support. I'm not even sure if React/Angular can support Native WebComponents as if they force you to use JSX (Please correct me if I'm wrong) or Angular's WebComponents (code bloat).
ARC.js (ARC 2D) Will soon be released that has all these features built in, a powerful native object oriented framework that can also be used for developing 2D games. When documentation is completed I'd love for you to test out the ARC.js Framework Brad!
You are definitely my go to guy for introduction to new web tech.
Hi Brad ...how did we removed the EventListener without passing the event type and the callback name (which actually is an anonymous function)??? ......
Thanks ...
That's what I am also wondering about.
Would you consider making a video on lit-element (Vite starter, lit-ts) that would also cover the publishing and build stage? Thank you!
Thank you so much for this video!
I'm studying for exams at the moment and this really saved me!! :D
Some answers I found to questions I had:
Most answers are from this resource: developers.google.com/web/fundamentals/web-components
Really recommend reading that through if you are stuck on something.
1) Why create a template in the document then copy that to the shadow root?
> Template is a special HTML element that will not render even if you explicitly type the tag out in your HTML. It also comes with some behind the scenes goodies that makes copying elements from a template more performant. Long story short, it might look a little ugly but this will be faster/more efficient.
2) How are you supposed set styles for the actual custom component not just the stuff inside it? There are no CSS parent selectors!
> Well the quick and dirty answer is the class you created is the element so: this.style. = ""; will work!
> The downside to this is that in the inspector your element with, lets say a set display to block rule, will look like this:
> Oof that's really ugly and isn't really in keeping with the encapsulation of components we are going for! Not to mention overriding those styles later will be a nightmare!
> *The Best Answer:* Use the ":host" selector in your elements template CSS like this-> :host{display:block;}
> You can still see styles listed in the inspector but they won't be in-lined on the element which will make overriding them from your pages main style much easier!
I will update if I come across more!
Thanks for putting this together. Great primer.
Why do we need to use templates? Even when you use shadow root, you can still use shadowRoot.innerHTML = `...` and it will work as intended, when the benefits of using string template to have dynamic content.
i was looking for this. i want to create a single page portfolio web with reusable components web but without Vue js. keep up the good work
Great intro! Just needed a quick overview and this was perfect! Thank you.
I have a question though. Styling the elements by the class name from external style css doesn't work.
Thanks for the video. Using template a lot lately with regex, replace, and DocumentFragment, never tried shadow DOM. Cool.
Hey! I looked into web components for a project which requires me to built my web app within 500kb. So I'm trying to not use react or something. I think the developer experience with web components is really bad. It's getting worse if your project grows. I really prefer using React, Preact, Angular or Vue.
Thanks a lot for the crash course! It really helped me getting a nice overview and made me ready to code. :)
LitElement makes this way easier. It's also declarative. You should do a video on it.
If you need this to be easier, you probably better stick to a framework in the first place.
you're the BEST FRONTEND GURU!!!! thank you very much sir Brad!
From Honduras thank you teacher Brad.🙏
Deserved 1M likes
Another great tutorial that clears the clouds... Thanks Brad!
Excellent introduction! Just what I needed. Thanks for making this video.
Well, it almost looks like react and friends will no longer be necessary (of course a state store is still required for more complex stuff). Now native-components for mobile (instead of react-native, vue-native, nativescript, etc.) and we're all set ;)
Nope, that wont be the case, web components are not new man; for example what if I tell you that you can just encapsulate an Angular app (with services) in a web component so you can use it anywhere? same with React and maybe Vue (Im not a big Vue user but there should be a way)? They already take advantage of something that some people just discovered
Wow.... You read my mind. I was looking for this in your channels yesterday. Thanks.
Are web compenents a solid choice for the future? Which criticism would you have (styles in JS maybe)? Are there other workflows that trump WCs?
Awesome tutorial on the topic regardless.
Great Content Brad, love it !!
me when this video came out:
"Pffft I'll never need this, I'll just stick with Vue"
Me at work now:
so your company switch from using vuejs to web components?
@@feruzanarbona2265 Basically I had some flexibility but I still had to use Vanilla JS. I had to basically make several of the same complicated componenent, so I figured WC would be a good option.
Same bro, same! ;(
I see a problem with template creation. It feels like template element should be defined inside the class. In SPA provided custom element will pollute DOM even if that element is not going to be rendered.
Another thing I see, is that "this.attachShadow" already returns reference to the shadow root and you don't need to attach it separately.
Information taken from MDN.
Awesome simple and really understandable tutorial Brad, so thank you!
Is it necessary to include the styling and all the code within the component? Wouldn’t a complex component get a bit heavy on resources if there were multiple instances? Cheers....
Awesome tutorial! It really helped clear up a lot of confusion about web components for me. :D
Excellent video. Might be a simple Web Component but a very effective demonstration.
I love you maaannn... you just made everything easy for me :)
Great introduction to Web Components.
this feels like coming back a few years ago, but super cool thanks :)
At least i know now what are Web components. Thank you Brad!
Very cool! What about litElements? Is there any advantage of using them instead?