Web Components: Um futuro cada vez mais presente

Web Components é um termo guarda chuva para quatro novas especificações: Custom Elements, Shadow DOM, HTML Template e HTML Import. Nessa palestra vamos explorar seus principais recursos e como elas podem mudar a maneira que desenvolvemos componentes para Web.

1. WEB COMPONENTS UM FUTURO CADA VEZ MAIS PRESENTE <!-- @jonataweber -->
2. 2 ,QPCVC9GDGT Software Engineer • Becker (becker.com/health) • Mederi Saúde Domiciliar • Trabalha com PHP desde 2009 • Bacharel em Sistemas de Informação (UNIFACS) • Pós-graduando em Engenharia de Software (UNIFACS) jonataa@gmail.com github.com/jonataa
3. Agenda • Manipulando o DOM • Web Components: Overview • Polymer • Exemplo • Links Interessantes 3
4. Como você cria utiliza um "componente" hoje? 4
5. 1. Usando um componente 2.Criando um componente Image: bit.ly/1sNZnLc
6. Componentes são encapsulados
7. <select> <option>Small</option> <option>Medium</option> <option>Large</option> </select>
8. Componentes são configuráveis
9. <select id="size"> <option disabled>Small</option> <option disabled>Medium</option> <option selected>Large</option> </select>
10. <select size="4" multiple> <option>Do</option> <option>Re</option> <option>Mi</option> ... </select>
11. Componentes são combináveis
12. <select> <optgroup label="German Cars"> <option>Mercedes</option> <option>Audi</option> </optgroup> ... </select>
13. Date Picker jQuery UI <link rel="stylesheet" href=“/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> $(function() { $( "#datepicker" ).datepicker(); }); <input type="text" id="datepicker">
14. Date Picker (HTML5) <input type="date">
15. <video> (HTML5) <video src="video.mp4" controls autoplay></video>
16. var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); Simple Google Map <body> <div id="map-canvas"></div> </body> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
17. Demora, mas faz!
18. Que tal você criar seus próprios componentes? :-)
19. <google-map></google-map>
20. <google-map latitude="-12.258940" longitude="-38.933655" zoom="10"></google-map>
21. <google-map latitude="-12.258940" longitude="-38.933655" zoom="10"> <google-map-marker latitude="-12.258940" longitude="-38.933655" title="We are here!"></google-map-marker> </google-map>
23. DOM Document Object Model 23 Image: bit.ly/1mSMhJP
24. HTML DOM 24
25. var el = document.getElementById('elemento'); getElementById() 25
26. var d = document.getElementsByClassName('destaque'); getElementsByClassName() 26
27. var logo = document.querySelector('.logomarca'); querySelector() var itens = document.querySelectorAll('.itens'); 27
28. var caixa = document.querySelector(‘#caixa'); caixa.innerHTML = '<h1>Hello!</h1>'; innerHTML 28
29. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 8 <h1>Hello, World!</h1> 9 10 </body> 11 </html> Exemplo Manipulando o DOM 29
30. <h1></h1> Manipulando o HTML via Javascript var h1 = document.querySelector('h1'); h1.textContent = 'Hello, World!'; 30
31. var h1 = document.createElement('h1'); h1.textContent = 'Hello, World!'; document.body.appendChild(h1); Criando um elemento via Javascript 31
32. Web Components Custom Elements Shadow DOM HTML Templates HTML Imports
33. Custom Elements possibilita criar seus próprios elementos DOM 33
34. Custom Elements 34 <gdg-salvador></gdg-salvador> var GDG = document.registerElement(‘gdg-salvador');
35. Custom Elements 35 <gdg-salvador></gdg-salvador> var Proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { this.textContent = 'Google Developers Group'; }; var GDG = document.registerElement(‘gdg-salvador', { prototype: Proto });
36. Extending Native Elements var MegaButton = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' }); <button is="mega-button">
37. Extending a Custom Element var XFooProto = Object.create(HTMLElement.prototype); ... var XFooExtended = document.registerElement('x-foo-extended', { prototype: XFooProto, extends: 'x-foo' });
38. Shadow DOM possibilita encapsular as implementações 38
39. Shadow DOM <video> 39
40. Shadow DOM 40 <h1>My Page</h1> <div></div> var div = document.querySelector('div'); var shadow = div.createShadowRoot(); var h1 = document.createElement('h1'); h1.innerHTML = 'Hello, GDG!' + '<style> h1 { color: red; } </style>'; shadow.appendChild(h1);
41. HTML Templates possibilita criar fragmento de código manipulável e não visível. 41
42. <div id="template" style="display: none;"> <img src="logo.png" alt="Minha Logo"> </div> Templates (bad)
43. HTML Template 43 <template> <img src="success.jpg" alt=""> </template> <button onclick="exibirFoto()">Exibir Foto</button> var t = document.querySelector('template').content; function exibirFoto() { document.body.appendChild(t.cloneNode(true)); }
44. HTML Imports possibilita incluir e reutilizar documentos HTML em outros documentos HTML 44
45. <!DOCTYPE html> <html> <head> <title>PHP Includes</title> </head> <body> <?php include 'header.php' ?> <div>Meu Conteúdo</div> <?php include 'footer.php' ?> </body> </html> PHP Includes
46. HTML Imports <link rel="import" href="component.html"> var importDoc = document.querySelector('link[rel="import"').import; var style = importDoc.querySelector('style'); var content = importDoc.querySelector('.content'); document.head.appendChild(style.cloneNode(true)); document.body.appendChild(content.cloneNode(true)); index.html <div class="content"> <h1>Olá, GDG Salvador!</h1> <img src="success.jpg" alt=""> </div> <style> h1 { color: red; } </style> component.html
47. LifeCycle • createdCallback() • attachedCallback() • detachedCallback() • attributeChangedCallback()
48. bit.ly/1qAKOCZ
49. Polyfill Implementa a tecnologia que um desenvolvedor espera que o navegador forneça nativamente
50. http://bit.ly/1ojTcak
51. Elements Polymer Platform (Polyfills) Native Camadas do Polymer
52. Install Polymer $ bower install polymer
53. my-element.html Criando um Polymer element 1. Carregar o Polymer core (polymer.html) 2. Declarar seu elemento usando <polymer-element> <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="my-element" noscript> <template> <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span> </template> </polymer-element>
54. <!-- Polyfill Web Components support for older browsers --> <script src="components/platform/platform.js"></script> <!-- Import element --> <link rel="import" href="google-map.html"> <!-- Use element --> <google-map lat="37.790" long="-122.390"></google-map> google-map bit.ly/1v774uw
55. <!-- Polyfill Web Components support for older browsers --> <script src="components/platform/platform.js"></script> <!-- Import element --> <link rel="import" href="google-chart.html"> <!-- Use element --> <google-chart type='pie' height='300px' width='400px' options='{"title": "Distribuição de pessoas em 2014"}' cols='[{"label":"Mês", "type":"string"}, {"label":"Dias", "type":"number"}]' rows='[["Jan", 31],["Fev", 28],["Mar", 31]]'> </google-chart> google-chart bit.ly/1ytx5rV
56. bit.ly/1BeBJ9d
57. <!-- Polyfill Web Components support for older browsers --> <script src="bower_components/platform/platform.js"></script> <!-- Import element --> <link rel="import" href="meu-contador/meu-contador.html"> <!-- Use element --> <meu-contador pontos="50"></meu-contador> meu-contador github.com/jonataa/custom-elements
58. <!-- Polyfill Web Components support for older browsers --> <script src="bower_components/platform/platform.js"></script> <!-- Import element --> <link rel="import" href="components/gdg/gdg-salvador.html"> <!-- Use element --> <gdg-salvador size="small" type="full" cliques="10"></gdg-salvador> gdg-salvador github.com/jonataa/custom-elements
59. bit.ly/1qALkB3
60. bit.ly/1xoKZKr
61. bit.ly/1wLQn8K
62. bit.ly/1CrbBdE
63. bit.ly/1wKORSm
64. bit.ly/1xzL7qv
65. github.com
66. <!-- Polyfill Web Components support for older browsers --> <script src="/bower_components/platform/platform.js"></script> <!-- Import element --> <script src="/bower_components/time-elements/time-elements.js"></script> time <time is="time-ago" datetime="2014-07-04T16:30:00-08:00"></time>
68. x-tags
69. bit.ly/1vtuetm
71. bit.ly/1qU0PUL
72. Image: bit.ly/1rUNnpd Vamos componentizar a Web!
73. Obrigado! jonataa@gmail.com @JonataWeber