Stefan Horochovec• Arquiteto de Soluções – Cloud/Mobile;• MBA em Engenharia e Inovação;• Espec. em Engenharia de Software e Gestão de Projetos;• Instrutor/Professor/Palestrante/Autor;• Twitter: @horochovec• Github: @horochovec• Blogs: http://www.horochovec.com/ e

http://www.horochovec.com.br/

Agenda• HTML;• WebComponents;• Polymer;• Starter Kit;• Projeto Exemplo;• Resources;• Dúvidas;

WebComponents• Sugerido em 2012 por Dominic Cooney e Dimitri Glazkov

(Googlers);• Especificação para implementação de componentes para Web;• Custom Elements;• Templates;• Shadow DOM;• HTML Imports;

https://www.w3.org/TR/2012/WD-components-intro-20120522/

Custom Elements• Permite que você defina seus próprios tipos de elementos

com nomes de elementos customizados.• Declarativo;• Extensível;• Re-utilizável;

Templates• São blocos de códigos reutilizáveis;• Permite a injeção de códigos HTML de forma dinâmica;

Shadow DOM• Permite a criação de estilos que são independentes

e isolados, não permitindo que aja interferência entre outros elementos;

HTML Imports• Consiste na forma de importação de elementos

para dentro de sua aplicação;

Criando seu componente• Instalações necessárias:• npm install -g yo;• npm install -g generator-element;

• Criando o componente• mkdir [componente];• cd [componente];• yo element;

Paper Elements• Implementação do Material Design via Polymer;• https://elements.polymer-project.org/browse?package=paper-elements

Exemplos• Demo do Starter Kit• https://github.com/horochovec/polymer-phonegap-starterkit

• Demo do Projeto Paper Elements;• https://github.com/horochovec/polymer-elements-showcase