React vs Web Components?
HTML-код
- Опубликовано: 13 июл 2024
- In this episode I talk React / Preact, JSX, all that good stuff... and how it all works with Web Components! Spoiler: they can work together just great :D
While you're here check out Rob Dodson's site Custom Elements Everywhere: custom-elements-everywhere.com/
And also his video on the very same stuffs: • Custom Elements Everyw...
Shadow DOM docs: developer.mozilla.org/en-US/d... 
Наука
![XO (Only If You Say Yes) - ENHYPEN エンハイプン 엔하이픈 [Music Bank] | KBS WORLD TV 240712](http://i.ytimg.com/vi/wBT1bKKwPTo/mqdefault.jpg)
The combination of high level objectives and low level code for each platform is the most helpful part of this video, for me.
Keep 'em coming randomly! Keep making interesting/fun videos, not filler stuff to meet deadlines.
Discovered your channel right now and it feels like finding a gem between the simulated ones... THANKS!!! Have a great day :)
Thanks Paul for the amazing content! Keep it up the good work!
Thanks for watching and saying nice things :)
Damn that intro!! I love the focusing on "Web developer" and on coding lines.
Every week please, whatever number of times. Always love your videos.
Awesome videos, keep them coming!
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.
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.
I'm here for the B-roll 😁, awesome content & generous amount of humor!
I'm here for that too. Glad it's working out!
Quality content, thanks Paul!
The B-Roll Master himself 👍🏻 awesome Video!
Very illuminating, thanks for sharing! :)
Thanks a lot for the shadow dom explanation 👌
Just subscribed, looks like you've got some great content. Thanks
Great summary!
Slightly random upload schedule works for me. Your content is just good content Mr. Lewis.
Random is the only way I know how
Fantastic... More videos please...
Awesome video, thanks
+1 for the intro
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"
Probably one of the most intelligent and well-spoken teachers in the web-dev community.
That's very kind of you
amazing video
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.
Right
This seems like the golden path!!!!
Good presentation 🎸🎸🎸🎸
AHA a fellow bassist + fellow programmer! Great video too!
Thanks! 🙌
Once Again Top Notch.
For all good reasons... that's why i love Vanilla.js
glashio great to see someone preferring web components over react, right? ;)
That is why we build web components using custom elements and shadow Dom. Take a look.
www.therogerlab.com
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
I came to claim my love emoji. I have subscribed with 3 different accounts.
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.
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.
i like this.
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
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 ?
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.
Do web components affect the layout and positioning of other elements on the DOM while being rendered?
Yes. Just think of them as powered up s by default. They are inline and affect the flow of other elements.
great video! the super faint background music from some distance away is killing my ears. but I love the content! thanks for explaining it!
btw, how would you build a custom form field using web components?
Take a look at the Polycasts episode where Monica talks about it: ruclips.net/video/AVXu1_vaY2U/видео.html
It's a two-parter :)
Your channel is awesome. Professional. Why not continue? You could have had close to 1 million subscribers
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!
What is the intro music?
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?
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.
That's an interesting pattern. Hadn't really thought of that much. Will ponder some more...
does createObject work with those ?
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.
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?
CSS in Javascript is interesting :)
Oh no, what did I do....
lol 😂 @@aerotwist
I just stopped doing whatever, watching it now.
same
Awww you twoooo thank you
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
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!
Gross. Contain the gross. The eww. The bleh. The ugh 👍😁
@@aerotwist Oh lol. That makes more sense. I was using Google Translate to see if "groze" meant something in a different language. 😂
Classic
It's not necessary to store the shadow root in a property. It gets stored in this.shadowRoot automagically.
TIL!
I think that the "P" on the mug stands for "Preact". Change my mind.
I will not refute any of this
I just assumed he stole it from one of the other Pauls...
Shhhhhhhhh! /Looks over shoulder
Question what do you like more react, polymer, preact
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.
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...).
Your intro reminded me of Peter McKinnon
What happened why no more videos?
dispatchEvent( new CustomEvent( 'wobble', { detail: {} ))
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?
Just mostly showing it's possible. You never know.
We meet again, RUclips's 301 views.
Moved permanently to awesome?
this intro reminds me of borderlands
its been almost 2 to 3 weeks you haven't uploaded any videos
Correct. I should be uploading this week :)
This could do with an update...
Music is a little too loud.
4:51 WOOHOO!
Not enough events called 'woohoo' imo 😂
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)
True. Good jump off point though... And hopefully all these bumps will be smoothed out
check your levels man.. intro and outro music is much louder than the audio of the main content
Polyfills, memory, no ssr - polymer and web comopnents are fine but not for fast websites
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.
@@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 RUclips 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 RUclips work
Free yourself from frameworks.
You definitely cover some interesting and important topics, however, too much theatrics, not enough information. Unsubscribed.