Web Components and the Future of JS Frameworks

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