Future js - A whirlwind tour of web components

1,400 views

Published on

Slide deck of my talk "A whirlwind tour of web components" for FutureJS 2014 in Barcelona.

Learn about the future of building web applications

Published in: Internet, Technology, Business
  • Be the first to comment

Future js - A whirlwind tour of web components

  1. 1. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 1/28 Web components A whirlwind tour
  2. 2. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 2/28 ¡Hola!
  3. 3. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 3/28 What I do Centralway @geekonaut
  4. 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. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 5/28 ...take that, Winter!
  6. 6. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 6/28 Buggy method, tho
  7. 7. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 7/28 Anyway...
  8. 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. 9. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 9/28 Let's talk about HTML Lego ad from 1978
  10. 10. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 10/28 We need to move forward quickly vs
  11. 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. 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. 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. 14. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 14/28 But then again... Source: @stevefaulkner
  15. 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. 16. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 16/28 Build new HTML elements using HTML, CSS & Javascript
  17. 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. 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. 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. 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. 21. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 21/28
  22. 22. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 22/28
  23. 23. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 23/28 It's already in your browser. Sorta.
  24. 24. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 24/28 It's already in your browser. Sorta.
  25. 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. 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. 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. 28. 5/3/2014 FutureJS - Web components http://localhost:8000/#27 28/28

×