A future called Web Components

HTML5 LA

Transcript

2. I’m from Brazil!
10. the most famous client-side projects are fated to die
14. so you think everything will become “native" one day?
15. what the major web companies have been working on?
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
34. <html5-la>
35. <video is=”camera”> eduardolundgren.github.io/video-camera-element
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>
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()
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()
48. Templates are reusable blocks of code
49. Templates are reusable blocks of code
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
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));
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>’;
66. how to use it? <link rel="import" href="myelement.html">
71. where can I
 find them? NPM? Bower?
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
83. thanks! zenorocha.com