A future called Web Components

Transcript

1. 1.

   None
2. 2.

   I’m from Brazil!

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    the most famous client-side projects are fated to die

11. 11.

    None
12. 12.

    None
13. 13.

    None
14. 14.

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

15. 15.

    what the major web companies have been working on?

16. 16.

    None
17. 17.

    None
18. 18.

    None
19. 19.

    None
20. 20.

    None
21. 21.

    None
22. 22.

    None
23. 23.

    None
24. 24.

    None
25. 25.

    None
26. 26.

    None
27. 27.

    None
28. 28.

    None
29. 29.

    how do you create a
 “component” nowadays?

30. 30.

    1. Never create! Just use a jQuery plugin

31. 31.

    2. Copy and paste someone’s code

32. 32.

    3. And hope it works

33. 33.

    None
34. 34.

    <html5-la>

35. 35.

    <video is=”camera”> eduardolundgren.github.io/video-camera-element

36. 36.

    None
37. 37.

    None
38. 38.

    <element name=“html5-la“ constructor="HTML5LA" attributes="where"> // content goes here </element> <element>

39. 39.

    <element> <element name="camera" extends="video"> // content goes here </element>

40. 40.

    None
41. 41.

    using JS <html5-la></html5-la> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = ‘HTML5 LA!'; }; document.register(‘html5-la', { prototype: proto });
42. 42.

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

43. 43.

    None
44. 44.

    None
45. 45.

    how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la', {

    where: ‘Santa Monica’, created: function() { // do something } }); </script> </polymer-element>
46. 46.

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

47. 47.

    None
48. 48.

    Templates are reusable blocks of code

49. 49.

    Templates are reusable blocks of code

50. 50.

    None
51. 51.

    None
52. 52.

    attempt #1 <div id="template" style="display: none"> <img src="logo.png" class="logo.png"> </div>

53. 53.

    <script id="template" type="text/x-handlebars-template"> <img src="logo.png"> </script> attempt #2

54. 54.

    None
55. 55.

    how to create it? <template id="myTemplate"> <img src=""> </template>

56. 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));
57. 57.

    None
58. 58.

    Shadow DOM hides the implementation details

59. 59.

    what about <iframe>?

60. 60.

    what’s a
 <video> made of? or password, textarea, date?

61. 61.

    how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem =

    document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = '<h1>Bar</h1>';
62. 62.

    markup, style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem

    = document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red; }</style>’;
63. 63.

    None
64. 64.

    None
65. 65.

    None
66. 66.

    how to use it? <link rel="import" href="myelement.html">

67. 67.

    None
68. 68.

    None
69. 69.

    None
70. 70.

    None
71. 71.

    where can I
 find them? NPM? Bower?

72. 72.

    None
73. 73.

    None
74. 74.

    None
75. 75.

    <twitter-button> zenorocha.github.io/twitter-button

76. 76.

    <google-maps> eduardolundgren.github.io/google-maps-element

77. 77.

    <video is=”camera”> eduardolundgren.github.io/video-camera-element

78. 78.

    <video is=”tracking”> eduardolundgren.github.io/video-tracking-element

79. 79.

    in other words…

80. 80.

    encapsulation and code reuse for real

81. 81.

    the best way to predict the future is to create

    it
82. 82.

    None
83. 83.

    thanks! zenorocha.com