Reusable UIs with Web Components

 

Web Component Building Block Graphic

Cory Rylan

Cory Rylan

- Google Developer Expert for Angular and Web

- Front End Developer @ VMware, Clarity Design Team

- Angular Bootcamp Instructor

@coryrylan

coryrylan.com

Google Developer Experts Graphic
Angular Bootcamp Training Logo
Clarity Design Graphic
Clarity Design Logo

- Static HTML / CSS

- Angular Components

- Web Component based icons system

- Design/UX Guidelines

VMware logo

What are Web Components?

A collection of Web APIs

 

- Custom Elements

- Shadow DOM

- HTML Templates

- ES2015 Modules

- CSS Custom Properties

Why Web Components?

Web Standards

- Component model

- Lightweight and fast

Rocket Ship Graphic

Why Web Components?

Encapsulation

- CSS, Template, Behavior

- Well defined themes with Custom CSS Properties

- No need for Global CSS

CSS Logo

Why Web Components?

Reusablity 

- Cross framework/library support

- custom-elements-everywhere.com

Angular Framework Logo
VueJS Framework Logo
React Library Logo

(sort of)

JavaScript Logo

Browser Support?

IE11+ support is possible with polyfills

Graphic of browser support with Custom Elements and Web Components. All browsers supported with the exception of ie11.

Edge in development!

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/

Graphic of custom elements tracking issue for the Edge browser
Graphic of Shadow DOM tracking issue for the Edge browser

Code Demo

Graphic of code in progress

Web Component Authoring

Polymer Logo
Angular Logo
StencilJS logo

Angular Elements

Polymer and lit-html

Stencil JS & Ionic

VueJS logo

Vue Component Wrapper

Framework Demo

Angular Logo
Web Components logo and graphic
Heart Graphic
Vue Logo
Cover of Web Component Essentials Book

webcomponentessentials.com

Thank You

coryrylan.com

@coryrylan

Made with Slides.com