The combination of high level objectives and low level code for each platform is the most helpful part of this video, for me.
@misterhtmlcss
3 жыл бұрын
Paul great video. One ask though. Could you publish this code in a Gist, GH or on codesandbox.io in the future or if you have this code here too? It's not because it's so hard to replicate, but it would be amazing to be able to very quickly jump on what I've learned and start breaking what you wrote to get that more full body experience. Anyway that might be just me, but I love breaking and messing with code I know that works and is a new concept so that I can understand it a bit better. Again...Awesome job as usual.
@matarrjobe4577
6 жыл бұрын
dispatchEvent( new CustomEvent( 'wobble', { detail: {} ))
@Meleeman011
3 жыл бұрын
Web components have made react obsolete holy crap. I just stumbled upon them but it's a really nice built in way for js to do components
@_oskareriksson
6 жыл бұрын
Keep 'em coming randomly! Keep making interesting/fun videos, not filler stuff to meet deadlines.
@GuilhermeScaldelai
6 жыл бұрын
Thanks Paul for the amazing content! Keep it up the good work!
@aerotwist
6 жыл бұрын
Thanks for watching and saying nice things :)
@MaxArt2501
6 жыл бұрын
We meet again, KZitem's 301 views.
@aerotwist
6 жыл бұрын
Moved permanently to awesome?
@Yoyomanmanholla
4 жыл бұрын
check your levels man.. intro and outro music is much louder than the audio of the main content
@Oswee
5 жыл бұрын
Definitely there in the wild should not be a phrase "X vs Web Components"! Web Components could be just a building blocks for framework/library X! Or they can be used without any X!
@ashrafal
5 жыл бұрын
We build new things based our experience, information we gain and learn from older constructs. jquery adhoc usage led to backbone and ember, pain and boilerplate code in backbone led to Angular and React. Angular and React learned and improved upon their own short comings. current custom component spec itself is heavy influenced by react just like riot, preact.
@firstprincipleslearning
6 жыл бұрын
I just stopped doing whatever, watching it now.
@edouardduplessis7342
6 жыл бұрын
same
@aerotwist
6 жыл бұрын
Awww you twoooo thank you
@CarlosAraya25
6 жыл бұрын
custom-elements-everywhere.com/ shows you whether web components will work with your framework. It doesn't show you how to make them work together, that's on you as a developer (and I should learn how to edit comments instead of deleting them)
@aerotwist
6 жыл бұрын
True. Good jump off point though... And hopefully all these bumps will be smoothed out
@chayanjana20
2 жыл бұрын
Good presentation 🎸🎸🎸🎸
@Jeremybelleu
6 жыл бұрын
I think that the "P" on the mug stands for "Preact". Change my mind.
@aerotwist
6 жыл бұрын
I will not refute any of this
@WestbrookJohnson
6 жыл бұрын
I just assumed he stole it from one of the other Pauls...
@aerotwist
6 жыл бұрын
Shhhhhhhhh! /Looks over shoulder
@deps..
5 жыл бұрын
Hi Paul, I think writing a web components in a separate file like the VueJS Single File Component is a good idea? What do you think ?
@aerotwist
5 жыл бұрын
I'm no Vue expert, so I would say give it a try (if you can do it easily and without risking your project) and see how you go! And let me know how it goes.
@DavidAlsh
5 жыл бұрын
I suspect that JSX/React would be better suited inside the web component, to help it manage internal re-rendering/diffing rather than outside to manage composing the application
@srsajjad7460
6 жыл бұрын
+1 for the intro
@glashio
6 жыл бұрын
For all good reasons... that's why i love Vanilla.js
@highmastdon
6 жыл бұрын
glashio great to see someone preferring web components over react, right? ;)
@rogermacias4647
5 жыл бұрын
That is why we build web components using custom elements and shadow Dom. Take a look. www.therogerlab.com
@TarekFaham
3 жыл бұрын
Fantastic... More videos please...
@davidmaxwaterman
2 жыл бұрын
This could do with an update...
@theoligarchist1503
3 жыл бұрын
does createObject work with those ?
@sensiblehuman1763
3 жыл бұрын
Your intro reminded me of Peter McKinnon
@tkdsoleil
6 жыл бұрын
CSS in Javascript is interesting :)
@aerotwist
6 жыл бұрын
Oh no, what did I do....
@jonathanbakebwa2292
5 жыл бұрын
lol 😂 @@aerotwist
@oathplanners7838
5 жыл бұрын
I came to claim my love emoji. I have subscribed with 3 different accounts.
@adamdude
4 жыл бұрын
Why use a custom element vs just using the standard ones like div? Like, if I had a login form and I wanted it to be a custom element made up of the elements that make the login form, why use a custom element vs wrapping it all in a div and giving it a class name?
@duni7374
5 жыл бұрын
Probably one of the most intelligent and well-spoken teachers in the web-dev community.
@aerotwist
5 жыл бұрын
That's very kind of you
@MaxArt2501
6 жыл бұрын
That reminds me of a quite interesting Twitter thread among React advocates about Web Components. Someon of the caliber of Michael Jackson called Web Components "a complete waste of time" and stated that "React should be built in to the freaking browser". Being such an opinionated library, I think it's a pretty extreme stance. Even Dan Abramov (who's always a very reasonable guy) disagreed: twitter.com/dan_abramov/status/1050696101102329856 I think there's space for both React and Web Components, as you expressed in this video. React isn't 100% compatible at the moment, but if you don't have to deal with some edge cases you should be fine. I think the biggest pain points of WC are: - you _need_ JavaScript to make them work; yes, React too, but also: - SSR, SEO and the sort (event Googlebot is stuck at Chrome 41): in short, a React page canbe statically generated, while a WC page _cannot_ - accessibility (solved by extending semantic elements... but still bound to JavaScript) - styling is cumbersome (somewhat mitigated by Ito Hayato and Amzi Rakina's proposal of passing stylesheed during CE definition: github.com/rakina/custom-element-default-style - already implemented in Chrome?!) For the rest, I think they're great! Although just for _smaller_ components and not for app-wide structural patterns. That's what React's good for (or Angular, or Vue...).
@Manjeetkundu
5 жыл бұрын
Damn that intro!! I love the focusing on "Web developer" and on coding lines.
@jeremiahthompson82
2 жыл бұрын
Your channel is awesome. Professional. Why not continue? You could have had close to 1 million subscribers
@jamesmassa1999
4 жыл бұрын
You definitely cover some interesting and important topics, however, too much theatrics, not enough information. Unsubscribed.
@samirsaeedi74
6 жыл бұрын
It's not necessary to store the shadow root in a property. It gets stored in this.shadowRoot automagically.
@aerotwist
6 жыл бұрын
TIL!
@evapardeza1647
Жыл бұрын
React is a set of libraries with lots of tools to help you made components for your React web. Web Components are much more difficult to code even if they are a standard. By some reason, if you master React, you will end up creating nice components, and you'll find creating Web Components quite difficult.
@switchlyrics.
24 күн бұрын
no creating web components is so easy a lot and i am using it till now
@switchlyrics.
24 күн бұрын
i have a lot of controll
@switchlyrics.
24 күн бұрын
except for events
@krosenk729
4 жыл бұрын
great video! the super faint background music from some distance away is killing my ears. but I love the content! thanks for explaining it!
@edcoronado
4 жыл бұрын
Hey man! Really appreciate this video. I stumbled on direflow.io the other day. It seems to be able to transform React components into Web Components. I was wondering if you could cover this topic?
@bavariantrawler
5 жыл бұрын
What is that word you used near 3:43? "groze"? I've heard you say it a couple times here and on the FunFunFunction video and I don't know what it means. Anyway, great video!
@aerotwist
5 жыл бұрын
Gross. Contain the gross. The eww. The bleh. The ugh 👍😁
@bavariantrawler
5 жыл бұрын
@@aerotwist Oh lol. That makes more sense. I was using Google Translate to see if "groze" meant something in a different language. 😂
@aerotwist
5 жыл бұрын
Classic
@bigcheesepuff1
5 жыл бұрын
I did an experiment with custom elements ages ago, and really liked the concept, but was not really sure how it fits into the real world. - good vid. - would be interesting to compare Preact with Stimulus. - I have an existing rails/coffeescript app which I want to "enhance"
@peksipatongeis
6 жыл бұрын
Awesome videos, keep them coming!
@lunar-ix9vu
4 жыл бұрын
This is cool, but why use React as the glue for vanilla web components and instead use, say, lit-element for lit- (or vanilla) web components?
@aerotwist
4 жыл бұрын
Just mostly showing it's possible. You never know.
@DavideCatani
5 жыл бұрын
Very illuminating, thanks for sharing! :)
@rafaelkrizek9608
5 жыл бұрын
Discovered your channel right now and it feels like finding a gem between the simulated ones... THANKS!!! Have a great day :)
@Oswee
6 жыл бұрын
Not an expert but i found that custom elements are really great for layout blocks as you can define attributes like hbox or vbox for a and set relative flexbox properties in shadow dom. This way my public styles holds just like representional state and not a structural. I mean.. my styles has holding only like colors, fonts, etc. and reraly sizing and positioning. But i am still absolute noob in all this.
@aerotwist
6 жыл бұрын
That's an interesting pattern. Hadn't really thought of that much. Will ponder some more...
@HSDevStudio
5 жыл бұрын
Was in a conversation today in my organisation to use angular as a framework over polymer to tailor web-components. Your thoughts really helped me to get it through. However, am not a one framework fan but the vision of a web-component to be build with that ease is what is amazing to me. Thanks a lot Paul. Rob's site proved to be the trump card. Thanks a lot again Paul for an awesome articulation.
@aerotwist
5 жыл бұрын
Really glad it helped. Honestly there are so many variables and it differs team to team. The main thing to know is you have options.
@jonathanbakebwa2292
5 жыл бұрын
Do web components affect the layout and positioning of other elements on the DOM while being rendered?
@aerotwist
5 жыл бұрын
Yes. Just think of them as powered up s by default. They are inline and affect the flow of other elements.
@samundrashrestha
4 жыл бұрын
What happened why no more videos?
@BliboranBass
5 жыл бұрын
AHA a fellow bassist + fellow programmer! Great video too!
@aerotwist
5 жыл бұрын
Thanks! 🙌
@Phlickey
5 жыл бұрын
Slightly random upload schedule works for me. Your content is just good content Mr. Lewis.
@aerotwist
5 жыл бұрын
Random is the only way I know how
@michongoma7598
6 жыл бұрын
Every week please, whatever number of times. Always love your videos.
@direct0000
5 жыл бұрын
Just subscribed, looks like you've got some great content. Thanks
@manfredadams3252
5 жыл бұрын
Free yourself from frameworks.
@Pharaoh-99
5 жыл бұрын
this intro reminds me of borderlands
@dominikdeimel9486
6 жыл бұрын
The B-Roll Master himself 👍🏻 awesome Video!
@mihhailkapustin7886
5 жыл бұрын
What is the intro music?
@lordswaggity1213
5 жыл бұрын
Music is a little too loud.
@ACaruso
4 жыл бұрын
amazing video
@feldinho
5 жыл бұрын
btw, how would you build a custom form field using web components?
@aerotwist
5 жыл бұрын
Take a look at the Polycasts episode where Monica talks about it: kzitem.info/news/bejne/ooyO22WVr5OKZYo It's a two-parter :)
@skillfulactor09
5 жыл бұрын
I just found out youtube I love it alot thanks so much im new to web components and i want to get into it thanks
@RaphaelRafatpanah
4 жыл бұрын
Great summary!
@johnn4314
5 жыл бұрын
This seems like the golden path!!!!
@firstprincipleslearning
5 жыл бұрын
As a summary for advantages of using shadow dom , you contain your style for the element, so it closes over the element itself and does not alter the rest of your code. And for events similarly, it stops at the shadow dom boundary and you can emit the event in a more semantic way, other than click, for the rest of the app. For example as a `wobble` event, so you can uniquely communicate what the event is specifically designed for.
@aerotwist
5 жыл бұрын
Right
@switchlyrics.
24 күн бұрын
exactly
@DrRobrez
5 жыл бұрын
Awesome video, thanks
@nuttygold5952
5 жыл бұрын
i like this.
@SAS-qq5ce
5 жыл бұрын
its been almost 2 to 3 weeks you haven't uploaded any videos
@aerotwist
5 жыл бұрын
Correct. I should be uploading this week :)
@maximerossignol582
6 жыл бұрын
Thanks a lot for the shadow dom explanation 👌
@nisarhassan7093
6 жыл бұрын
Once Again Top Notch.
@rendrap
6 жыл бұрын
I'm here for the B-roll 😁, awesome content & generous amount of humor!
@aerotwist
6 жыл бұрын
I'm here for that too. Glad it's working out!
@EduardUrbach
6 жыл бұрын
Quality content, thanks Paul!
@CodingPhase
6 жыл бұрын
Question what do you like more react, polymer, preact
@aerotwist
6 жыл бұрын
I honestly don't have much of a preference. I've always had a thing for treating the web like a toolbox. Pick the right one for the job. Typically I guess I go straight to platform (the 4th option?) but I've happily used Preact as a glue as well.
@pawel_890
6 жыл бұрын
Polyfills, memory, no ssr - polymer and web comopnents are fine but not for fast websites
@aerotwist
6 жыл бұрын
Aww citation needed there, buddy. There's plenty you can do in this space and it's not so clear cut as you make it sound.
@pawel_890
6 жыл бұрын
@@aerotwist I am working with web componets for 2 years, polymer 1 and 2, and I know what its advantages and disadvantages are, I wonder if KZitem will stay with this technology, considering that polymer is already deprecateed and just wait for the lit element. The environment is unstable. Sorry for this critic, behind that's I love KZitem work
Пікірлер: 106