Introduction to web components

1,674
-1

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,674
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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.

×