Desbravando Web Components

Descubra como esse conceito formado por cinco novas especificações (Templates, Decorators, Shadow DOM, Custom Elements, Imports) irá revolucionar o modo como desenvolvemos e interagimos na web.

Transcript

1. Desbravando  Web   Components @mteusor)z
2. @mteusor3z mateusor3z mateusor3z.com
5. Como  "criar"  um  componente   hoje
6. Google!  plugin  jQuery
7. Copie  e  cole  o  código  do  plugin
8. Funcionou?  Beleza
9. Web  Components
10. h,ps:/ /goo.gl/mN64DK
11. <rupy-­‐campinas> h"ps:/ /github.com/mateusor3z/gdg-­‐light
12. <video  is="camera"> h"ps:/ /github.com/eduardolundgren/video-­‐camera-­‐element
14. googlewebcomponents.github.io
15. Live  demo
17. <google-­‐map> github.com/GoogleWebComponents/google-­‐map
18. <google-­‐chart> github.com/GoogleWebComponents/google-­‐chart
20. Web  Components Shadow  DOM Template Custom  Elements HTML  Imports
21. Custom  Elements Define  novos  elementos  HTML/DOM
22. Criar  Novos  Elementos
23. var Proto = Object.create(HTMLElement.prototype); Proto.createdCallback = function() { this.textContent = "RuPy Campinas"; }; document.registerElement('rupy-city', { prototype: Proto }); <rupy-city></rupy-city>
24. <dom-module id="rupy-city"> <template> <h1>Rupy <strong>{{onde}}</strong></h1> </template> <script> Polymer({ is: 'rupy-city', properties: { onde: { type: String, value: 'Campinas' } } }); </script> </dom-module>
25. <rupy-city></rupy-city> Usando    o  elemento
26. Estendendo  elementos  existes
27. XMega = Polymer({ is: 'x-mega', extends: 'button', created: function() { this.style.border = '1px solid red'; } }); var el1 = new XMega(); console.log(el1 instanceof HTMLButtonElement); // true var el2 = document.createElement('button', 'x-mega'); console.log(el2 instanceof HTMLButtonElement); // true <button is="x-mega"></button>
28. Lifecycle  Callbacks created(); detached(); a"ributeChanged(); a"ached();
29. Template Template  client-­‐side  na3vo
30.                              Templates     são  pedaços                                inertes  de  DOM     que  podem  ser                            reu)lizados.  
31. Templates parseado,  não  é  renderizado conteúdo  inerte Usa  Dom  como  scaffold  
32. <template> ... </template>
33. <dom-module name="menu-tabs" noscript attributes="selected"> <template> ... </template> </dom-module>
34. t Shadow  Dom Esconder  Detalhes  de  implementação
35. t                                  O  Shadow  DOM   encapsula  style  e     marcação.  
36. <video src="video.mp4" controls></video>
37. Encapsula  style,   marcação  e  script  
38. HTML  Imports Carregar  Web  Components
39. <link rel="import" href="elements.html">
40. exemplo <link rel="import" href="bower_components/core-menu/ core-menu.html"> <link rel="import" href="bower_components/paper-item/ paper-item.html"> <link rel="import" href="bower_components/paper-item/ paper-item.html"> <link rel="import" href="bower_components/core-pages/ core-pages.html"> <link rel="import" href="elements.html"> elements.html
41. Vulcanize npm  install  -­‐g  vulcanize $  vulcanize  -­‐o  build.html  index.html     -­‐-­‐csp  -­‐-­‐strip
42. grunt-­‐vulcanize
43. gulp-­‐vulcanize
44. Suporte  a    Web  Components
45. t jonrimmer.github.io/are-­‐we-­‐componen<zed-­‐yet/
48. t polymer-­‐project.org
49. ç Google
52. core-­‐elements
53. Visual <core-­‐toolbar>   <core-­‐header-­‐panel>   <core-­‐drawer-­‐panel>   <core-­‐menu>   <core-­‐icon>   <core-­‐overlay>   .... não  Visual <core-­‐ajax>   <core-­‐localstorage>   <core-­‐range>   <core-­‐shared-­‐lib>   <core-­‐media-­‐query>   <core-­‐iconset>   ....
54. h`p:/ /goo.gl/5Tiy9U
55. paper-­‐elements
56. Polymer  Paper  Elements bu`ons   inputs   tabs   cards   panels   ....
57. Quem             está                           Usando
62. Açúcar  Sintá3co   Custom  Elements
63. document.registerElement('paper-tabs', { prototype: Object.create( HTMLElement.prototype ) }); vanilla
64. <dom-module id="paper-tabs"> ... </dom-module> polymer
65. <paper-tabs></paper-tabs> // document.createElement('paper-tabs'); Usando
66. Açúcar  Sintá3co   Template
67. <template> ... </template> vanilla
68. <dom-module id="list-users"> <template> <template is="dom-repeat" items="{{users}}"> <div>First name: <span>{{item.first}}</span></div> <div>Last name: <span>{{item.last}}</span></div> </template> </template> <script> Polymer({ is: 'list-users', ready: function() { this.users: [ {first: 'Bob', last: 'Smith'}, ... ]; } }); </script> </dom-module> polymer
69. Açúcar  Sintá3co   Shadow  Dom
70. var shadow = el.createShadowRoot(); shadow.innerHTML = '<h2>I`m a profile-card</ h2>'; vanilla
71. <dom-module id="profile-card"> <template> <link rel="import" type="css" href="styles.css"> <h2>I'm a profile-card</h2> </template> <script> Polymer({ is: 'profile-card' }); </script> </dom-module> polymer
72. como  não  se    tornar  um  zumbi  
73. algumas  coisas  que  podem   Ajudar  
74. webcomponents.org/
75. customelements.io/
76. github.com/mateusor)z/webcomponents-­‐the-­‐right-­‐way
77. nada  mais  fácil?  que  chegue   direto  no  meu  email?
78. Time Mateus   Or<z Addy   Osmani Rob   Dodson Erik   Isaksen Ciro   Nunes
79. webcomponentsweekly.me
80. como  começar  um   component  
81. t github.com/webcomponents/polymer-­‐boilerplate
82. t h,ps:/ /github.com/webcomponents/generator-­‐element
83. Em  poucas     palavras...
84. encapsulamento  e   reaproveitamento  de   código  de  verdade
85. Inventa  o  Futuro
87. Obrigado TWITTER.COM/MTEUSORTIZ GITHUB.COM/MATEUSORTIZ