1) O documento discute WebComponents, uma especificação para criar componentes reutilizáveis para a web. Apenas Chrome e Opera dão suporte total à especificação no momento. 2) As especificações CustomElements, HTML Imports, Templates e Shadow DOM são discutidas como parte de WebComponents. 3) A biblioteca Polymer é apresentada como uma forma de criar web components e sua reutilização em aplicações modernas.

2. 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;

5. Como programamos em HTML

7. E quando criamos um componente....

13. Nada faz sentido

14. The dead is comming

16. 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;

17. 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/

18. Suporte

19. Bibliotecas

25. 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

26. Criando o seu template

29. componentes/first-template.html

30. index.html

31. Criando o seu primeiro componente

34. componentes/hub-componente.html

35. index.html

36. Componente com serviços

40. componentes/hub-service.html

41. componentes/hub-mensagem.html

42. index.html

43. mensagem.html

44. Hands On

45. Paper Elements

46. 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/

47. Demonstração

48. Hands On

49. Obrigado