Web Components - introduction

  1. Custom Elements
    The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
  2. Shadow DOM
    The shadow DOM specification defines how to use encapsulated style and markup in web components.
  3. ES Modules
    The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
  4. HTML Template
    The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
WHO'S USING THIS STUFF & WHY?

Workshop - Day 1


How they work

Advantages

  • Built on HTML, JavaScript & CSS
  • Complement HTML Tags
  • Simple to create and use - all components are created equal
  • Reduced code base & consistent look and feel
  • Smart Components - do one thing and do it well
  • No dependencies - communicate via Pub/Sub
  • Pick your own backend

Workshop - Day 2


Challenges of- a simple app

A Component Library - Cloudable

Workshop - Day 3


Files & Folders- tools you need to get started
  • A couple of hands and a smart text editor - I use Emacs
  • Installed NodeJS - you need to install node-sass
Hands on- creating a panel component

Workshop - Days 4 & 5


Hands on panel creating- continued
Back to our simple appl challenge topic
Final thoughts
Need a few Volenteers :)