Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

12

Share

Download to read offline

Um futuro chamado Web Components

Download to read offline

BrazilJS 2013

Related Books

Free with a 30 day trial from Scribd

See all

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!
  • GideoFerreira

    Jan. 31, 2016
  • EliabePaes

    Apr. 17, 2015
  • emilianofernandes

    Nov. 29, 2014
  • AndrClemer

    Aug. 20, 2014
  • joneserick

    Jul. 29, 2014
  • marciodel

    Jun. 3, 2014
  • astrixsz

    May. 13, 2014
  • eunyoungkim51

    Mar. 13, 2014
  • OsnyNetto

    Mar. 4, 2014
  • LeandroSilva221

    Mar. 4, 2014
  • ApuSoft

    Feb. 4, 2014
  • DGurgel

    Dec. 31, 2013

BrazilJS 2013

Views

Total views

4,315

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

51

Shares

0

Comments

0

Likes

12

×