Um futuro chamado Web Components

4,238 views

Published on

BrazilJS 2013

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
  • Você poderia dar exemplos mais específicos, como se aplica talvez ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,238
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
51
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Um futuro chamado Web Components

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

×