Slide deck of my talk "A whirlwind tour of web components" for FutureJS 2014 in Barcelona. Learn about the future of building web applications

1. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 1/28
Web components
A whirlwind tour

2. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 2/28
¡Hola!

3. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 3/28
What I do
Centralway
@geekonaut

4. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 4/28
I am from Zurich
Which isn't as boring as you may think...

5. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 5/28
...take that, Winter!

6. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 6/28
Buggy method, tho

7. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 7/28
Anyway...

8. 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

9. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 9/28
Let's talk about HTML
Lego ad from 1978

10. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 10/28
We need to move forward quickly
vs

11. 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");

12. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 12/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized

13. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 13/28
How to go on from here?
1. Keep it a Javascript hack
2. Try to implement it directly in the browser's codebases
3. Try to get it standardized

14. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 14/28
But then again...
Source: @stevefaulkner

15. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 15/28
Web components Standards:
Template element
Shadow DOM
Custom elements
HTML imports
Go read the intro here

16. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 16/28
Build new HTML elements
using HTML, CSS & Javascript

17. 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>

18. 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");

19. 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();

20. 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>

21. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 21/28

22. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 22/28

23. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 23/28
It's already in your browser.
Sorta.

24. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 24/28
It's already in your browser.
Sorta.

25. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 25/28
Browser support
Source: are-we-componentized-yet, captured 03.05.14

26. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 26/28
Useful stuff
Polyfill & frameworks
Polymer
X-Tags
Try it
Brick
CustomElements.io
Mozilla AppMaker

27. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 27/28
Thank you!
Questions?
Slides: avgp.github.io/futurejs2014
@geekonaut
Blog @ ox86.tumblr.com
Thx to Centralway!

28. 5/3/2014 FutureJS - Web components
http://localhost:8000/#27 28/28