Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Devoxx 2014-webComponents

My slides from devoxx-2014 on web components

  • Soyez le premier à commenter

Devoxx 2014-webComponents

  1. 1. Web Components A revolution ? @cbalit 0
  2. 2. Why components ? This is the way we already do it For widgets ? applications ? pluggins ? Reusable Encapsulated Extendable
  3. 3. What is it ? 4 specifications 1. Html Import 2. Shadow Dom 3. Template 4. Custom Element
  4. 4. Html Import
  5. 5. What is it ? Include an HTML element inside another one
  6. 6. How ? <link rel="import" href="/path/myfile.html"> CORS Load once Don't block page parsing
  7. 7. Get the content HTML and CSS are just loaded but not included (available) We retrieve the content using the import property <link id="my-import" rel="import" href="myfile.html"> <script> var link = document.querySelector('#my-import'); var content = link.import; //I can now acces to my content var el = content.querySelector('.mySelector'); document.body.appendChild(el.cloneNode(true)); </script>
  8. 8. And for Javascript ... Run in the page context Can access to its DOM ... ... and the one from the page <script> var importDoc = document.currentScript.ownerDocument; var mainDoc = document; </script>
  9. 9. Events Load and Error Event <script async=""> function handleLoad(e) { console.log('Loaded import: ' + e.target.href); } function handleError(e) { console.log('Error loading import: ' + e.target.href); } </script> <link rel="import" href="file.html" onload="handleLoad(event)" onerror="handleError(event)"
  10. 10. Support
  11. 11. Shadow Dom
  12. 12. Old !!!! Browsers already use it <input type="range"> <input type="date"> <input type="hour"> jj/mm/aaaa
  13. 13. What is it ? It's all about Encapsulation
  14. 14. What does this mean Isolated container New kind of node shadow root shadow host
  15. 15. With Javascript createShadowRoot element.shadowRoot <button>Normal button!</button> <button id="myBtn">Hello, world!</button> <script> var host = document.querySelector('#myBtn'); var root = host.createShadowRoot(); root.textContent = 'こんにちは、影の世界!'; </script> Normal button! こんにちは、影の世界!
  16. 16. Shadow DOM versus Light DOM <my-element> <span>Hello</span> </my-element> visible sub-tree (childNodes, children, innerHTML ...) internal node composed DOM: what the browser see and render
  17. 17. Insertions points Define render area in the shadow dom No logical link <div id="host"> <span class="title">Hello too</span> <span>Bla Bla Bla</span> </div> <script> var shadow = document.querySelector('#host').createShadowRoot(); shadow.innerHTML = '<h1>In Shadow</h1>' + '<h2><content select=".title"></content></h2>' + '<section><content select="*"></content></section>'; </script>
  18. 18. Support
  19. 19. Template
  20. 20. What is it ? Reusable DOM template
  21. 21. Not in the document No side effect DOM not rendered Script not parsed Image not loaded
  22. 22. Usage 1. Get the template with a selector 2. acces to the content with the content property 3. clone: he's alive 4. insert the clone element in the page
  23. 23. Exemple <template id="mytemplate"> <img src="img/templates_64x64.png" alt="great image"> <div id="comment">My new comment</div> </template> <script> var t = document.querySelector('#mytemplate'); // Populate the src at runtime. t.content.querySelector('img').src = 'img/templates_64x64.png'; t.content.querySelector('#comment').innerHTML = 'My new comment'; var clone = document.importNode(t.content, true); document.body.appendChild(clone); </script> My new comment
  24. 24. Support
  25. 25. Custom element
  26. 26. What is it ? Define new HTML element Extend existing elements
  27. 27. How ? registerElement a name (with a -) a prototype (HTMLElement by default) <script> </script> <my-elt></my-elt> var myElt = document.registerElement('my-elt',HTMLElement.prototype);
  28. 28. Extend existing elements <script> var myButton = document.registerElement('my-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' }); </script> <button is="”my-button”"></button>
  29. 29. Lifecycle Declaration vs register Seen as unresolved pseudo-selector :unresolved <style> *:unresolved { color: red; } </style> <my-element>register</my-element> <button onclick="document.registerElement('my-element')">Register</button> i'm unresolved Register
  30. 30. Callback createdCallback attachedCallback detachedCallback attributeChangedCallback var myElemtProto = Object.create(HTMLElement.prototype); myElemtProto.createdCallback = function() {}; var myElemt = document.registerElement('my-element', myElemtProto);
  31. 31. Add content
  32. 32. innerHTML myEltProto.createdCallback = function() { this.innerHTML = "<b>un peu de contenu!</b>"; };
  33. 33. shadowDom myEltProto.createdCallback = function() { var shadow = this.createShadowRoot(); shadow.innerHTML = "<b>un peu de contenu!</b>"; };
  34. 34. Template <template id="sdtemplate"> </template> myEltProto.createdCallback = function() { var t = document.querySelector('#sdtemplate'); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); };
  35. 35. Add code
  36. 36. The prototype myEltProto.myFctn=function(){...} Object.defineProperty(myEltProto, "bar", {value: 5});
  37. 37. Support
  38. 38. And so what ?
  39. 39. Real good specification Can be used alone But a weak support So what can we do ?
  40. 40. POLYMER polyfills (platform.js) components (core-elements, paper-elements) sugaring (polymer.js)
  41. 41. X-TAG Web Components Polyfills (custom element et HTMLImports) X-Tag Custom Elements X-Tag Core Library
  42. 42. BOSONIC polyfills (platform.js) components
  43. 43. Ressources Import Shadow Dom Styling Shadow Dom Template Custom Elements The Web Component Ecosystem Polymer X-Tag Bosonic Credits: Eric Bidelman,Rob Dodson,Dominic Cooney
  44. 44. Thank you !!! cbalit
  45. 45. My new comment

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • EmmanuelDeillerPro

    Dec. 10, 2014

My slides from devoxx-2014 on web components

Vues

Nombre de vues

3 573

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

199

Actions

Téléchargements

6

Partages

0

Commentaires

0

Mentions J'aime

1

×