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

bradgignac

May 17, 2014
Tweet

More Decks by bradgignac

Other Decks in Programming

Transcript

  1. and the Future of JS Frameworks
    Web Components

    View Slide

  2. View Slide

  3. View Slide

  4. @bradgignac
    bradgignac.com

    View Slide

  5. A Brief History of
    JavaScript

    View Slide

  6. 1995 2004 2006 2011 2014
    The Birth of JavaScript

    View Slide

  7. JavaScript

    View Slide

  8. C#

    View Slide

  9. C

    View Slide

  10. 1995 2004 2006 2011 2014
    The Birth of JavaScript

    View Slide

  11. 1995 2004 2006 2011 2014
    Web 2.0

    View Slide

  12. View Slide

  13. View Slide

  14. 1995 2004 2006 2011 2014
    Web 2.0

    View Slide

  15. 1995 2004 2006 2011 2014
    jQuery

    View Slide

  16. View Slide

  17. 1995 2004 2006 2011 2014
    jQuery

    View Slide

  18. 1995 2004 2006 2011 2014
    Rise of the Microlibrary

    View Slide

  19. View Slide

  20. View Slide

  21. 1995 2004 2006 2011 2014
    Rise of the Microlibrary

    View Slide

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

    View Slide

  23. View Slide

  24. Backbone

    View Slide

  25. Angular

    View Slide

  26. What’s the Difference?

    View Slide

  27. What are Web
    Components?

    View Slide

  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.

    View Slide

  29. Web Components give developers a
    composable, reusable method for
    packaging HTML, CSS, and
    JavaScript.

    View Slide

  30. Modal

    View Slide


  31.    This  Is  My  Title
       Lorem  ipsum  dolor...
       


    View Slide


  32.    Lorem  ipsum  dolor...


    View Slide

  33. How do we use them?

    View Slide

  34. Let’s Build a Modal

    View Slide


  35.    Lorem  ipsum  dolor  sit  amet...


    View Slide


  36.    ...
       
       
       
           Cancel
           Save
       

    Templates

    View Slide


  37.    <br/>        @host  {  ...  }<br/>        .modal-­‐header  {  ...  }<br/>        .modal-­‐content  {  ...  }<br/>        .modal-­‐footer  {  ...  }<br/>    
       ...

    Scoped Styles

    View Slide

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

    View Slide

  39. var  ModalPrototype,  Modal;
    ModalPrototype  =  
    Object.create(HTMLElement.prototype);
    ModalPrototype.createCallback  =  function  ()  {  ...  };
    Modal  =  document.register('my-­‐modal',  {
       prototype:  ModalPrototype
    });
    Custom Elements

    View Slide

  40. HTML Imports
    ES6 Modules
    ES6 Module Loader
    Packaging

    View Slide

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

    View Slide

  42. Encapsulation
    Performance
    Interoperability
    Better Frameworks
    Benefits

    View Slide

  43. Using Web
    Components Today

    View Slide

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

    View Slide

  45. Polymer

       
           ...
           {{  header  }}
           
           
               Cancel
               Save
           
       
       ...

    View Slide

  46. Angular
    angular.module('myModal').directive('myModal',  function  ()  {
       return  {
           restrict:  'E',
           transclude:  true,
           templateUrl:  'myModal.html',
           scope:  {
               header:  '@'
           }
       };
    });

    View Slide

  47. Angular

       ...
       {{  header  }}
       
       
           Cancel
           Save
       

    View Slide

  48. Ember
    <br/>    <style  scoped>...</style><br/>    <div  class="modal-­‐header">{{  header  }}</div><br/>    <div  class="modal-­‐content">{{  yield  }}</div><br/>    <div  class="modal-­‐footer"><br/>        <button>Cancel</button><br/>        <button>Save</button><br/>    </div><br/>

    View Slide

  49. Questions?

    View Slide