Web component
- 1. Welcome
- 2. What is Web component It is not a single technology rather is a suite of different technologies allowing us to create reusable custom elements — with their functionality encapsulated away from the rest of our code — and utilize them in your web apps. It does not need 3rd party library or framework, it is pure web technology that can be used with other existing framework like React, Vue, Angular even without any framework
- 3. Why Web component - Encapsulate business logic and UI - Highly reusable across project even among multiple projects with different web frameworks - Pure web technology, so we can use with any project without any framework - Same component can be used in vue, react, Angular and other framework also
- 4. Web Component Custom HTML Element: Register our own HTML tag Shadow DOM: Manage a separate DOM node tree HTML templates: The <template> and <slot> elements enable you to write markup templates HTML Import Discontinued due to modern dev tool provide good solution
- 5. Types of Custom Element 1. Autonomous Element which does not depend on any other element 2. Extended Built-in elements
- 9. Custom Element Vue.js React Class based component constructor Created for component, bind for custom directive constructor connectedCallback mounted componentDidMount attribureChangedCallback updated componentDidUpdate disconnectedCallback unmounted componentWillUnmount (similar but not exact) Custom element’s Callback methods compared to Vue.js & React
- 10. Time for real coding
- 11. ● DataFormsJS — Open source web components library — Set of Web Components that can be used to build Single Page Apps (SPA), Display JSON data from API’s and Web Services, and bind data to different elements on screen. All Web Components are plain JavaScript and require no build process. ● FAST is a web component library built by Microsoft which offers several packages to leverage depending on your project needs. Fast Element is a lightweight means to easily build performant, memory-efficient, standards-compliant Web Components. Fast Foundation is a library of Web Component classes, templates, and other utilities built on fast-element intended to be composed into registered Web Components. ● Hybrids — Open source web components library, which favors plain objects and pure functions over class and this syntax. It provides a simple and functional API for creating custom elements. ● Lit — Google's web components library, the core of which is a component base class designed to reduce boilerplate while providing reactive state, scoped styles, and a declarative template system. ● Snuggsi — Easy Web Components in ~1kB Including polyfill — All you need is a browser and basic understanding of HTML, CSS, and JavaScript classes to be productive. ● Slim.js — Open source web components library — a high-performant library for rapid and easy component authoring; extensible and pluggable and cross-framework compatible. ● Stencil — Toolchain for building reusable, scalable design systems in web components.
- 12. References & Further reading - https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements - https://developers.google.com/web/fundamentals/web-components/customelements - https://html.spec.whatwg.org/multipage/custom-elements.html - https://www.html5rocks.com/en/tutorials/webcomponents/customelements/ - https://github.com/WICG/webcomponents - https://www.webcomponents.org/ - https://github.com/engr-hasanuzzaman/funwith-web- component/tree/master/custom_components
- 14. Thanks for you Time