WEB COMPONENTS   ParisJS #16 — 29/02/12Thomas Bassetto — @tbassetto
ATTENTIONLes exemples de cette présentation sont peut-être                déjà obsolètes.
LES ORIGINES• HTML5:beaucoup de #header, #footer, .article => <header>, <footer>, <article>• Nombreux composants (jQuery U...
AUJOURDHUI• Comment   bien séparer le code que l’on a écrit et celui qui va l’utiliser ?• Le(quasi-)seul moyen est d’utili...
YUI<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script><script type="text/javascript">YUI().use(cal...
DOJO<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script><script>dojo.require("dijit.dijit...
DOJO<div dojoType="dijit.Calendar"        value="2009-08-07"        isDisabledDate="dojo.date.locale.isWeekend"        onC...
WEB COMPONENTS• templates• decorators• custom   elements• shadow   DOM
<TEMPLATE>
<TEMPLATE>• Contient   du code qui sera utile plus tard• Codeparsé, mais inerte: scripts non exécutés, images non téléchar...
<TEMPLATE>  <template id="commentTemplate">    <div>        <img src="">        <div class="comment"></div>        …    </...
<DECORATOR>
<DECORATOR>• Permetd’améliorer ou de remplacer la présentation d’éléments existants• S’utilise         via CSS, comme tout...
<DECORATOR>   <decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style sco...
<DECORATOR><decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style scoped...
<DECORATOR><decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style scoped...
<DECORATOR><decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style scoped...
<DECORATOR><decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style scoped...
<DECORATOR><decorator id="fade-to-white">    <template>        <div style="position: relative;">             <style scoped...
<DECORATOR>• L’élement<content> est l’endroit ou le contenu de l’élement “décoré” (ses enfants) sera inséré• Onapplique le...
<DECORATOR>.poem {    decorator: url(#fade-to-white);    font-variant: small-caps;}
<DECORATOR><div class="poem">    Two roads diverged in a yellow wood,<br>    …</div>
<DECORATOR><div class="poem" style="font-variant: small-caps;">    <div style="position: relative;">        Two roads dive...
<ELEMENT>
<ELEMENT><element extends="button" name="x-fancybutton">    …</element>
<ELEMENT>  <element extends="button" name="x-fancybutton">    <template>        <style scoped>            div.fancy {     ...
<ELEMENT><!-- definition --><element extends="button" name="x-fancybutton">    …</element><!-- use --><button is="x-fancyb...
<ELEMENT>var b = document.createElement("x-fancybutton");// will display <button is="x-fancybutton"></button>alert(b.outer...
<ELEMENT>• Uncustom element peut optionnellement écouter quatre “lifecycle” callbacks:• created       : appelé par le cons...
SHADOW DOM
SHADOW DOM        <input id="foo" type="range">var slider = document.getElementsById("foo"); console.log(slider.firstChild)...
SHADOW DOM<audio src="/test/audio.ogg"></audio>      audio * {        border: 3px solid red;      }
SHADOW DOM<div>    <div class="stuff">        <content><!-- all children will appear here --></content>    </div></div>
SHADOW DOM<div>    <!-- all h1.cool children here -->    <content select="h1.cool"></content>    <div class="cool">       ...
SHADOW DOMExemple : http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-example
CONCLUSION• <style       scoped> et Shadow DOM déjà disponible dans Chromium (désactivés par défaut)• Spécification   qui é...
QUESTIONS ?
ONE MORE THING         On recrute :)
Upcoming SlideShare
Loading in...5
×

Web Components & Shadow DOM

1,983
-1

Published on

Présentation sur la spéc. Web Components & Shadow DOM lors du meetup ParisJS de février 2012.

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

  • Be the first to like this

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

No notes for slide

Web Components & Shadow DOM

  1. 1. WEB COMPONENTS ParisJS #16 — 29/02/12Thomas Bassetto — @tbassetto
  2. 2. ATTENTIONLes exemples de cette présentation sont peut-être déjà obsolètes.
  3. 3. LES ORIGINES• HTML5:beaucoup de #header, #footer, .article => <header>, <footer>, <article>• Nombreux composants (jQuery UI, Dojo, Ext JS, etc.) => Web Components• Précédentes tentatives : MSIE behaviors, XBL, XBL2• http://www.w3.org/2008/webapps/wiki/ Component_Model_Use_Cases
  4. 4. AUJOURDHUI• Comment bien séparer le code que l’on a écrit et celui qui va l’utiliser ?• Le(quasi-)seul moyen est d’utiliser des iframes (ou svg:use)
  5. 5. YUI<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script><script type="text/javascript">YUI().use(calendar, datatype-date, function(Y) { var calendar = new Y.Calendar({ contentBox: "#mycalendar", width:340px, showPrevMonth: true, showNextMonth: true, date: new Date(2011, 07, 01)}).render();});</script>
  6. 6. DOJO<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script><script>dojo.require("dijit.dijit");dojo.require("dijit.Calendar");dojo.ready(function() { var c = new dijit.Calendar({ value: new Date(), isDisabledDate: function(d) { // ... } }); document.body.appendChild(c.domNode);});</script>
  7. 7. DOJO<div dojoType="dijit.Calendar" value="2009-08-07" isDisabledDate="dojo.date.locale.isWeekend" onChange="..."></div>
  8. 8. WEB COMPONENTS• templates• decorators• custom elements• shadow DOM
  9. 9. <TEMPLATE>
  10. 10. <TEMPLATE>• Contient du code qui sera utile plus tard• Codeparsé, mais inerte: scripts non exécutés, images non téléchargées, HTML non “rendu”
  11. 11. <TEMPLATE> <template id="commentTemplate"> <div> <img src=""> <div class="comment"></div> … </div></template>var t = document.querySelector("#commentTemplate");// Populate content and img[src] values in thetemplate.someElement.appendChild(t.content.cloneNode());
  12. 12. <DECORATOR>
  13. 13. <DECORATOR>• Permetd’améliorer ou de remplacer la présentation d’éléments existants• S’utilise via CSS, comme tout élement de présentation• Permetd’utiliser du code HTML pour enrichir la présentation !
  14. 14. <DECORATOR> <decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  15. 15. <DECORATOR><decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  16. 16. <DECORATOR><decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  17. 17. <DECORATOR><decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  18. 18. <DECORATOR><decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  19. 19. <DECORATOR><decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0%, rgba(255, 255, 255, 0) 100%); } </style> <content></content> <div id="fog"></div> </div> </template></decorator>
  20. 20. <DECORATOR>• L’élement<content> est l’endroit ou le contenu de l’élement “décoré” (ses enfants) sera inséré• Onapplique le décorateur avec la propriété decorator et un ID
  21. 21. <DECORATOR>.poem { decorator: url(#fade-to-white); font-variant: small-caps;}
  22. 22. <DECORATOR><div class="poem"> Two roads diverged in a yellow wood,<br> …</div>
  23. 23. <DECORATOR><div class="poem" style="font-variant: small-caps;"> <div style="position: relative;"> Two roads diverged in a yellow wood,<br> … <div style="position: absolute; left: 0; …"></div> </div></div>
  24. 24. <ELEMENT>
  25. 25. <ELEMENT><element extends="button" name="x-fancybutton"> …</element>
  26. 26. <ELEMENT> <element extends="button" name="x-fancybutton"> <template> <style scoped> div.fancy { … } </style> <div class="fancy"> <content></content> <div id="t"></div> <div id="l"></div> <div id="b"></div> <div id="r"></div> </div> </template></element>
  27. 27. <ELEMENT><!-- definition --><element extends="button" name="x-fancybutton"> …</element><!-- use --><button is="x-fancybutton"> Show time</button>
  28. 28. <ELEMENT>var b = document.createElement("x-fancybutton");// will display <button is="x-fancybutton"></button>alert(b.outerHTML);
  29. 29. <ELEMENT>• Uncustom element peut optionnellement écouter quatre “lifecycle” callbacks:• created : appelé par le constructeur, avec une instace ShadowRoot, créé depuis <template> s’il existe• attributeChanged : quand un de ses attributs change• inserted : quand il est inséré dans le document• removed : une fois enlevé du document
  30. 30. SHADOW DOM
  31. 31. SHADOW DOM <input id="foo" type="range">var slider = document.getElementsById("foo"); console.log(slider.firstChild); // returns null
  32. 32. SHADOW DOM<audio src="/test/audio.ogg"></audio> audio * { border: 3px solid red; }
  33. 33. SHADOW DOM<div> <div class="stuff"> <content><!-- all children will appear here --></content> </div></div>
  34. 34. SHADOW DOM<div> <!-- all h1.cool children here --> <content select="h1.cool"></content> <div class="cool"> <!-- all .cool children (except the ones that are h1.cool) --> <content select=".cool"></content> </div> <div class="stuff"> <!-- all remaining children here --> <content></content> </div></div>
  35. 35. SHADOW DOMExemple : http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-dom-example
  36. 36. CONCLUSION• <style scoped> et Shadow DOM déjà disponible dans Chromium (désactivés par défaut)• Spécification qui évolue très fréquement• Mozilla préfère attendre avant d’implémenter, aucune idée pour les autres navigateurs
  37. 37. QUESTIONS ?
  38. 38. ONE MORE THING On recrute :)
  1. A particular slide catching your eye?

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

×