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

313
-1

Published on

Published in: Internet, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
313
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×