Web Components and the Future of JS Frameworks

Web Components and the Future of JS Frameworks

17950202cc7be133e80a45580077ed72?s=128

bradgignac

May 17, 2014
Tweet

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?