O mágico mundo de Web Components

Present at beltrao In Tech

Transcript

1. O Mágico Mundo De Web Components @mteusortiz
2. @mteusortiz /mateusortiz Front-End Developer
5. Web Components
6. HTML5 é o Futuro?
8. O Futuro
10. <x-heart> http://mateusortiz.github.io/x-heart/
12. Web Components Shadow DOM Template Custom Elements HTML Imports Decorators
13. Custom Elements
14. Antes com <element> <element name="x-button" constructor="XBUTTON" attributes="lg sm xs"> <!-- Content --> </element>
15. Antes com <element> <element name="x-button" extends="button"> <!-- Content --> </element>
16. http://goo.gl/GWatuU
17. com JS <my-widget></my-widget> var WidgetProto = Object.create(HTMLElement.prototype); ! WidgetProto.createdCallback = function() { this.textContent = "BeltraoInTech"; }; ! var Widget = document.registerElement('my-widget', { prototype: WidgetProto });
18. Lifecycle Callbacks createdCallback(); attachedCallback(); detachedCallback(); attributeChangedCallback();
19. Funciona no IE6
21. t polymer-project.org
22. t x-tags.org
23. W3C standards platform polyfills Template shadow dom HTML Imports Custom Elements
24. Com Polymer <polymer-element name="x-button" attributes="color"> <script> Polymer('x-button', { color: 'red', created: function() { // ... } }); </script> </polymer-element>
25. Lifecycle Callbacks Polymer created(); detached(); attributeChanged(); attached();
26. Template
27. Templates são pedaços inertes de DOM que podem ser reutilizados.
28. # GAMBIARRA existe vários Templates para server- side e client-side
29. <template>
30. como criar? <template> <p>BeltraoInTech...</p> <img src="beltrao.png"/> </template>
31. como usar? var tmpl = document.querySelector("#template"); tmpl.content.querySelector("img").src = "dog.gif"; document.body.appendChild(tmpl.content.cloneNode(true));
32. Shadow DOM
33. O SHADOW DOM encapsula STYLE e MARCAÇÃO.
34. <iframe>
35. Shadow Dom é a mesma tecnologia usada pelos fabricantes de navegadores para implemetar as tags como <video> e <textarea>.
37. t mas voltaram atrás
38. exemplo Shadow Dom <div class="widget"></div> var host = document.querySelector(".widget"); var root = host.createShadowRoot(); root.innerHTML = "<h1>Estou dentro da div</h1>";
39. Encapsula style, marcação e script
40. HTML Imports
41. t importações carregar documentos externos em nossa página.
42. HTML Import <link rel="import" href="beltra-tech.html">
44. Obrigado TWITTER.COM/MTEUSORTIZ GITHUB.COM/MATEUSORTIZ