Web Components: The Secret Ingredient Helping Power The Web
HTML-код
- Опубликовано: 17 июн 2019
- As a web developer, you may or may not have tried Web Components - but as a web user, you almost certainly have. Adoption has quietly taken off. Millions of domains making up several percent of all page loads on the web use Web Components. This session will look at where Web Components can help you, like with interoperability, reuse and design systems. Learn how Salesforce uses Lightning Web Components to power their ecosystem of 5 million developers.
LitElement → goo.gle/2MTQJvb
Salesforce Lightning Components → goo.gle/2MQDb3l
Open Web Component resources → goo.gle/2ZqBhIm 
Наука
If you just want to know what web components ARE, skip to 11:38
I notice there is still a lot of confusion about what "web components" actually means. Is it a synonym for "custom elements" or a set of APIs? A lot of people use "web components" and "custom elements" interchangeably. Some even say "custom components". This video is no exception.
Custom Elements is the name of the spec. Web Components it he colloquial way to refer to it. (please correct me) www.caniuse.com/#feat=custom-elementsv1
@@javiasilis Actually, technically, I believe Custom Elements is only one part of the technology stack that makes up Web Components, although in common parlance the terms are used interchangeably in sloppy ways. The other technologies that make up Web Components are Shadow DOM, HTML Templates, and HTML Imports. I think the last two have kinda been replaced by the use of JavaScript template literals which allows for the importing of components using JavaScript instead. I found this resource to be helpful in understanding the complexities: medium.embengineering.com/web-components-vs-react-9a7be63e365c
every time I see a chrome video that mentions native web-components/custom-elements I always leave a comment saying I've been using lit-element for years now and it's literally one of the best tools I use. the biggest upside is page performance and ease of development
lit comes removes **all** of the run-time cost that you'd get with frameworks like react, lit's organization model and render model is nearly identical to react (but again, without the runtime performance cost you'd get from react), it makes it a lot easier to debug when you use the inspect tool (because your component names show up in the elements view), it makes the browser profiling tools a lot easier to work with because the profiler will actually display which components and which function/methods are running (unlike react where you have manually track down which subtree of html elements is a component), and lit still works in such a way where you can still take use of what ever state/store library you prefer to use
tl;dr its a much lighter-weight version of react without the developer pain points
First kill internet explorer, then this will really take off for Enterprise software.
I also hear that Safari is just as bad as IE at keeping up with web components.
I wanted to learn Web components and Polymer but damn there is a very very poor community for this only few videos are available on RUclips for web components as well as for Polymer all tutorials made on 2014.
It's an impressive technologies to learn that's why i hope that Google take care of this and publish tutorials for it.
And thanks google for Angular Elements Which allow the developer to create Web Components more easly and faster.
This is absolutely brilliant
Can you please tell me how to use the decorator syntax, the property property in conjunction with the redax?
I want use @property({type: Array}) stages instead of
static get properties() {
return {
stages: {type: Array}
}
but this property defined in _stateChanged(state) {
this. = state.reducer.stages
}
so it posible?
LitElement is product of the polymer team...... they were ahead of the game.....
Apparently everyone in the world is ahead of every standard in javascript.
Including web components with their shit api, thats why everyone is creating some wrappers around them..
Thank God for web components.
Will Flutter-web (hummingbird) output web components?
Read Blog post about LitElement and webcomponents. After this I saw Google photos is an pwa now. Does someone know what Framework/Library Google use?
It's probably in here somewhere: github.com/google
Still don't understand what web components are. Started off strong, then all downhill from the Salesforce example
It's just an open standard component model understood by all modern browsers. It's nice for devs wanting to avoid proprietary APIs and vendor lock in. It's not for everyone.
Needed a better approach, instead of the Salesforce example.
Having recently developed Salesforce Lightning Web Components, I can assure you they are just a bad example. It is a fully proprietary implementation, and you most definitely cannot use these "web components" outside of the Salesforce platform.
neat!
This is the future
Huge success huge success. Sorry, but where??
Yup i wanted to learn it and i barely got a useful tutorial series with 5 videos with 5 min length and the most watched video has 2k views as i remember.
Unfortunatelly as complexity grows the less attractive Webcomponents are. Using it with multiple nested slots is making performance a joke.
How do we create a CSS Framework on Web Components? And I mean CSS only, no components suggestion please
If you will use Shadow DOM you will suffer with a CSS framework but if you use normal HTML on the components it will be as simple as styling a normal HTML element.
@@hanzofuma But I need shadow DOM to protect my components from stupid CSS developers
@@mjarc1 Yup i share with you the same idea.
Preach 🙌
bull sheet * random()
Why would I use React + a web component when I can just use a React component?
Why I have to use React when I can use Web Components?
because you could reuse the web component outside of react
A web component doesn't need any added runtime because it runs on APIs that are shipped in the browser. React components on the other hand, require react and react-dom to be loaded, that represents a couple hundred additional KBs that a user will have to download for the website to become responsive.
If you are already using React, won't migrate away from it, and you won't share the web components with other sites, then there's no immediate benefit.
If you don't care about others outside of your react using the component that is fine.
It should be stated that LitElement outperforms everything (space and time) and makes components that work in any framework... Or even (gasp) a vanilla js app
Are you really watch the video??