Web componentsA whirlwind tour

Ohai

I'm @g33konaut

These slides: bit.ly/webcomponents-intro

Ebook: leanpub.com/webcomponentsgeekonaut.de

github.com/avgp

Let's talk about HTML

Lego ad from 1978

HTML is easy

1991: HTML 1.0TITLEISINDEXANCHORISINDEXPLAINTEXTLISTINGPH1, H2, ..., H6ADDRESSUL, MENU, DIR

1993: HTML 2.0+ Forms+ Images+ Head/Body+ Strict mode

1995: HTML 3.0150 pages of specification

Different browsers have their own extensions

:(

1998: HTML 4.0Three infamous modes:

1. Strict2. Transitional3. Frameset

Tried to standardize most of the browser-specific elements

1998 - 2008...

The web evolved

vs

The web gained powerRIA, Web 2.0 and the first Smartphone

Image: Spiegel

But HTML fell behind

A sample: Filterable list <div class="filterList"> <label for="filterTerm">Search for: </label> <input id="filterTerm"> <ul> <li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li> <li>Chuck Norris has been to Mars; that's why there are no signs of life.</li> <li>Chuck Norris refers to himself in fourth person.?</li> <li>Chuck Norris once leaned against a tower in Pisa, Italy.</li> <li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li> <li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li> <li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li> </ul> </div> <script> document.getElementById("filterTerm").addEventListener("keyup", function() { var items = document.querySelectorAll(".filterList li"); for(var i=0; i<items.length;i++) { items[i].style.display = (items[i].textContent.match(this.value) ? "block" : "none");

How to go on from here?1. Keep it a Javascript hack2. Try to implement it directly in the browser's codebases3. Try to get it standardized

How to go on from here?1. Keep it a Javascript hack2. Try to implement it directly in the browser's codebases3. Try to get it standardized

But then again...

Source: @stevefaulkner

Let's talk about Web components

Image CC-BY-SA 2.0 by Alan Chia, Source

Web components Standards:Template elementShadow DOMCustom elementsHTML imports

Go read the intro here

Build new HTML elementsusing HTML, CSS & Javascript

Template elements<template> <script> console.log("Hi!"); </script> <h1></h1></template>

<button id="add">Make a headline</button>

<script> document.getElementById("add").addEventListener("click", function() { var tplContent = document.querySelector("template").content; tplContent.querySelector("h1").textContent = window.prompt("Headline"); document.body.appendChild(tplContent.cloneNode(true)); });</script>

Shadow DOM<template> <script> console.log("Hi!"); </script> <h1></h1></template>

<button id="add">Make a headline</button><button id="test">Test for headlines</button>

<script> document.getElementById("add").addEventListener("click", function() { var tplContent = document.querySelector("template").content.cloneNode(true); tplContent.querySelector("h1").textContent = window.prompt("Headline");

var container = document.createElement("div"); var root = container.createShadowRoot(); root.appendChild(tplContent);

Custom elements<template> <script> console.log("Hi."); </script> <h1></h1></template>

<button id="add">Make a headline</button><button id="test">Test for headlines</button>

<script> var elemPrototype = Object.create(HTMLElement.prototype);

elemPrototype.createdCallback = function() { console.log("Created element"); this.root = this.createShadowRoot(); var tplContent = document.querySelector("template").content.cloneNode(true); this.root.appendChild(tplContent); };

HTML imports<link rel="import" href="filterlist.html">

<filter‑list> <li>Chuck Norris doesn't call the wrong number. You answer the wrong phone.</li> <li>Chuck Norris has been to Mars; that's why there are no signs of life.</li> <li>Chuck Norris refers to himself in fourth person.?</li> <li>Chuck Norris once leaned against a tower in Pisa, Italy.</li> <li>To keep is his mind sharp Chuck Norris plays Tic‑Tac‑Toe versus himself. He wins every time.</li> <li>Light is so fast, because it tries to escape Chuck Norris (but that obviously fails)</li> <li>The average room bears 73658 ways for Chuck Norris to kill you, including just the room itself.</li></filter‑list>

It's already in your browser.Sorta.

It's already in your browser.Sorta.

Browser supportTest yourself: bit.ly/webcomptest

Source: are-we-componentized-yet, captured 03.05.14

Useful stuffPolyfill & frameworks

PolymerX-Tags

Try it

BrickCustomElements.ioMozilla AppMaker

Thank you!Questions?

Slides: bit.ly/webcomponents-intro@g33konautBlog @ ox86.tumblr.com