Um futuro chamado Web Components
12 gostaram4,345 visualizações
O documento discute a evolução dos componentes web nativos (Web Components), incluindo seus principais conceitos como Custom Elements, Templates, Shadow DOM e Import. Apresenta exemplos de como criar e usar componentes personalizados hoje e destaca projetos open source que implementam esse padrão emergente.
Um futuro chamado Web Components
- 9. os projetos mais populares voltados para client-side estão fadados a morrer
- 10. vs <canvas>
- 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
- 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
- 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
- 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
- 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>
- 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
- 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">
- 70. Flags
- 71. quero usar hoje, onde eu encontro? NPM? Bower?
- 72. @eduardolundgren
- 73. @bernarddeluna
- 79. ou seja...
- 80. encapsulamento e reaproveitamento de código de verdade
- 81. A melhor forma de prever o futuro é inventando ele