WEBCOMPONENTS
@marcbaechinger
‚web development is overly complex…‘
unknown, but desperate software engineer
lack of encapsulation and abstraction
TODAYS STANDARDS BODY
STANDARDS BODY
W3C webcomponents
STANDARDS BODY
W3C webcomponents
heavily in flux
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
heavily in flux
2013: same for x-tags and polymer
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for...
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for...
STANDARDS BODY
W3C webcomponents
webcomponents polyfill
x-tags polymer
brick polymer elements
heavily in flux
2013: same for...
http://www.w3.org/TR/components-intro/
Templates
Custom elements
Shadow DOM
Imports
June 2013
BROWSER SUPPORT
polymer
BROWSER SUPPORT
x-tags
polymer
HTML IMPORTS
imports.html
<link href="../styles/import.css" rel="stylesheet"/> 

<section id="root">

<h1>Caption of import</h1>

<p>im...
HTML IMPORTS
<link id="markup" rel="import" href="imports.html">
import html fragment
var link = __.e("#markup");

var markup = link.import;

var fragment = markup.querySelector("#root");
access import
HTML I...
var link = __.e("#markup");

var markup = link.import;

var fragment = markup.querySelector("#root");
access import
HTML I...
HTML IMPORTS
HTML IMPORTS
check for import property to feature test
SCRIPTS IN IMPORTS
// in the import fragment

<script>

(function (global) {

global.markup = {

hi: function () {}

};

}...
SCRIPTS IN IMPORTS
// in the import fragment

<script>

(function (global) {

global.markup = {

hi: function () {}

};

}...
SCRIPTS IN IMPORTS
// in the import fragment

<script>

(function (global) {

global.markup = {

hi: function () {}

};

}...
NO PARENT DOCUMENT!
<script>

var importDoc = 

document.currentScript.ownerDocument;



var parentDocument = document;

<...
NO PARENT DOCUMENT!
<script>

var importDoc = 

document.currentScript.ownerDocument;



var parentDocument = document;

<...
TEMPLATES
TEMPLATE - LAZY MARKUP
<template id="template">

<h1>Diego Maradona</h1>

<img src="maradona.jpg"/>

<script>

console.log...
TEMPLATE - LAZY MARKUP
<template id="template">

<h1>Diego Maradona</h1>

<img src="maradona.jpg"/>

<script>

console.log...
TEMPLATE - LAZY MARKUP
<template id="template">

<h1>Diego Maradona</h1>

<img src="maradona.jpg"/>

<script>

console.log...
FEATURETEST
function supportsTemplate() {

var el = document.createElement('template');

return !!('content' in el);

}
re...
INSERTING ATEMPLATE
var tmpl = __.e("#template"),

target = __.e("#target");



target.appendChild(

document.importNode(t...
IMPORTEDTEMPLATES
// select the import root from the ‚link‘ elem

var importLink = __.e("#import-1").import;

// select th...
SHADOW DOM
!
Denn die einen sind im Dunkeln

Und die andern sind im Licht

Und man siehet die im Lichte

Die im Dunkeln si...
RENDERTREE
t e
RENDERTREE
t e
shadow = target.createShadowRoot()
RENDERTREE
t e
shadow = target.createShadowRoot()
RENDERTREE
t e
shadow = target.createShadowRoot()
s
shadow root
RENDERTREE
t e
shadow = target.createShadowRoot() shadow.appendChild(element)
s
shadow root
RENDERTREE
t e
shadow = target.createShadowRoot()
<content/>
shadow.appendChild(element)
s
shadow root
HTML IMPORTS
HTML IMPORTS
initial child node
HTML IMPORTS
initial child node
shadow DOM from template
HTML IMPORTS
initial child node
shadow DOM from template
insertion point of initial content
SHADOW DOMTEMPLATES
function renderShadow(tmplId, targetSelector) {

var tmpl = __.e("#" + tmplId),

target = __.e(targetS...
SHADOW DOMTEMPLATES
function renderShadow(tmplId, targetSelector) {

var tmpl = __.e("#" + tmplId),

target = __.e(targetS...
SHADOW DOMTEMPLATES
<div id="name-shadow-hook" class="hook">

<span class="email">marc.baechinger@gmail.com</span>

<span ...
SHADOW DOMTEMPLATES
<div id="name-shadow-hook" class="hook">

<span class="email">marc.baechinger@gmail.com</span>

<span ...
SHADOW DOMTEMPLATES
<template id=„person-template">

<article id="master">

<header><content select=".header"/></header>

...
template demo
pic: www.lolpig.com
CUSTOM ELEMENTS
<woot/>
CUSTOM ELEMENTS
<polymer-ui-accordion selected="1" id="accordion">

<polymer-ui-collapsible id="abstraction">

<div class=...
CUSTOM ELEMENTS
CUSTOM ELEMENTS
invisible to querySelector and CSS rules
CUSTOM ELEMENTS
invisible to querySelector and CSS rules
use elements and attributes of DOM as 	

API to interact with the...
CUSTOM ELEMENTS
function (name, spec, callbacks) {

var proto =

Object.create(HTMLDivElement.prototype);



// […] check ...
CUSTOM ELEMENTS
function (name, spec, callbacks) {

var proto =

Object.create(HTMLDivElement.prototype);



// […] check ...
CUSTOM ELEMENTS
function (name, spec, callbacks) {

var proto =

Object.create(HTMLDivElement.prototype);



// […] check ...
CALLBACKS
proto.createdCallback = function () {}



proto.attachedCallback = function () {}



proto.detachedCallback = fu...
CALLBACKS
proto.createdCallback = function () {}



proto.attachedCallback = function () {}



proto.detachedCallback = fu...
CUSTOM ELEMENTS
register(

'x-label', 

{},

{

createdCallback: function() {},

attachedCallback: function() {}

}

);
x-label demo
pic: www.lolpig.com
WEBCOMPONENTS	

RECAP
polyfills to use it today
infrastructure for abstraction and
encapsulation
infrastructure to build frameworks 	

on top of ...
BRICK AND POLYMER
POLYMER
POLYMER
polyfill
POLYMER
polyfill
polymer framework (eg. databinding)
POLYMER
polyfill
polymer framework (eg. databinding)
polymer elements
POLYMER
polyfill
polymer framework (eg. databinding)
polymer elementspolymer elements
X-TAGS
X-TAGS API (IMPERATIVE)
MOZILLA.GITHUB.IO/BRICK/
MOZILLA.GITHUB.IO/BRICK/
available elements
MOZILLA.GITHUB.IO/BRICK/
available elements
styles and scripts of Brick
THX, GUYS!
RESOURCES
GENERAL
https://html5-demos.appspot.com/static/webcomponents/index.html	

!
www.html5rocks.com/en/tutorials/webcomponents/...
HTML IMPORTS
http://w3c.github.io/webcomponents/spec/imports/

http://www.w3.org/TR/2013/WD-html-imports-20130514/

http:/...
TEMPLATES
http://www.w3.org/TR/components-intro/#template-
section
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/
spec...
Upcoming SlideShare
Loading in...5
×

Introduction to web components

1,536

Published on

A short introduction to web components. The talk covers the basic standard specified by W3c like HTML imports, templates, shadow DOM and custom elements.

Further a short overview of polyme, x-tags/Brick is given and shows how these bring together native browser implementation, polyfills and framework code to leverage web components technology today.

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

No Downloads
Views
Total Views
1,536
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to web components"

  1. 1. WEBCOMPONENTS @marcbaechinger
  2. 2. ‚web development is overly complex…‘ unknown, but desperate software engineer
  3. 3. lack of encapsulation and abstraction
  4. 4. TODAYS STANDARDS BODY
  5. 5. STANDARDS BODY W3C webcomponents
  6. 6. STANDARDS BODY W3C webcomponents heavily in flux
  7. 7. STANDARDS BODY W3C webcomponents webcomponents polyfill heavily in flux
  8. 8. STANDARDS BODY W3C webcomponents webcomponents polyfill heavily in flux 2013: same for x-tags and polymer
  9. 9. STANDARDS BODY W3C webcomponents webcomponents polyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer
  10. 10. STANDARDS BODY W3C webcomponents webcomponents polyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer wrapper API (JS/HTML)
  11. 11. STANDARDS BODY W3C webcomponents webcomponents polyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer wrapper API (JS/HTML) element sets (accordion, …)
  12. 12. http://www.w3.org/TR/components-intro/ Templates Custom elements Shadow DOM Imports June 2013
  13. 13. BROWSER SUPPORT polymer
  14. 14. BROWSER SUPPORT x-tags polymer
  15. 15. HTML IMPORTS
  16. 16. imports.html <link href="../styles/import.css" rel="stylesheet"/> 
 <section id="root">
 <h1>Caption of import</h1>
 <p>imported text<p>
 </section>
 <script>
 (function (global) {
 global.markup = {
 hi: function () {
 console.log("hi from a fun declared in an import");
 }
 };
 }(this));
 </script>
  17. 17. HTML IMPORTS <link id="markup" rel="import" href="imports.html"> import html fragment
  18. 18. var link = __.e("#markup");
 var markup = link.import;
 var fragment = markup.querySelector("#root"); access import HTML IMPORTS <link id="markup" rel="import" href="imports.html"> import html fragment
  19. 19. var link = __.e("#markup");
 var markup = link.import;
 var fragment = markup.querySelector("#root"); access import HTML IMPORTS <link id="markup" rel="import" href="imports.html"> import html fragment usually cloned before use
  20. 20. HTML IMPORTS
  21. 21. HTML IMPORTS check for import property to feature test
  22. 22. SCRIPTS IN IMPORTS // in the import fragment
 <script>
 (function (global) {
 global.markup = {
 hi: function () {}
 };
 }(window));
 </script> // in the parent document
 window.markup.hi();

  23. 23. SCRIPTS IN IMPORTS // in the import fragment
 <script>
 (function (global) {
 global.markup = {
 hi: function () {}
 };
 }(window));
 </script> // in the parent document
 window.markup.hi();
 executed once when imported
  24. 24. SCRIPTS IN IMPORTS // in the import fragment
 <script>
 (function (global) {
 global.markup = {
 hi: function () {}
 };
 }(window));
 </script> // in the parent document
 window.markup.hi();
 parent global context executed once when imported
  25. 25. NO PARENT DOCUMENT! <script>
 var importDoc = 
 document.currentScript.ownerDocument;
 
 var parentDocument = document;
 </script>
 part of the imports.html
  26. 26. NO PARENT DOCUMENT! <script>
 var importDoc = 
 document.currentScript.ownerDocument;
 
 var parentDocument = document;
 </script>
 part of the imports.html so scripts behave the same as in parent doc
  27. 27. TEMPLATES
  28. 28. TEMPLATE - LAZY MARKUP <template id="template">
 <h1>Diego Maradona</h1>
 <img src="maradona.jpg"/>
 <script>
 console.log("exec template script");
 </script>
 </template>
  29. 29. TEMPLATE - LAZY MARKUP <template id="template">
 <h1>Diego Maradona</h1>
 <img src="maradona.jpg"/>
 <script>
 console.log("exec template script");
 </script>
 </template> lazy loaded
  30. 30. TEMPLATE - LAZY MARKUP <template id="template">
 <h1>Diego Maradona</h1>
 <img src="maradona.jpg"/>
 <script>
 console.log("exec template script");
 </script>
 </template> executed each time when applied lazy loaded
  31. 31. FEATURETEST function supportsTemplate() {
 var el = document.createElement('template');
 return !!('content' in el);
 } read-only DocumentFragment
  32. 32. INSERTING ATEMPLATE var tmpl = __.e("#template"),
 target = __.e("#target");
 
 target.appendChild(
 document.importNode(tmpl.content, true)
 );
  33. 33. IMPORTEDTEMPLATES // select the import root from the ‚link‘ elem
 var importLink = __.e("#import-1").import;
 // select the template within the import
 var tmpl = __.e("template", importLink); __.e("#target").appendChild(
 document.importNode(tmpl.content, true)
 );
  34. 34. SHADOW DOM ! Denn die einen sind im Dunkeln
 Und die andern sind im Licht
 Und man siehet die im Lichte
 Die im Dunkeln sieht man nicht ! aus Mackie Messer von Berthold Brecht
  35. 35. RENDERTREE t e
  36. 36. RENDERTREE t e shadow = target.createShadowRoot()
  37. 37. RENDERTREE t e shadow = target.createShadowRoot()
  38. 38. RENDERTREE t e shadow = target.createShadowRoot() s shadow root
  39. 39. RENDERTREE t e shadow = target.createShadowRoot() shadow.appendChild(element) s shadow root
  40. 40. RENDERTREE t e shadow = target.createShadowRoot() <content/> shadow.appendChild(element) s shadow root
  41. 41. HTML IMPORTS
  42. 42. HTML IMPORTS initial child node
  43. 43. HTML IMPORTS initial child node shadow DOM from template
  44. 44. HTML IMPORTS initial child node shadow DOM from template insertion point of initial content
  45. 45. SHADOW DOMTEMPLATES function renderShadow(tmplId, targetSelector) {
 var tmpl = __.e("#" + tmplId),
 target = __.e(targetSelector),
 shadow = target.createShadowRoot();
 
 target.style.display = "block";
 shadow.appendChild(
 tmpl.content.cloneNode(true)
 );
 }
  46. 46. SHADOW DOMTEMPLATES function renderShadow(tmplId, targetSelector) {
 var tmpl = __.e("#" + tmplId),
 target = __.e(targetSelector),
 shadow = target.createShadowRoot();
 
 target.style.display = "block";
 shadow.appendChild(
 tmpl.content.cloneNode(true)
 );
 } visually removes all previous children
  47. 47. SHADOW DOMTEMPLATES <div id="name-shadow-hook" class="hook">
 <span class="email">marc.baechinger@gmail.com</span>
 <span class="address">Webergasse 23, 8408 Winterthur</span>
 <span class="name">Hans Meier</span>
 <img src="../images/alaska.jpg" width="480"/>
 </div> <template id="person-template">
 <section>
 <h3><content select=".name"/></h3>
 <p><b>Address</b> <content select=".address"/></p>
 <p><b>E-Mail</b> <content select=".email"/></p>
 <div><content select=„img"/></div>
 </section>
 </template>
  48. 48. SHADOW DOMTEMPLATES <div id="name-shadow-hook" class="hook">
 <span class="email">marc.baechinger@gmail.com</span>
 <span class="address">Webergasse 23, 8408 Winterthur</span>
 <span class="name">Hans Meier</span>
 <img src="../images/alaska.jpg" width="480"/>
 </div> <template id="person-template">
 <section>
 <h3><content select=".name"/></h3>
 <p><b>Address</b> <content select=".address"/></p>
 <p><b>E-Mail</b> <content select=".email"/></p>
 <div><content select=„img"/></div>
 </section>
 </template> change initial DOM to change shadow dom
  49. 49. SHADOW DOMTEMPLATES <template id=„person-template">
 <article id="master">
 <header><content select=".header"/></header>
 <div><content select=".content"/></div>
 <footer><content select=".footer"/></footer>
 </article>
 </template>
  50. 50. template demo pic: www.lolpig.com
  51. 51. CUSTOM ELEMENTS <woot/>
  52. 52. CUSTOM ELEMENTS <polymer-ui-accordion selected="1" id="accordion">
 <polymer-ui-collapsible id="abstraction">
 <div class="polymer-ui-collapsible- header">Abstraction and encapsulation</div>
 <div>…</div>
 </polymer-ui-collapsible>
 <polymer-ui-collapsible id="abstraction">
 <div class="polymer-ui-collapsible- header">Abstraction and encapsulation</div>
 <div>…</div>
 </polymer-ui-collapsible>
 </polymer-ui-accordion>
  53. 53. CUSTOM ELEMENTS
  54. 54. CUSTOM ELEMENTS invisible to querySelector and CSS rules
  55. 55. CUSTOM ELEMENTS invisible to querySelector and CSS rules use elements and attributes of DOM as API to interact with the shadow DOM component:
 ! acc.setAttribute("selected", 1);
  56. 56. CUSTOM ELEMENTS function (name, spec, callbacks) {
 var proto =
 Object.create(HTMLDivElement.prototype);
 
 // […] check for callbacks
 
 return document.registerElement(name, {
 prototype: Object.create(proto, spec || {})
 });
 }
  57. 57. CUSTOM ELEMENTS function (name, spec, callbacks) {
 var proto =
 Object.create(HTMLDivElement.prototype);
 
 // […] check for callbacks
 
 return document.registerElement(name, {
 prototype: Object.create(proto, spec || {})
 });
 } returns a constructor
  58. 58. CUSTOM ELEMENTS function (name, spec, callbacks) {
 var proto =
 Object.create(HTMLDivElement.prototype);
 
 // […] check for callbacks
 
 return document.registerElement(name, {
 prototype: Object.create(proto, spec || {})
 });
 } returns a constructor the prototype of the constructor
  59. 59. CALLBACKS proto.createdCallback = function () {}
 
 proto.attachedCallback = function () {}
 
 proto.detachedCallback = function () {} proto.attributeChangedCallback = f(name,oldV,newV) {}
  60. 60. CALLBACKS proto.createdCallback = function () {}
 
 proto.attachedCallback = function () {}
 
 proto.detachedCallback = function () {} proto.attributeChangedCallback = f(name,oldV,newV) {} this is the DOM element
  61. 61. CUSTOM ELEMENTS register(
 'x-label', 
 {},
 {
 createdCallback: function() {},
 attachedCallback: function() {}
 }
 );
  62. 62. x-label demo pic: www.lolpig.com
  63. 63. WEBCOMPONENTS RECAP
  64. 64. polyfills to use it today infrastructure for abstraction and encapsulation infrastructure to build frameworks on top of it heavily pushed by Google future in the dust RECAP
  65. 65. BRICK AND POLYMER
  66. 66. POLYMER
  67. 67. POLYMER polyfill
  68. 68. POLYMER polyfill polymer framework (eg. databinding)
  69. 69. POLYMER polyfill polymer framework (eg. databinding) polymer elements
  70. 70. POLYMER polyfill polymer framework (eg. databinding) polymer elementspolymer elements
  71. 71. X-TAGS
  72. 72. X-TAGS API (IMPERATIVE)
  73. 73. MOZILLA.GITHUB.IO/BRICK/
  74. 74. MOZILLA.GITHUB.IO/BRICK/ available elements
  75. 75. MOZILLA.GITHUB.IO/BRICK/ available elements styles and scripts of Brick
  76. 76. THX, GUYS!
  77. 77. RESOURCES
  78. 78. GENERAL https://html5-demos.appspot.com/static/webcomponents/index.html ! www.html5rocks.com/en/tutorials/webcomponents/customelements/ ! ! https://developer.mozilla.org/en-US/Apps/Tools_and_frameworks/x-tags
  79. 79. HTML IMPORTS http://w3c.github.io/webcomponents/spec/imports/
 http://www.w3.org/TR/2013/WD-html-imports-20130514/
 http://www.w3.org/TR/2014/WD-html-imports-20140311/ http://www.html5rocks.com/en/tutorials/webcomponents/ imports/
 http://www.polymer-project.org/platform/html-imports.html https://bugzilla.mozilla.org/show_bug.cgi?id=877072
 http://www.x-tags.org/blog
  80. 80. TEMPLATES http://www.w3.org/TR/components-intro/#template- section https://dvcs.w3.org/hg/webcomponents/raw-file/tip/ spec/templates/index.html http://www.html5rocks.com/en/tutorials/webcomponents/ template/
  1. A particular slide catching your eye?

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

×