O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Componentizando a Web com Polymer

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 49 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)

Anúncio

Semelhante a Componentizando a Web com Polymer (20)

Anúncio

Mais recentes (20)

Componentizando a Web com Polymer

  1. 1. 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;
  2. 2. Como programamos em HTML
  3. 3. E quando criamos um componente....
  4. 4. Nada faz sentido
  5. 5. The dead is comming
  6. 6. 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;
  7. 7. 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/
  8. 8. Suporte
  9. 9. Bibliotecas
  10. 10. 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
  11. 11. Criando o seu template
  12. 12. componentes/first-template.html
  13. 13. index.html
  14. 14. Criando o seu primeiro componente
  15. 15. componentes/hub-componente.html
  16. 16. index.html
  17. 17. Componente com serviços
  18. 18. componentes/hub-service.html
  19. 19. componentes/hub-mensagem.html
  20. 20. index.html
  21. 21. mensagem.html
  22. 22. Hands On
  23. 23. Paper Elements
  24. 24. 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/
  25. 25. Demonstração
  26. 26. Hands On
  27. 27. Obrigado

×