Web Components

https://jsfiddle.net/AbdallaNayer/tkb6dz1d/

Transcript

1. Web Components Abdalla Nayer
2. About Me Full Stack Developer Cross platform mobile developer Vezeeta eme international Cross platform mobile developer Intellisc VIS Sr. Frontend Developer Sr. Frontend Developer Sr. Frontend Developer https://www.linkedin.com/in/abdalla-nayer-24b65175/
3. What we do ? Technologies We use /tajawal About Tajawal jobs-egy@tajawal.com
4. AGENDA •What are Components? •Component Based Architecture •Web components •Demo •Web components VS the world •Live Examples •Web components Libraries •Questions
5. What are Components? •Definition A component is an independent software unit that has a clear function, it can be used to create a software system through communication with other components •Characteristics 1- Independent 2- Composable 3- Small 4- Reusable 5- Encapsulated 6- Testable
6. Component based architecture • Component based architecture is the process for building a system based on components • Let’s try to divide this website into components
7. Component based architecture cont’d •Benefits •Accelerates development •Increases productivity •Ensures maintainability •Ensures Extendibility •Ensures reusability •Ensures replaceability
8. Web Components • Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML. • Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.
9. Web Components Cont’d • The 4 main pillars of Web components 1.Custom Elements 2.Shadow DOM 3.HTML <template>/<slot> 4.HTML Imports (abandoned feature) <link rel="import" href="foo.html"> • Attributes and Properties • Lifecycles • Custom Events
10. 1. Custom Elements Web Components Cont’d • tag name must contain - • same tag cannot be registered more than once. • custom elements cannot be self-closing
11. 2. Shadow DOM Web Components Cont’d
12. 2. Shadow DOM Cont'd Web Components Cont’d • Markup encapsulation • Style encapsulation
13. 3. HTML <template>/<slot> Web Components Cont’d • Custom element Markup • Custom element Style
14. 3. HTML <template>/<slot> Cont'd Web Components Cont’d • Markup placeholder • SEO friendly
15. Web Components Cont’d • What we have achieved till now is the below Flattened DOM tree Shadow DOM and Light DOM
16. Web Components Cont’d • Attributes and Properties
17. Web Components Cont’d • Lifecycles • constructor • connectedCallback • disconnectedCallback • attributeChangedCallback • adoptedCallback
18. Web Components Cont’d • Custom Events • Events donot propagate out of the shadow DOM by default unless used the composed: true
19. DEMO https://jsfiddle.net/AbdallaNayer/tkb6dz1d/
20. Web components VS the world Web components are not here to replace frameworks or libraries (angular, react, vue…), they are here to work with them to enrich the web experience. Web components VS and the world
21. Live Examples • EA Sports • https://www.ea.com/games/library/sports • https://www.youtube.com/watch?v=FJ2KEvzlyo4 • Youtube • https://www.youtube.com • https://www.youtube.com/watch?v=tNulrEbTQf8
22. Web Components Libraries • Bosonic https://bosonic.github.io/ • Polymer https://www.polymer-project.org/ • X-Tag https://x-tag.github.io/ • Stencil https://stenciljs.com/ • Pollyfills https://www.npmjs.com/package/@webcomponents/webco mponentsjs
23. Questions
24. Reference • https://developers.google.com/web/fundamentals/web- components/ • https://www.youtube.com/watch?v=g0TD0efcwVg • https://www.webcomponents.org/ • https://custom-elements-everywhere.com/ • https://developer.mozilla.org/en-US/docs/Web/Web_Components • https://github.com/w3c/webcomponents
25. Thank You! Abdalla Nayer