Pro Yearly is on sale from $80 to $50! »

A future called Web Components

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
December 17, 2013

A future called Web Components

HTML5 LA

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

December 17, 2013
Tweet

Transcript

  1. None
  2. I’m from Brazil!

  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. the most famous client-side projects are fated to die

  11. None
  12. None
  13. None
  14. so you think everything will become “native" one day?

  15. what the major web companies have been working on?

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. how do you create a
 “component” nowadays?

  30. 1. Never create! Just use a jQuery plugin

  31. 2. Copy and paste someone’s code

  32. 3. And hope it works

  33. None
  34. <html5-la>

  35. <video is=”camera”> eduardolundgren.github.io/video-camera-element

  36. None
  37. None
  38. <element name=“html5-la“ constructor="HTML5LA" attributes="where"> // content goes here </element> <element>

  39. <element> <element name="camera" extends="video"> // content goes here </element>

  40. None
  41. using JS <html5-la></html5-la> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function()

    { this.textContent = ‘HTML5 LA!'; }; document.register(‘html5-la', { prototype: proto });
  42. lifecycle • createdCallback() • enteredDocumentCallback() • leftDocumentCallback() • attributeChangedCallback()

  43. None
  44. None
  45. how to use it? <polymer-element name=“html5-la" attributes="where"> <script> Polymer(‘html5-la', {

    where: ‘Santa Monica’, created: function() { // do something } }); </script> </polymer-element>
  46. lifecycle • created() • enteredView() • leftView() • attributeChanged()

  47. None
  48. Templates are reusable blocks of code

  49. Templates are reusable blocks of code

  50. None
  51. None
  52. attempt #1 <div id="template" style="display: none"> <img src="logo.png" class="logo.png"> </div>

  53. <script id="template" type="text/x-handlebars-template"> <img src="logo.png"> </script> attempt #2

  54. None
  55. how to create it? <template id="myTemplate"> <img src=""> </template>

  56. how to use it? // 1. Access template’s content var

    t = document.querySelector('#myTemplate').content; // 2. Manipulate internal element t.querySelector('img').src = 'logo.png'; // 3. Clone and append in the DOM document.body.appendChild(t.cloneNode(true));
  57. None
  58. Shadow DOM hides the implementation details

  59. what about <iframe>?

  60. what’s a
 <video> made of? or password, textarea, date?

  61. how to use it? <h1>Foo</h1> <div id=”elem”></div> var elem =

    document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = '<h1>Bar</h1>';
  62. markup, style & script encapsulated <h1>Foo</h1> <div id=”elem”></div> var elem

    = document.querySelector(‘#elem'); var elemShadowDOM = elem.createShadowRoot(); ! elemShadowDOM.innerHTML = ‘<h1>Bar</h1>’ + ‘<style>h1 { color: red; }</style>’;
  63. None
  64. None
  65. None
  66. how to use it? <link rel="import" href="myelement.html">

  67. None
  68. None
  69. None
  70. None
  71. where can I
 find them? NPM? Bower?

  72. None
  73. None
  74. None
  75. <twitter-button> zenorocha.github.io/twitter-button

  76. <google-maps> eduardolundgren.github.io/google-maps-element

  77. <video is=”camera”> eduardolundgren.github.io/video-camera-element

  78. <video is=”tracking”> eduardolundgren.github.io/video-tracking-element

  79. in other words…

  80. encapsulation and code reuse for real

  81. the best way to predict the future is to create

    it
  82. None
  83. thanks! zenorocha.com