A future called Web Components

HTML5 LA

Transcript

1. View Slide

2. I’m from Brazil!
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. the most famous
    client-side
    projects
    are fated
    to die
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. so you think
    everything will
    become “native"
    one day?
    

    View Slide

15. what the
    major web
    companies
    have been
    working on?
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. how do you
    create a

    “component”
    nowadays?
    

    View Slide

30. 1. Never create! Just use a jQuery plugin
    

    View Slide

31. 2. Copy and paste someone’s code
    

    View Slide

32. 3. And hope it works
    

    View Slide

33. View Slide

34. 
    

    View Slide

35. 
    eduardolundgren.github.io/video-camera-element
    

    View Slide

36. View Slide

37. View Slide

38. attributes="where">
    // content goes here
    
    
    

    View Slide

39. 
    
    // content goes here
    
    

    View Slide

40. View Slide

41. using JS
    
    var proto = Object.create(HTMLElement.prototype);
    proto.createdCallback = function() {
    this.textContent = ‘HTML5 LA!';
    };
    
    document.register(‘html5-la', {
    prototype: proto
    });
    
    

    View Slide

42. lifecycle
    • createdCallback()
    • enteredDocumentCallback()
    • leftDocumentCallback()
    • attributeChangedCallback()
    

    View Slide

43. View Slide

44. View Slide

45. how to use it?
    
    <br/>Polymer(‘html5-la', {<br/>where: ‘Santa Monica’,<br/>created: function() {<br/>// do something <br/> <br/> <br/> <br/> <br/> }<br/>}); <br/> <br/> <br/> <br/>
    
    

    View Slide

46. lifecycle
    • created()
    • enteredView()
    • leftView()
    • attributeChanged()
    

    View Slide

47. View Slide

48. Templates
    are reusable
    blocks of
    code
    

    View Slide

49. Templates
    are reusable
    blocks of
    code
    

    View Slide

50. View Slide

51. View Slide

52. attempt #1
    
    
    
    

    View Slide

53. <br/><img src="logo.png"><br/>
    attempt #2
    

    View Slide

54. View Slide

55. how to create it?
    
    
    
    

    View Slide

56. how to use it?
    // 1. Access template’s content
    
    var t = document.querySelector('#myTemplate').content;
    // 2. Manipulate internal element
    t.querySelector('img').src = 'logo.png';
    // 3. Clone and append in the DOM
    document.body.appendChild(t.cloneNode(true));
    

    View Slide

57. View Slide

58. Shadow DOM
    hides the
    implementation
    details
    

    View Slide

59. what about
    ?
    

    View Slide

60. what’s a

    
    made of?
    or password, textarea, date?
    

    View Slide

61. how to use it?
    Foo
    
    var elem = document.querySelector(‘#elem');
    var elemShadowDOM = elem.createShadowRoot();
    !
    elemShadowDOM.innerHTML = 'Bar';
    

    View Slide

62. markup, style &
    script encapsulated
    Foo
    
    var elem = document.querySelector(‘#elem');
    var elemShadowDOM = elem.createShadowRoot();
    !
    elemShadowDOM.innerHTML = ‘Bar’ +
    ‘h1 { color: red; }’;
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. how to use it?
    
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. where can I

    find them?
    NPM? Bower?
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. 
    zenorocha.github.io/twitter-button
    

    View Slide

76. 
    eduardolundgren.github.io/google-maps-element
    

    View Slide

77. 
    eduardolundgren.github.io/video-camera-element
    

    View Slide

78. 
    eduardolundgren.github.io/video-tracking-element
    

    View Slide

79. in other words…
    

    View Slide

80. encapsulation
    and code reuse
    for real
    

    View Slide

81. the best
    way to
    predict the
    future is
    to create it
    

    View Slide

82. View Slide

83. thanks!
    zenorocha.com
    

    View Slide