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.

Source: https://www.webcomponents.org/introduction

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.

Source: https://developer.mozilla.org/en-US/docs/Web/Web_Components

(Web) Components are the building blocks of modern web applications.

Source: https://developers.google.com/web/fundamentals/web-components/

WebComponents Parts

Another Blog With Drawing

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

Basic Concepts

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.

These chunks are basically out HTML, CSS, and JavaScript, though other technologies are also available. The browser steps include:

  • 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.

JavaScript is a dynamic language that runs in a browser and allows us to alter just about every aspect of how the page behaves:

  • JavaScript can query and modify the DOM and the CSSOM.
  • JavaScript execution blocks on the CSSOM.
  • JavaScript blocks DOM construction unless explicitly declared as async.

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

  • Custom Elements - JavaScript APIs to define custom elements and tell it to the browser.

  • ShadowDOM - so that Scripting and Styling without fear of collisions

  • HTML templates - <template> and <slot> elements

Getting Started

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!

To build we have a lot of options, thanks to the uber-vibrant JavaScript community, Our options:

Time to build

In this session, we will build one using - Pokemon!!! Shared codebase on github for kaaro-pokemon webcomponent

Link to slides @MozillaPunjab LPU on 24th March Link to GitHub repo used