A future called Web Components

Transcript

1. None

2. I’m from Brazil!

3. None
4. None
5. None
6. None
7. None
8. None
9. None

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

11. None
12. None
13. None

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

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

16. None
17. None
18. None
19. None
20. None
21. None
22. None
23. None
24. None
25. None
26. None
27. None
28. None

29. how do you create a
 “component” nowadays?

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

31. 2. Copy and paste someone’s code

32. 3. And hope it works

33. None

34. <html5-la>

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

36. None
37. None

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

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

40. None

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. lifecycle • createdCallback() • enteredDocumentCallback() • leftDocumentCallback() • attributeChangedCallback()

43. None
44. None

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. lifecycle • created() • enteredView() • leftView() • attributeChanged()

47. None

48. Templates are reusable blocks of code

49. Templates are reusable blocks of code

50. None
51. None

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

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

54. None

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

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. None

58. Shadow DOM hides the implementation details

59. what about <iframe>?

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

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. 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. None
64. None
65. None

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

67. None
68. None
69. None
70. None

71. where can I
 find them? NPM? Bower?

72. None
73. None
74. None

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

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

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

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

79. in other words…

80. encapsulation and code reuse for real

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

    it
82. None

83. thanks! zenorocha.com