Introduction to web components

  • 1,268 views
Uploaded 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. …

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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,268
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
23
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WEBCOMPONENTS @marcbaechinger
  • 2. ‚web development is overly complex…‘ unknown, but desperate software engineer
  • 3. lack of encapsulation and abstraction
  • 4. TODAYS STANDARDS BODY
  • 5. STANDARDS BODY W3C webcomponents
  • 6. STANDARDS BODY W3C webcomponents heavily in flux
  • 7. STANDARDS BODY W3C webcomponents webcomponents polyfill heavily in flux
  • 8. STANDARDS BODY W3C webcomponents webcomponents polyfill heavily in flux 2013: same for x-tags and polymer
  • 9. STANDARDS BODY W3C webcomponents webcomponents polyfill x-tags polymer brick polymer elements heavily in flux 2013: same for x-tags and polymer
  • 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. 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. http://www.w3.org/TR/components-intro/ Templates Custom elements Shadow DOM Imports June 2013
  • 13. BROWSER SUPPORT polymer
  • 14. BROWSER SUPPORT x-tags polymer
  • 15. HTML IMPORTS
  • 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. HTML IMPORTS <link id="markup" rel="import" href="imports.html"> import html fragment
  • 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. 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. HTML IMPORTS
  • 21. HTML IMPORTS check for import property to feature test
  • 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. 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. 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. NO PARENT DOCUMENT! <script>
 var importDoc = 
 document.currentScript.ownerDocument;
 
 var parentDocument = document;
 </script>
 part of the imports.html
  • 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. TEMPLATES
  • 28. TEMPLATE - LAZY MARKUP <template id="template">
 <h1>Diego Maradona</h1>
 <img src="maradona.jpg"/>
 <script>
 console.log("exec template script");
 </script>
 </template>
  • 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. 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. FEATURETEST function supportsTemplate() {
 var el = document.createElement('template');
 return !!('content' in el);
 } read-only DocumentFragment
  • 32. INSERTING ATEMPLATE var tmpl = __.e("#template"),
 target = __.e("#target");
 
 target.appendChild(
 document.importNode(tmpl.content, true)
 );
  • 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. 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. RENDERTREE t e
  • 36. RENDERTREE t e shadow = target.createShadowRoot()
  • 37. RENDERTREE t e shadow = target.createShadowRoot()
  • 38. RENDERTREE t e shadow = target.createShadowRoot() s shadow root
  • 39. RENDERTREE t e shadow = target.createShadowRoot() shadow.appendChild(element) s shadow root
  • 40. RENDERTREE t e shadow = target.createShadowRoot() <content/> shadow.appendChild(element) s shadow root
  • 41. HTML IMPORTS
  • 42. HTML IMPORTS initial child node
  • 43. HTML IMPORTS initial child node shadow DOM from template
  • 44. HTML IMPORTS initial child node shadow DOM from template insertion point of initial content
  • 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. 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. 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. 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. 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. template demo pic: www.lolpig.com
  • 51. CUSTOM ELEMENTS <woot/>
  • 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. CUSTOM ELEMENTS
  • 54. CUSTOM ELEMENTS invisible to querySelector and CSS rules
  • 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. 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. 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. 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. CALLBACKS proto.createdCallback = function () {}
 
 proto.attachedCallback = function () {}
 
 proto.detachedCallback = function () {} proto.attributeChangedCallback = f(name,oldV,newV) {}
  • 60. CALLBACKS proto.createdCallback = function () {}
 
 proto.attachedCallback = function () {}
 
 proto.detachedCallback = function () {} proto.attributeChangedCallback = f(name,oldV,newV) {} this is the DOM element
  • 61. CUSTOM ELEMENTS register(
 'x-label', 
 {},
 {
 createdCallback: function() {},
 attachedCallback: function() {}
 }
 );
  • 62. x-label demo pic: www.lolpig.com
  • 63. WEBCOMPONENTS RECAP
  • 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. BRICK AND POLYMER
  • 66. POLYMER
  • 67. POLYMER polyfill
  • 68. POLYMER polyfill polymer framework (eg. databinding)
  • 69. POLYMER polyfill polymer framework (eg. databinding) polymer elements
  • 70. POLYMER polyfill polymer framework (eg. databinding) polymer elementspolymer elements
  • 71. X-TAGS
  • 72. X-TAGS API (IMPERATIVE)
  • 73. MOZILLA.GITHUB.IO/BRICK/
  • 74. MOZILLA.GITHUB.IO/BRICK/ available elements
  • 75. MOZILLA.GITHUB.IO/BRICK/ available elements styles and scripts of Brick
  • 76. THX, GUYS!
  • 77. RESOURCES
  • 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. 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. 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/