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 Foliattifelipef@dbserver.com.br

Mauro Sérgio da Costa Lealmauroscl@dbserver.com.br