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;

Como programamos em HTML

E quando criamos um componente....

Nada faz sentido

The dead is comming

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;

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/

Suporte

Bibliotecas

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

Criando o seu template

componentes/first-template.html

index.html

Criando o seu primeiro componente

componentes/hub-componente.html

index.html

Componente com serviços

componentes/hub-service.html

componentes/hub-mensagem.html

index.html

mensagem.html

Hands On

Paper Elements

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/

Demonstração

Hands On

Obrigado