L'avenir passe par les Web Components, la preuve par dix !

Templating, encapsulation, éléments customs, databinding... La standardisation est en marche : Bienvenue aux Web Components. En 10 points, je vous montrerai ce qui est en train de se préparer dans vos navigateurs et ce que cela va nous permettre à nous, développeurs.

Transcript

1. WEB COMPONENTS L’avenir passe par les La preuve par 10
2. Julien Vey Zenika @julienvey julienvey.com
3. Standard #1
4. Standard #1
6. Soutenu par les GRANDS du WEB #2
10. Templates #3
11. <template id="mytemplate"> <img src=""> <div class="comment"></div> </template>
12. <template id="mytemplate"> <img src=""> <div class="comment"></div> </template> parsé mais PAS AFFICHÉ
13. <template id="mytemplate"> <img src=""> <div class="comment"></div> </template> parsé mais PAS AFFICHÉ <script> ne s’EXÉCUTENT PAS
14. <template id="mytemplate"> <img src=""> <div class="comment"></div> </template> parsé mais PAS AFFICHÉ <script> ne s’EXÉCUTENT PAS <img> ne se CHARGENT PAS
15. Encapsulation #4
16. Encapsulation #4 Ou comment séparer le code que vous FOURNISSEZ de celui qui va le CONSOMMER
17. <video controls src="/ma/super/video"></video> SHADOW DOM
18. <video controls="" height="300" src="/ma/super/video"> #shadow-root <div> <div> <div> <input type="button"> <input type="range" precision="float" max="596.48"> <div style="display: none;">0:00</div><div>9:56</div> <input type="button"> <input type="range" precision="float" max="1" style=""> <input type="button" style="display: none;"> <input type="button" style=""> </div> </div> </div> </video> SHADOW DOM
19. Composition #5
20. INSERTION POINTS
21. <template> <h1>Les Human Talks c’est ça :</h1> <content></content> <h1>Et c’est génial !</h1> </template> INSERTION POINTS
22. <template> <h1>Les Human Talks c’est ça :</h1> <content></content> <h1>Et c’est génial !</h1> </template> <div id="humantalks"> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> </div> INSERTION POINTS
23. <template> <h1>Les Human Talks c’est ça :</h1> <content></content> <h1>Et c’est génial !</h1> </template> <div id="humantalks"> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> </div> <div id="humantalks"> #shadow-root <h1>Les Human Talks c’est ça :</h1> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> <h1>Et c’est génial</h1> </div> INSERTION POINTS
24. Encapsulation de STYLE #6
25. <h1>Bienvenue</h1> <div id="humantalks"> #shadow-root <h1>Les Human Talks c’est ça :</h1> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> <h1>Et c’est génial</h1> </div>
26. <h1>Bienvenue</h1> <div id="humantalks"> #shadow-root <style>h1 { color : red }</style> <h1>Les Human Talks c’est ça :</h1> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> <h1>Et c’est génial</h1> </div>
27. <h1>Bienvenue</h1> <div id="humantalks"> #shadow-root <style>h1 { color : red }</style> <h1>Les Human Talks c’est ça :</h1> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> <h1>Et c’est génial</h1> </div>
28. <h1>Bienvenue</h1> <div id="humantalks"> #shadow-root <style>h1 { color : red }</style> <h1>Les Human Talks c’est ça :</h1> <div>Web Components</div> <div>Vert.x</div> <div>Hack Yourself</div> <div>Montez votre boîte</div> <div>Be a VRP</div> <h1>Et c’est génial</h1> </div>
29. Réutilisabilité #7
30. Réutilisabilité #7 <element>
31. CUSTOM ELEMENTS <element name="x-megabutton" extends="button" constructor="MegaButton"> </element>
32. CUSTOM ELEMENTS <element name="x-megabutton" extends="button" constructor="MegaButton"> <template> <button><content></content></button> </template> </element>
33. CUSTOM ELEMENTS <element name="x-megabutton" extends="button" constructor="MegaButton"> <template> <button><content></content></button> </template> <script> MegaButton.prototype = { megaClick: function(e) { play('moo.mp3'); } }; </script> </element>
34. CUSTOM ELEMENTS <element name="x-megabutton" extends="button" constructor="MegaButton"> <template> <button><content></content></button> </template> <script> MegaButton.prototype = { megaClick: function(e) { play('moo.mp3'); } }; </script> </element> <link rel="component" href="x-megabutton.html">
35. CUSTOM ELEMENTS <element name="x-megabutton" extends="button" constructor="MegaButton"> <template> <button><content></content></button> </template> <script> MegaButton.prototype = { megaClick: function(e) { play('moo.mp3'); } }; </script> </element> <link rel="component" href="x-megabutton.html"> <x-megabutton>Better Buttonz</x-megabutton>
37. Observation du DOM #8
38. var observer = new MutationObserver(function(mutations, observer) { mutations.forEach(function(record) { for (var i = 0, node; node = record.addedNodes[i]; i++) { console.log(node); } }); });
39. var observer = new MutationObserver(function(mutations, observer) { mutations.forEach(function(record) { for (var i = 0, node; node = record.addedNodes[i]; i++) { console.log(node); } }); }); observer.observe(el);
40. Observation du MODÈLE #9
41. function observeChanges(changes) { console.log('== Callback =='); changes.forEach(function(change) { console.log('Ce qui a changé', change.name); console.log('La nature du changement', change.type); console.log('L''ancienne valeur', change.oldValue ); console.log('La nouvelle valeur', change.object[change.name]); }); }
42. function observeChanges(changes) { console.log('== Callback =='); changes.forEach(function(change) { console.log('Ce qui a changé', change.name); console.log('La nature du changement', change.type); console.log('L''ancienne valeur', change.oldValue ); console.log('La nouvelle valeur', change.object[change.name]); }); } var o = {};
43. function observeChanges(changes) { console.log('== Callback =='); changes.forEach(function(change) { console.log('Ce qui a changé', change.name); console.log('La nature du changement', change.type); console.log('L''ancienne valeur', change.oldValue ); console.log('La nouvelle valeur', change.object[change.name]); }); } var o = {}; Object.observe(o, observeChanges);
44. Déjà là #10
47. Merci @julienvey