Palestra realizada no evento The Developers Conference em Florianópolis - 2016 na trilha Mobile, aonde eu comento sobre a utilização de WebComponents e Polymer

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

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

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

20. Custom Elements
• Permite que você defina seus próprios tipos de elementos
com nomes de elementos customizados.
• Declarativo;
• Extensível;
• Re-utilizável;

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

27. Shadow DOM
• Permite a criação de estilos que são independentes e
isolados, não permitindo que aja interferência entre outros
elementos;

31. HTML Imports
• Consiste na forma de importação de elementos para
dentro de sua aplicação;

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

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

66. Exemplos
• Demo do Starter Kit
• https://github.com/horochovec/polymer-phonegap-starterkit
• Demo do Projeto Paper Elements;
• https://github.com/horochovec/polymer-elements-showcase