Componentizando a Web com Polymer
-
Upload
stefan-horochovec -
Category
Technology
-
view
860 -
download
0
description
Transcript of Componentizando a Web com Polymer
![Page 1: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/1.jpg)
![Page 2: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/2.jpg)
Stefan Horochovec
• Arquiteto de Software – CISS Software e Serviços;• Consultor:• Java EE;• Cloud Computing; • Mobile Solutions;
• Revisor Técnico – Packpub Publishing;• Instrutor/Professor/Palestrante/Autor;
![Page 3: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/3.jpg)
![Page 4: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/4.jpg)
![Page 5: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/5.jpg)
Como programamos em HTML
![Page 6: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/6.jpg)
![Page 7: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/7.jpg)
E quando criamos um componente....
![Page 8: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/8.jpg)
![Page 9: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/9.jpg)
![Page 10: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/10.jpg)
![Page 11: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/11.jpg)
![Page 12: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/12.jpg)
![Page 13: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/13.jpg)
Nada faz sentido
![Page 14: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/14.jpg)
The dead is comming
![Page 15: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/15.jpg)
![Page 16: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/16.jpg)
WebComponents• Especificação para implementação de componentes para Web;• Sugerida a 4 anos por Dimitri Glazkov;• Sugerida a implementação para que navegadores pudessem facilitar a criação e
importação de componentes dentro de WebApps modernas;• A implementação da especificação faz com que o navegador faça o trabalho
para o desenvolvedor que hoje API’s fazem (jQuery, etc);• Apenas o Google Chrome e o Opera dão suporte total a WebComponents;
![Page 17: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/17.jpg)
Especificações• CustomElements
• Esta especificação descreve o método para permitir o autor para definir e usar novos tipos de elementos DOM de um documento.
• Especificação: http://w3c.github.io/webcomponents/spec/custom/
• HTML Imports• HTML Imports são uma forma de incluir e reutilizar documentos HTML em outros documentos HTML.• Especificação: http://w3c.github.io/webcomponents/spec/imports/
• Templates• Esta especificação descreve um método para declarar inert Subtrees em HTML DOM e manipulá-los para instanciar
fragmentos de documentos com conteúdo idêntico.• Especificação: https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
• Shadow DOM• Esta especificação descreve um método de estabelecer e manter limites funcionais entre as árvores do DOM
permitindo, assim, o encapsulamento melhor funcional dentro da árvore DOM.• Especificação: http://w3c.github.io/webcomponents/spec/shadow/
![Page 18: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/18.jpg)
Suporte
![Page 19: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/19.jpg)
Bibliotecas
![Page 20: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/20.jpg)
![Page 21: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/21.jpg)
![Page 22: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/22.jpg)
![Page 23: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/23.jpg)
![Page 24: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/24.jpg)
![Page 25: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/25.jpg)
Polymer – O que é?• http://www.polymer-project.org/• Conceito de criação de web-components para aplicações modernas;• Reutilização de componentes em suas Modern Webapps; • Mantido pelo Google;• Boilerplate: https://github.com/webcomponents/polymer-boilerplate
![Page 26: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/26.jpg)
Criando o seu template
![Page 27: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/27.jpg)
![Page 28: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/28.jpg)
![Page 29: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/29.jpg)
componentes/first-template.html
![Page 30: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/30.jpg)
index.html
![Page 31: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/31.jpg)
Criando o seu primeiro componente
![Page 32: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/32.jpg)
![Page 33: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/33.jpg)
![Page 34: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/34.jpg)
componentes/hub-componente.html
![Page 35: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/35.jpg)
index.html
![Page 36: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/36.jpg)
Componente com serviços
![Page 37: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/37.jpg)
![Page 38: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/38.jpg)
![Page 39: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/39.jpg)
![Page 40: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/40.jpg)
componentes/hub-service.html
![Page 41: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/41.jpg)
componentes/hub-mensagem.html
![Page 42: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/42.jpg)
index.html
![Page 43: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/43.jpg)
mensagem.html
![Page 44: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/44.jpg)
Hands On
![Page 45: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/45.jpg)
Paper Elements
![Page 46: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/46.jpg)
Paper Elements• Suíte de componentes modernos implementando o conceito Material Design;• Componentes baseados em:
• Responsividade;• Usabilidade;
• Especificação: http://www.google.com/design/spec/material-design/introduction.html#
• Elementos - Showcase: https://www.polymer-project.org/components/paper-elements/demo.html#core-toolbar
• Designer: https://www.polymer-project.org/tools/designer/
![Page 47: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/47.jpg)
Demonstração
![Page 48: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/48.jpg)
Hands On
![Page 49: Componentizando a Web com Polymer](https://reader036.fdocumentos.com/reader036/viewer/2022062514/5584b15dd8b42a96768b4660/html5/thumbnails/49.jpg)
Obrigado