Web components: mais simples e produtivo com polymer!
- 1. WEB COMPONENTS Mais simples e produtivo com Polymer!
- 2. Andrew Willard 28 anos, Campinas / SP Analista de Sistemas Pós Graduado em Engenharia Software Líder Técnico de Front End Web
- 6. Afinal, o que são os WEB COMPONENTS?
- 7. SHADOW DOM TEMPLATES HTML IMPORTS CUSTOM ELEMENTS
- 8. <video controls poster="poster.png"> <source src="video.webm" type='video/webm;codecs="vp8, vorbis"' /> <source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> <track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-br" default></track> </video> LIGHTING DOM
- 9. <video controls poster="poster.png"> <div style="display: none"></div> <div> <div> <input type="button"> <input type="range" step="any" max="70.112"> <div style="display: none;">0:00</div> <div>1:10</div> <input type="button"> <input type="range" step="any" max="1"> <input type="button"> <input type="button"> </div> </div> </div> <source src="video.webm" type='video/webm;codecs="vp8, vorbis"' /> <source src="video.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> <track src="video.vtt" label="Portuguese subtitles" kind="subtitles" srclang="pt-br" default></track> </video> SHADOW DOM
- 10. Template é um DocumentFragment que pode ser reaproveitado <template id=”item”> <img> <div> <p class=”title”></p> <p></p> </div> <checkbox class=”star”> </checkbox> </template>
- 11. index.html <link rel=”import” href=”date-picker.html”> <link rel=”import” href=”timezone-date.html”> date-picker.html <link rel=”import” href=”moment-import.html”> timezone-date.html <link rel=”import” href=”moment-import.html”> moment-import.html <script src=”moment/moment.js”>
- 12. class FlagIcon extends HTMLElement { constructor() { super(); this._countryCode = null; } get country() { return this._countryCode; } set country(v) { this.setAttribute("country", v); } } class PlasticButton extends HTMLButtonElement { constructor() { super(); this.addEventListener("click", () => { // Executar uma animação super descolada! }); } } Crie seus próprios elementos!
- 14. <link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template> <script> // registro do elemento Polymer({ is: "element-name", // Propriedades e métodos do prototype do seu elemento properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
- 15. <link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template> <script> // registro do elemento Polymer({ is: "element-name", // Propriedades e métodos do prototype do seu elemento properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
- 16. <link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template> <script> // registro do elemento Polymer({ is: "element-name", // Propriedades e métodos do prototype do seu elemento properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
- 17. <link rel="import" href="another-element.html"> <dom-module id="element-name"> <template> <style> /* Estilos, variáveis e mixers CSS */ </style> <!-- local DOM do seu elemento --> <div>{{greeting}}</div> <!-- data bindings no DOM do elemento --> </template> <script> // registro do elemento Polymer({ is: "element-name", // Propriedades e métodos do prototype do seu elemento properties: { // properties públicas do elemento greeting: { type: String, value: "Hello!" } } }); </script> </dom-module>
- 18. <element-name id=”element” greeting=”Hi DevFestNE”> </element-name> Hi DevFestNE <link rel="import" href="element-name.html">
- 19. this.$.element.greeting=”Hi Again”; Hi Again <style> #element { --background-color: #38761D; } </style> this.$.element.setGreeting(”Hi Again”);
- 20. <template is="dom-repeat" items="{{items}}"> <div>#{{index}} - {{item}}</div> </template> Todas features, nenhum framework! <template is="dom-if" if="{{enabled}}"> <div>I’m enabled!</div> </template> Plataforma Web Web Components feitos com Polymer (ou não) Frameworks JS Aplicação
- 21. +4 MILHÕES DE WEB PAGES
- 22. + 500 projetos 6.000 elementos
- 23. O maior portal de entretenimento do MUNDO!
- 25. Uma coleção de elementos criados pela equipe do Google
- 26. Layout responsivo para estruturar a sua aplicação
- 27. Layout responsivo para estruturar a sua aplicação https://ebidel.github.io/material-playground/
- 28. Toda a complexidade das APIs em simples elementos