HTML5 LA
View Slide
I’m from Brazil!
the most famousclient-sideprojectsare fatedto die
so you thinkeverything willbecome “native"one day?
what themajor webcompanieshave beenworking on?
how do youcreate a “component”nowadays?
1. Never create! Just use a jQuery plugin
2. Copy and paste someone’s code
3. And hope it works
eduardolundgren.github.io/video-camera-element
attributes="where">// content goes here
// content goes here
using JSvar proto = Object.create(HTMLElement.prototype);proto.createdCallback = function() {this.textContent = ‘HTML5 LA!';}; document.register(‘html5-la', {prototype: proto});
lifecycle• createdCallback()• enteredDocumentCallback()• leftDocumentCallback()• attributeChangedCallback()
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/>
lifecycle• created()• enteredView()• leftView()• attributeChanged()
Templatesare reusableblocks ofcode
attempt #1
<br/><img src="logo.png"><br/>attempt #2
how to create it?
how to use it?// 1. Access template’s content var t = document.querySelector('#myTemplate').content;// 2. Manipulate internal elementt.querySelector('img').src = 'logo.png';// 3. Clone and append in the DOMdocument.body.appendChild(t.cloneNode(true));
Shadow DOMhides theimplementationdetails
what about?
what’s a made of?or password, textarea, date?
how to use it?Foovar elem = document.querySelector(‘#elem');var elemShadowDOM = elem.createShadowRoot();!elemShadowDOM.innerHTML = 'Bar';
markup, style &script encapsulatedFoovar elem = document.querySelector(‘#elem');var elemShadowDOM = elem.createShadowRoot();!elemShadowDOM.innerHTML = ‘Bar’ +‘h1 { color: red; }’;
how to use it?
where can I find them?NPM? Bower?
zenorocha.github.io/twitter-button
eduardolundgren.github.io/google-maps-element
eduardolundgren.github.io/video-tracking-element
in other words…
encapsulationand code reusefor real
the bestway topredict thefuture isto create it
thanks!zenorocha.com