Componentizando a Web com Polymer
-
Upload
stefan-horochovec -
Category
Technology
-
view
859 -
download
0
description
Transcript of Componentizando a Web com Polymer
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