Web Components and the Future of JS Frameworks

Transcript

1. and the Future of JS Frameworks Web Components
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
14. 1995 2004 2006 2011 2014 Web 2.0
15. 1995 2004 2006 2011 2014 jQuery
17. 1995 2004 2006 2011 2014 jQuery
18. 1995 2004 2006 2011 2014 Rise of the Microlibrary
21. 1995 2004 2006 2011 2014 Rise of the Microlibrary
22. 1995 2004 2006 2011 2014 A “Diverse Ecosystem”
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?