Reusable UI with Web Components

slides.com/aelbore

Arjay Elbore

Frontend Developer

github.com/aelbore

Aivan Monceller

Frontend Developer

github.com/geocine

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 
    type="button" id="dropdownMenuButton" 
    data-toggle="dropdown" 
    aria-haspopup="true" 
    aria-expanded="false">Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<b-dropdown label="Dropdown">
 <b-dropdown-item>Action</b-dropdown-item>
 <b-dropdown-item>Another Action</b-dropdown-item>
 <b-dropdown-item>Something Else here</b-dropdown-item>
</b-dropdown>

Web Components

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.

Custom Elements

Shadow DOM

HTML Template

ES Modules

Shadow DOM

Advantages of Web Components

Developer Experience
- You want to speed up development
- Less code
- Easy to maintain
- Can use to any javascript framework or libraries
Consistency
- Reuse components across teams, other projects/environments/frameworks
- Encouraging all of your engineers to reuse components will make the site more enjoyable for its users

Browser Support

Demo

LitElement - A simple base class for creating fast, lightweight web components
CSS Custom Properties - variables in CSS
Parcel - Blazing fast, zero configuration web application bundler

https://github.com/geocine/theme-toggler-demo

<thank-you></thank-you>