Web Components and the Future of JS Frameworks

Transcript

1. and the Future of JS Frameworks Web Components

2. None
3. None

4. @bradgignac bradgignac.com

5. A Brief History of JavaScript

6. 1995 2004 2006 2011 2014 The Birth of JavaScript

7. JavaScript

8. C#

9. C

10. 1995 2004 2006 2011 2014 The Birth of JavaScript

11. 1995 2004 2006 2011 2014 Web 2.0

12. None
13. None

14. 1995 2004 2006 2011 2014 Web 2.0

15. 1995 2004 2006 2011 2014 jQuery

16. None

17. 1995 2004 2006 2011 2014 jQuery

18. 1995 2004 2006 2011 2014 Rise of the Microlibrary

19. None
20. None

21. 1995 2004 2006 2011 2014 Rise of the Microlibrary

22. 1995 2004 2006 2011 2014 A “Diverse Ecosystem”

23. None

24. Backbone

25. Angular

26. What’s the Difference?

27. What are Web Components?

28. Web Components enable Web application authors to define widgets with

    a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.

29. Web Components give developers a composable, reusable method for packaging

    HTML, CSS, and JavaScript.

30. Modal

31. <div  class="modal">    <div  class="modal-­‐header">This  Is  My  Title</div>    <div

     class="modal-­‐content">Lorem  ipsum  dolor...</div>    <div  class="modal-­‐footer"><!-­‐-­‐  Buttons  -­‐-­‐></div> </div> <div>

32. <my-­‐modal  header="This  Is  My  Title">    <p>Lorem  ipsum  dolor...</p> </my-­‐modal>

    <my-modal>

33. How do we use them?

34. Let’s Build a Modal

35. <my-­‐modal  header="This  Is  My  Title">    <p>Lorem  ipsum  dolor  sit

     amet...</p> </my-­‐modal> <my-modal>

36. <template  id="modal">    <style  scoped>...</style>    <div  class="modal-­‐header"><!-­‐-­‐  Header  -­‐-­‐></div>

       <div  class="modal-­‐content"><content  /></div>    <div  class="modal-­‐footer">        <button>Cancel</button>        <button>Save</button>    </div> </template> Templates

37. <template  id="my-­‐modal">    <style  scoped>        @host  {

     ...  }        .modal-­‐header  {  ...  }        .modal-­‐content  {  ...  }        .modal-­‐footer  {  ...  }    </style>    ... </template> Scoped Styles

38. var  template,  host; template  =  document.querySelector('#my-­‐modal'); host  =  this.createShadowRoot(); host.appendChild(template.content.cloneNode(true));

    Shadow DOM

39. var  ModalPrototype,  Modal; ModalPrototype  =   Object.create(HTMLElement.prototype); ModalPrototype.createCallback  =  function

     ()  {  ...  }; Modal  =  document.register('my-­‐modal',  {    prototype:  ModalPrototype }); Custom Elements

40. HTML Imports ES6 Modules ES6 Module Loader Packaging

41. Mutation Observers Object.observe Node.bind Related Technologies

42. Encapsulation Performance Interoperability Better Frameworks Benefits

43. Using Web Components Today

44. Polymer Polymer('my-­‐modal',  {    header:  'This  Is  My  Header' });

45. Polymer <polymer-­‐element  name="my-­‐modal"  attributes="header">    <template>        <style

     scoped>...</style>        <div  class="modal-­‐header">{{  header  }}</div>        <div  class="modal-­‐content"><content  /></div>        <div  class="modal-­‐footer">            <button>Cancel</button>            <button>Save</button>        </div>    </template>    <script>...</script> </polymer-­‐element>

46. Angular angular.module('myModal').directive('myModal',  function  ()  {    return  {    

       restrict:  'E',        transclude:  true,        templateUrl:  'myModal.html',        scope:  {            header:  '@'        }    }; });

47. Angular <div  class="modal"></div>    <style  scoped>...</style>    <div  class="modal-­‐header">{{  header

     }}</div>    <div  class="modal-­‐content"  ng-­‐transclude></div>    <div  class="modal-­‐footer">        <button>Cancel</button>        <button>Save</button>    </div> </div>

48. Ember <script  type="text/x-­‐handlebars"  id="components/my-­‐modal">    <style  scoped>...</style>    <div  class="modal-­‐header">{{

     header  }}</div>    <div  class="modal-­‐content">{{  yield  }}</div>    <div  class="modal-­‐footer">        <button>Cancel</button>        <button>Save</button>    </div> </script>

49. Questions?