Post on 16-Apr-2017
transcript
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 3/28
What I do
Centralway
@geekonaut
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 4/28
I am from ZurichWhich isn't as boring as you may think...
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 8/28
Let's talk about Web components
Image CC-BY-SA 2.0 by Alan Chia, Source
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 9/28
Let's talk about HTML
Lego ad from 1978
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 10/28
We need to move forward quickly
vs
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 11/28
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");
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 12/28
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
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 13/28
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
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 14/28
But then again...
Source: @stevefaulkner
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 15/28
Web components Standards:Template elementShadow DOMCustom elementsHTML imports
Go read the intro here
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 16/28
Build new HTML elementsusing HTML, CSS & Javascript
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 17/28
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>
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 18/28
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");
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 19/28
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();
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 20/28
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>
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 23/28
It's already in your browser.Sorta.
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 24/28
It's already in your browser.Sorta.
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 25/28
Browser support
Source: are-we-componentized-yet, captured 03.05.14
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 26/28
Useful stuffPolyfill & frameworks
PolymerX-Tags
Try it
BrickCustomElements.ioMozilla AppMaker
5/3/2014 FutureJS - Web components
http://localhost:8000/#27 27/28
Thank you!Questions?
Slides: avgp.github.io/futurejs2014@geekonautBlog @ ox86.tumblr.comThx to Centralway!