Um futuro chamado Web Components

BrazilJS 2013

Transcript

1. <web components> um futuro chamado @zenorocha
2. @liferay @alloyui
6. jqueryboilerplate.com
7. browserdiet.com
9. os projetos mais populares voltados para client-side estão fadados a morrer
10. vs <canvas>
11. document.querySelector vs
12. vs <input type=”date”>
13. então quer dizer que tudo vai virar “nativo” um dia?
14. o que as principais empresas da web estão trabalhando hoje?
16. getbootstrap.com
18. facebook.github.io/react
20. topcoat.io
22. alloyui.com
24. purecss.io
28. como usar um “componente” hoje?
29. 1. Nunca crie! Use um plugin jQuery
30. 2. Copie e cole o código de alguém
31. 3. Torça pra que funcione
32. Web Components
33. <braziljs> braziljs.github.io/braziljs-element
34. <video is=”camera”> customelements.github.io/camera-element
35. Web Components Custom Elements Import Templates Shadow DOM Decorators*
36. Custom Elements
37. <element name="braziljs" constructor="BrazilJS" attributes="onde"> // implementação </element> <element>
38. <element name="camera" extends="video"> // implementação </element> <element>
39. zno.io/QxNJ
40. <brazil-js></brazil-js> usando JS var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { this.textContent = 'BrazilJS!'; }; document.register('brazil-js', { prototype: proto });
41. lifecycle •createdCallback •enteredDocumentCallback •leftDocumentCallback •attributeChangedCallback
42. x-tags.org
43. polymer-project.org
44. <polymer-element name="braziljs" attributes="onde"> <script> Polymer('braziljs', { onde: 'Porto Alegre', created: function() { // faça algo } }); </script> </polymer-element> como usar?
45. zno.io/QxlZ
46. Templates
47. Templates são blocos reutilizáveis de código
48. server-side mustache handlebars liquid jinja velocity savant
49. client-side mustache handlebars eco ejs jade hogan
50. gambiarra #1 <div id="template" style="display: none"> <img src="logo.png" class="logo.png"> </div>
51. <script id="template" type="text/x-handlebars-template"> <img src="logo.png"> </script> gambiarra #2
52. <template>
53. <template id="meuTemplate"> <img src=""> </template> como criar?
54. // 1. Acessa o conteúdo do template var t = document.querySelector('#meuTemplate').content; // 2. Manipula elemento interno do template t.querySelector('img').src = 'logo.png'; // 3. Clona e insere no DOM document.body.appendChild(t.cloneNode(true)); como usar?
55. Shadow DOM
56. Shadow DOM esconde os detalhes de implementação
57. mas e o <iframe>?
58. do que é feito um <video>? ou um password, textarea, date?
59. como usar? <h1>Documento</h1> <div id=”cuia”></div> var cuia = document.querySelector('#cuia') .createShadowRoot(); cuia.innerHTML = '<h1>Mate</h1>';
60. estilo, marcação e script encapsulados <h1>Documento</h1> <div id=”cuia”></div> var cuia = document.querySelector('#cuia') .createShadowRoot(); cuia.innerHTML = '<h1>Mate</h1>' + '<style>h1 { color: #f00; }</style>';
61. como ativar?
62. Import
67. como usar? <link rel="import" href="braziljs.html">
69. jonrimmer.github.io/are-we-componentized-yet
70. Flags
71. quero usar hoje, onde eu encontro? NPM? Bower?
72. @eduardolundgren
73. @bernarddeluna
74. customelements.io
75. <twitter> customelements.github.io/twitter-element
76. <gmaps> customelements.github.io/gmaps-element
77. <video is=”camera”> customelements.github.io/camera-element
78. <video is=”tracking”> eduardolundgren.github.io/tracking-element
79. ou seja...
80. encapsulamento e reaproveitamento de código de verdade
81. A melhor forma de prever o futuro é inventando ele
82. e..... camisetas!