Web Components
Felipe FoliattiMauro Leal
Sumário
• Problema
• O que é?
• História Breve da Web
• A Spec
• Como era?
• Suporte dos browsers
• Polymer
• Two Cents
Problema
• Duplicação de Código
• Frameworks diversos
• Conflitos de Código
• Encapsulamento: classes-hell e div-hell
• CSS Anti-Patterns
O que é?
• Conjunto de especificações
• Atende aos problemas de conflitos
• Reutilização
• Significado ao código
A História
A Spec
• Templates
• Custom Elements
• Shadow DOM
• HTML Imports
Templates
Custom ElementsCRIANDO
EXTENDENDO
Shadow DOM
HTML Imports
Como era?
• Custom Elements em vez de Javascript
• Shadow DOM em vez de Iframe
• HTML Template em vez de Strings em TagScript, com Mustache e Handlebar
• HTML imports ao invés de copiar e colar a sequência de links
Suporte dos Browsers
Polymer (Arquitetura)
webcomponents.js
Polymer (exemplo)
my-element.html
Polymer (exemplo)
index.html
My Two Cents
Referências
• http://www.w3.org/standards/techs/components#w3c_all
• http://webcomponents.org/
• https://www.polymer-project.org/0.5/
Felipe Lima [email protected]
Mauro Sérgio da Costa [email protected]