Web Components - For Micro-frontends and Re-usable components
Let’s build em all!
What are 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.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
(Web) Components are the building blocks of modern web applications.
Web Components are the result of an effort by the web community to have common specs for these ‘building blocks of the web’ There are two broad categories in which this can be used:
- For building Micro-frontends - These are small but contains detailed business logic
- For building Re-usable Components - These rarely contain any business logic. Highly targeted and re-usable components
To understand and discuss the 3 technologies that are used to make Web components a thing, we need to first see what happens usually when an HTML page is rendered.
…once the server approves your request, the server sends the website files in chunks - called data packets. These packets are then assembled by your browser into a complete website and display it to us.
- Process HTML markup and build the DOM tree.
- Process CSS markup and build the CSSOM tree.
- Combine the DOM and CSSOM into a render tree.
- Run layout on the render tree to compute geometry of each node.
- Paint the individual nodes to the screen.
Note: This page is usually what I refer to as the base: Web Technologies
I would recommend every developer, associated with Web development, to revisit this page every 3 months, else the dark side WINS!
What makes up Web components
So the suit that makes web components possible is
ShadowDOM - so that Scripting and Styling without fear of collisions
HTML templates - <template> and <slot> elements
To create a Components, broadly here are the steps we would take
- Create a Class - put your logic
- Tell the browser about this new Custom Element
- Optional: attach Shadow DOM
- Optional: define a template and then attach
- Use the new Component!
- Polymer - Google’s web components framework
- Angular Elements
- Hybrids is a UI library for creating Web Components with simple and functional API
- LitElement - A simple base class for creating fast, lightweight web components
- Slim.js is a lightweight web component authoring library
Time to build
In this session, we will build one using - Pokemon!!! Shared codebase on github for kaaro-pokemon webcomponent
- Custom elements everywhere
- Custome Element Reaction Diagram
- w3 specs custom elements
- Github Issue
- Google model viewer
- history of web
- Awseome Web components
- How browsers work - Part 1 Part 2 Part 3 Part 4