Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web components
A whirlwind tour
Ohai
I'm @g33konaut
These slides: bit.ly/webcomponents-intro
Ebook: leanpub.com/webcomponents
geekonaut.de
github.com/avgp
Let's talk about HTML
Lego ad from 1978
HTML is easy
1991: HTML 1.0
TITLE
ISINDEX
ANCHOR
ISINDEX
PLAINTEXT
LISTING
P
H1, H2, ..., H6
ADDRESS
UL, MENU, DIR
1993: HTML 2.0
+ Forms
+ Images
+ Head/Body
+ Strict mode
1995: HTML 3.0
150 pages of specification
Different browsers have their own extensions
:(
1998: HTML 4.0
Three infamous modes:
1. Strict
2. Transitional
3. Frameset
Tried to standardize most of the browser-specif...
1998 - 2008
...
The web evolved
vs
The web gained power
RIA, 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">
<u...
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 ...
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 ...
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 element
Shadow DOM
Custom elements
HTML imports
Go read the intro here
Build new HTML elements
using HTML, CSS & Javascript
Template elements
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline...
Shadow DOM
<template>
<script>
console.log("Hi!");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</butto...
Custom elements
<template>
<script>
console.log("Hi.");
</script>
<h1></h1>
</template>
<button id="add">Make a headline</...
HTML imports
<link rel="import" href="filterlist.html">
<filter‑list>
<li>Chuck Norris doesn't call the wrong number. You ...
It's already in your browser.
Sorta.
It's already in your browser.
Sorta.
Browser support
Test yourself: bit.ly/webcomptest
Source: are-we-componentized-yet, captured 03.05.14
Useful stuff
Polyfill & frameworks
Polymer
X-Tags
Try it
Brick
CustomElements.io
Mozilla AppMaker
Thank you!
Questions?
Slides: bit.ly/webcomponents-intro
@g33konaut
Blog @ ox86.tumblr.com
Web components - a whirlwind tour
Web components - a whirlwind tour
Upcoming SlideShare
Loading in …5
×

Web components - a whirlwind tour

505 views

Published on

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

  • Be the first to like this

Web components - a whirlwind tour

  1. 1. Web components A whirlwind tour
  2. 2. Ohai I'm @g33konaut These slides: bit.ly/webcomponents-intro Ebook: leanpub.com/webcomponents geekonaut.de github.com/avgp
  3. 3. Let's talk about HTML Lego ad from 1978
  4. 4. HTML is easy
  5. 5. 1991: HTML 1.0 TITLE ISINDEX ANCHOR ISINDEX PLAINTEXT LISTING P H1, H2, ..., H6 ADDRESS UL, MENU, DIR
  6. 6. 1993: HTML 2.0 + Forms + Images + Head/Body + Strict mode
  7. 7. 1995: HTML 3.0 150 pages of specification Different browsers have their own extensions :(
  8. 8. 1998: HTML 4.0 Three infamous modes: 1. Strict 2. Transitional 3. Frameset Tried to standardize most of the browser-specific elements
  9. 9. 1998 - 2008 ...
  10. 10. The web evolved vs
  11. 11. The web gained power RIA, Web 2.0 and the first Smartphone Image: Spiegel
  12. 12. But HTML fell behind
  13. 13. 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");
  14. 14. 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
  15. 15. 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
  16. 16. But then again... Source: @stevefaulkner
  17. 17. Let's talk about Web components Image CC-BY-SA 2.0 by Alan Chia, Source
  18. 18. Web components Standards: Template element Shadow DOM Custom elements HTML imports Go read the intro here
  19. 19. Build new HTML elements using HTML, CSS & Javascript
  20. 20. 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>
  21. 21. 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);
  22. 22. 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); };
  23. 23. 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>
  24. 24. It's already in your browser. Sorta.
  25. 25. It's already in your browser. Sorta.
  26. 26. Browser support Test yourself: bit.ly/webcomptest Source: are-we-componentized-yet, captured 03.05.14
  27. 27. Useful stuff Polyfill & frameworks Polymer X-Tags Try it Brick CustomElements.io Mozilla AppMaker
  28. 28. Thank you! Questions? Slides: bit.ly/webcomponents-intro @g33konaut Blog @ ox86.tumblr.com

×