Um futuro chamado Web Components

Um futuro chamado Web Components

BrazilJS 2013

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 22, 2013
Tweet

Transcript

  1. <web components> um futuro chamado @zenorocha

  2. @liferay @alloyui

  3. None
  4. None
  5. None
  6. jqueryboilerplate.com

  7. browserdiet.com

  8. None
  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?

  15. None
  16. getbootstrap.com

  17. None
  18. facebook.github.io/react

  19. None
  20. topcoat.io

  21. None
  22. alloyui.com

  23. None
  24. purecss.io

  25. None
  26. None
  27. None
  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

  63. None
  64. None
  65. None
  66. None
  67. como usar? <link rel="import" href="braziljs.html">

  68. None
  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!

  83. None