Web Components, l'avenir des développeurs web

Templating, encapsulation, éléments customs, databinding... Tous les frameworks web modernes proposent actuellement leur propre solution.

Mais saviez-vous qu’une spécification du W3C proposant de standardiser tout ceci est en cours de rédaction ? Les Web Components.
Dans cette présentation, nous prendrons de l’avance ! Nous aborderons les concepts fondamentaux des Web Components : ShadowDOM, Mutation Observers, custom elements, Model-Driven-View, Object.observe()... mais aussi comment les utiliser dès aujourd'hui avec des frameworks tels que AngularJS ou Polymer

Transcript

1. WEB COMPONENTS
   L’avenir des développeurs WEB
   

   View Slide

2. Julien Vey
   Numergy
   @julienvey
   julienvey.com
   !
   !
   !
   

   View Slide

3. Reinventer la
   Roue
   

   View Slide

4. Reinventer la
   Roue
   mais
   cette fois on fait les choses
   bien !
   

   View Slide

5. Un STANDARD du
   En cours de redaction
   W3C
   

   View Slide

6. class="twitter-share-button" data-
   via="julienvey" data-lang="fr">Tweeter
   !function(d,s,id){var<br/>js,fjs=d.getElementsByTagName(s)[0],p=/<br/>^http:/.test(d.location)?'http':'https';if(!<br/>d.getElementById(id))<br/>{js=d.createElement(s);js.id=id;js.src=p+'://<br/>platform.twitter.com/<br/>widgets.js';fjs.parentNode.insertBefore(js,fjs<br/>);}}(document, 'script', 'twitter-wjs');</<br/>script><br/>

   View Slide

7. 
   

   View Slide

8. Mega Button?
   

   View Slide

9. 
   

   View Slide

10. 
    ...
    ...
    
    

    View Slide

11. Templates
    Séparer le FOND de la FORME
    

    View Slide

12. Un Template c’est quoi ?
    GABARIT
    MODÈLE
    Patron
    Layout
    

    View Slide

13. mais Aujourd’hui c’est plutôt Ça !
    utilisation de hidden ou display:none
    
    
    
    
    

    View Slide

14. ou Ça !
    utilisation de <br/><script type="text/x-handlebars-template"<br/>id="monTemplate"><br/><img src="logo.png"><br/><div class="comment"></div><br/>
    

    View Slide

15. ou encore Ça !
    concaténation de String
    var html = '';
    html += 'Hello';
    html += username;
    html += '';
    $('#monelement').insert(html);
    

    View Slide

16. 
    

    View Slide

17. 
    
    
    
    

    View Slide

18. parsé mais PAS AFFICHÉ
    
    
    
    
    

    View Slide

19. parsé mais PAS AFFICHÉ
    ne s’EXÉCUTENT PAS<br/><template id="montemplate"><br/><img src=""><br/><div class="comment"></div><br/></template><br/>

    View Slide

20. parsé mais PAS AFFICHÉ
    ne s’EXÉCUTENT PAS<br/><img> ne se CHARGENT PAS<br/><template id="montemplate"><br/><img src=""><br/><div class="comment"></div><br/></template><br/>

    View Slide

21. interface HTMLTemplateElement : HTMLElement {
    attribute DocumentFragment content;
    }
    
    

    View Slide

22. et pour l’INSTANCIER ?
    var t = document.querySelector('#montemplate');
    t.content.querySelector('img').src = 'http://...';
    document.body.appendChild(t.content.cloneNode(true));
    

    View Slide

23. et pour l’INSTANCIER ?
    le DOM est AFFICHÉ
    var t = document.querySelector('#montemplate');
    t.content.querySelector('img').src = 'http://...';
    document.body.appendChild(t.content.cloneNode(true));
    

    View Slide

24. et pour l’INSTANCIER ?
    le DOM est AFFICHÉ
    s’EXÉCUTENT<br/>var t = document.querySelector('#montemplate');<br/>t.content.querySelector('img').src = 'http://...';<br/>document.body.appendChild(t.content.cloneNode(true));<br/>

    View Slide

25. et pour l’INSTANCIER ?
    le DOM est AFFICHÉ
    s’EXÉCUTENT<br/><img> se CHARGENT<br/>var t = document.querySelector('#montemplate');<br/>t.content.querySelector('img').src = 'http://...';<br/>document.body.appendChild(t.content.cloneNode(true));<br/>

    View Slide

26. Encapsulation
    comment séparer le code que vous
    FOURNISSEZ de celui qui va le CONSOMMER
    

    View Slide

27. L’Encapsulation d’aujourd’hui
    

    View Slide

28. L’Encapsulation d’aujourd’hui
    
    

    View Slide

29. Par pitié NON !
    

    View Slide

30. mais heureusement
    

    View Slide

31. hadow DOM
    

    View Slide

32. avec HTML5
    
    

    View Slide

33. avec HTML5
    ==
    
    

    View Slide

34. mais En fait...
    
    #document-fragment
    
    
    
    
    0:009:56
    
    
    
    
    
    
    

    View Slide

35. Déja là depuis LONGTEMPS
    le Shadow DOM est donc
    

    View Slide

36. Déja là depuis LONGTEMPS
    Désormais ACCESSIBLE à tous
    les DÉVELOPPEURS Web
    le Shadow DOM est donc
    

    View Slide

37. Instancier du shadow DOM
    
    
    

    View Slide

38. Instancier du shadow DOM
    
    
    var host = document.querySelector('#host');
    var shadow = host.createShadowRoot();
    shadow.innerHTML = 'Bouh ! Je suis le shadow DOM !';
    

    View Slide

39. Instancier du shadow DOM
    
    
    var host = document.querySelector('#host');
    var shadow = host.createShadowRoot();
    shadow.innerHTML = 'Bouh ! Je suis le shadow DOM !';
    
    #document-fragment
    Bouh ! Je suis le shadow DOM !;
    
    

    View Slide

40. Instancier du shadow DOM V2
    
    ...
    
    !
    
    
    <br/>var shadow = document.querySelector('#host').createShadowRoot();<br/>shadow.appendChild(document.querySelector('#montemplate').content);<br/>
    

    View Slide

41. Insertion points
    

    View Slide

42. 
    

    View Slide

43. shadow DOM
    Je commence à apprendre les Web Components
    
    J’ai fini d’apprendre les Web Components
    

    View Slide

44. shadow DOM
    host
    Je commence à apprendre les Web Components
    
    J’ai fini d’apprendre les Web Components
    
    Hello World !
    
    

    View Slide

45. shadow DOM
    host
    résultat
    Je commence à apprendre les Web Components
    
    J’ai fini d’apprendre les Web Components
    
    Hello World !
    
    
    #document-fragment
    Je commence à apprendre les Web Components
    Hello World !
    J’ai fini d’apprendre les Web Components
    
    

    View Slide

46. shadow DOM
    
    
    Bouh ! Je suis le shadow DOMMMM !
    
    
    
    
    Titre
    Sous-titre
    contenu
    
    host
    

    View Slide

47. résultat
    
    #document-fragment
    
    Sous-titre
    Bouh ! Je suis le shadow DOMMMM !
    Titre
    
    contenu
    
    

    View Slide

48. Shadow DOM et CSS
    

    View Slide

49. Bienvenue
    
    #document-fragment
    Les Web Components c’est ça :
    Templates
    Shadow DOM
    DOM Observe
    Object.observe()
    Custom elements
    Et c’est génial
    
    

    View Slide

50. Bienvenue
    
    #document-fragment
    h1 { color : red }
    Les Web Components c’est ça :
    Templates
    Shadow DOM
    DOM Observe
    Object.observe()
    Custom elements
    Et c’est génial
    
    

    View Slide

51. Bienvenue
    
    #document-fragment
    h1 { color : red }
    Les Web Components c’est ça :
    Templates
    Shadow DOM
    DOM Observe
    Object.observe()
    Custom elements
    Et c’est génial
    
    

    View Slide

52. Bienvenue
    
    #document-fragment
    h1 { color : red }
    Les Web Components c’est ça :
    Templates
    Shadow DOM
    DOM Observe
    Object.observe()
    Custom elements
    Et c’est génial
    
    

    View Slide

53. Customiser le Scope des CSS
    shadowDom.applyAuthorStyles
    

    View Slide

54. Customiser le Scope des CSS
    shadowDom.applyAuthorStyles
    Les styles EXTÉRIEURS
    sont APPLIQUÉS au shadow DOM
    

    View Slide

55. Customiser le Scope des CSS
    shadowDom.resetStyleInheritance
    

    View Slide

56. Customiser le Scope des CSS
    shadowDom.resetStyleInheritance
    Les styles du SHADOW DOM
    HÉRITENT des STYLES de la page
    

    View Slide

57. et pour Styler l’élément host ?
    

    View Slide

58. et pour Styler l’élément host ?
    <br/>@host {<br/>/* Le style de l'élément host */<br/>}<br/>
    

    View Slide

59. Custom Elements
    

    View Slide

60. Mega Button?
    

    View Slide

61. 
    

    View Slide

62. constructor="MegaButton">
    
    

    View Slide

63. 
    
    ...
    
    
    
    

    View Slide

64. 
    
    ...
    
    
    <br/>MegaButton.prototype = {<br/>doSomething: function() {…}<br/>};<br/>
    
    

    View Slide

65. 
    
    ...
    
    
    <br/>MegaButton.prototype = {<br/>doSomething: function() {…}<br/>};<br/>
    
    
    !
    

    View Slide

66. 
    
    ...
    
    
    <br/>MegaButton.prototype = {<br/>doSomething: function() {…}<br/>};<br/>
    
    
    !
    Mega Button?
    !
    

    View Slide

67. 
    
    ...
    
    
    <br/>MegaButton.prototype = {<br/>doSomething: function() {…}<br/>};<br/>
    
    
    !
    Mega Button?
    !
    <br/>var button = new MegaButton();<br/>…<br/>
    

    View Slide

68. View Slide

69. Cycle de vie des Custom Elements
    created
    attributeChanged
    inserted
    removed
    

    View Slide

70. Cycle de vie des Custom Elements
    
    <br/>// …<br/>this.lifecycle({<br/>inserted: function() { this.startUpdatingClock(); },<br/>removed: function() { this.stopUpdatingClock(); }<br/>});<br/>// …<br/>
    
    

    View Slide

71. Mutation Observer
    observer le DOM
    

    View Slide

72. Mutation observers
    var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(record) {
    for (var i = 0, node; node = record.addedNodes[i]; i++) {
    console.log(node);
    }
    });
    });
    

    View Slide

73. Mutation observers
    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);
    

    View Slide

74. les Mutation observers
    servent à MONITORER les insertions
    et suppressions d’éléments du DOM
    

    View Slide

75. les Mutation observers
    REMPLACENT les MutationEvent
    

    View Slide

76. les Mutation observers
    sont plus PERFORMANTS
    que les MutationEvent
    

    View Slide

77. Mutation
    Observer vs Mutation
    Event
    var observer = new MutationObserver(function(mutations, observer) {
    mutations.forEach(function(record) {
    for (var i = 0, node; node = record.addedNodes[i]; i++) {
    console.log(node);
    }
    });
    }).observe(document, {childList: true});
    document.addEventListener('DOMNodeInserted', function(e) {
    console.log(e.target);
    }, false);
    

    View Slide

78. Object.observe()
    observer le Modèle Javascript
    

    View Slide

79. Object.observe()
    MONITORER les modifications des
    objets Javascript
    

    View Slide

80. Object.Observe()
    function observeChanges(changes) {
    console.log('Callback changement');
    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]);
    });
    }
    

    View Slide

81. Object.Observe()
    function observeChanges(changes) {
    console.log('Callback changement');
    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);
    

    View Slide

82. Model-Driven-View
    
    
    <br/>var maValeur = "World !";<br/>
    
    
    
    Hello {{maValeur}}
    
    
    
    

    View Slide

83. Performances
    AngularJS
    Dirty Checking VS Object.observe
    

    View Slide

84. État actuel
    les Web Components dès Maintenant
    

    View Slide

85. View Slide

86. AngularJS
    La Philosophie WEB COMPONENTS
    

    View Slide

87. AngularJS
    La Philosophie WEB COMPONENTS
    DÉCLARATIF plutôt qu’IMPÉRATIF
    

    View Slide

88. AngularJS
    La Philosophie WEB COMPONENTS
    DÉCLARATIF plutôt qu’IMPÉRATIF
    Une EXTENSION du LANGAGE HTML
    

    View Slide

89. AngularJS
    La Philosophie WEB COMPONENTS
    DÉCLARATIF plutôt qu’IMPÉRATIF
    Une EXTENSION du LANGAGE HTML
    DIRECTIVES AngularJS
    ==
    Web Components CUSTOM ELEMENTS
    

    View Slide

90. AngularJS
    La Philosophie WEB COMPONENTS
    
    
    Hello Section 1!
    
    
    Hello Section 2!
    
    
    
    
    Hello Section 1!
    
    
    Hello Section 2!
    
    
    Custom Element Directive angular
    

    View Slide

91. Polymer Project
    

    View Slide

92. Polymer Project
    
    
    I'm tk-element-proto with a prototype.
    
    <br/>Polymer('tk-element-proto', {<br/>ready: function() {<br/>//...<br/>}<br/>});<br/>
    
    + Gestion du cycle de vie
    + Databinding
    

    View Slide

93. Polymer & ANGULAR JS
    GOOGLE I/O 2013
    

    View Slide

94. Polymer.Dart
    

    View Slide

95. Polymer.Dart
    
    
    Click Me
    You clicked the button {{count}} times.
    
    
    
    import 'package:polymer/polymer.dart';
    import 'dart:html';
    !
    @CustomTag('click-counter')
    class ClickCounterElement extends PolymerElement {
    @observable int count = 0;
    ClickCounterElement.created() : super.created();
    !
    void increment(Event e, var detail, Node target) {
    count += 1;
    }
    }
    

    View Slide

96. Firefox & CO
    

    View Slide

97. Firefox & CO
    

    View Slide

98. View Slide

99. Demo Time !
    

    View Slide

100. Disclaimer
     Ne
     CROYEZ pas tout ce que je vous ai dit
     VÉRIFIEZ le
     

     View Slide

101. @julienvey
     That’s all folks
     

     View Slide