I’m from Brazil!

.

.

.

.

.

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

.

.

.

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

what the major web companies have been working on? .

.

.

.

.

.

.

.

.

.

.

.

.

how do you
create a

“component”
nowadays?

1. Never create! Just use a jQuery plugin

2. Copy and paste someone’s code

3. And hope it works .

.

<html5-la> .

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

.

.

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

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

.

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

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

.

.

how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la'. </script> </polymer-element> . { where: ‘Santa Monica’. created: function() { // do something } }).

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

.

Templates are reusable blocks of code .

Templates are reusable blocks of code .

.

.

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

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

.

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

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

.

Shadow DOM hides the implementation details .

what about <iframe>? .

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

var elemShadowDOM = elem.querySelector(‘#elem').createShadowRoot(). .how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem = document.innerHTML = '<h1>Bar</h1>'. ! elemShadowDOM.

createShadowRoot(). }</style>’.querySelector(‘#elem').innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red. style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem = document.markup. var elemShadowDOM = elem. . ! elemShadowDOM.

.

.

.

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

.

.

.

.

where can I
 find them? NPM? Bower? .

.

.

.

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

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

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

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

in other words… .

encapsulation and code reuse for real .

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

.

thanks! zenorocha.com .