Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Components and the Future of JS Frameworks

Web Components and the Future of JS Frameworks


May 17, 2014

More Decks by bradgignac

Other Decks in Programming


  1. C#

  2. C

  3. 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.
  4. <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>
  5. <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
  6. <template  id="my-­‐modal">    <style  scoped>        @host  {

     ...  }        .modal-­‐header  {  ...  }        .modal-­‐content  {  ...  }        .modal-­‐footer  {  ...  }    </style>    ... </template> Scoped Styles
  7. var  ModalPrototype,  Modal; ModalPrototype  =   Object.create(HTMLElement.prototype); ModalPrototype.createCallback  =  function

     ()  {  ...  }; Modal  =  document.register('my-­‐modal',  {    prototype:  ModalPrototype }); Custom Elements
  8. 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>
  9. Angular angular.module('myModal').directive('myModal',  function  ()  {    return  {    

       restrict:  'E',        transclude:  true,        templateUrl:  'myModal.html',        scope:  {            header:  '@'        }    }; });
  10. 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>
  11. 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>