Melhores Práticas !

Web Components

@mteusortiz

@mteusortiz

mateusortiz

Web Components ??

Criar Tags

Estender Tags

Hoje vamos falar de Melhores Práticas

# Namespacing

O Custom Elements deve ter um traço em seu nome

tgoo.gl/S3eiDw

# exemplo

t

<mark-down></mark-down>

goo.gl/Cjkqkq

# Atributos de dados

Definir um valor default para o atributo

# exemploUse atributos booleanos para valores booleanos

<my-tabs selected></my-tabs>

em vez de

<my-tabs selected="true"></my-tabs>

# Incluir Dependências

Inclua todas as dependências necessárias do componente.defina cabeçalhos de cache apropriados, estas só serão obtidos e

carregados uma vez

t

# exemplo

imports.html

<link rel="import" href="../src/my-tabs.html"> <link rel="import" href="../src/my-buttons.html">

index.html

<link rel="import" href="../src/imports.html">

concateno em único arquivo

# Documente seu componente

Documente seu componente para que outros saibam como usá-lo.

Os atributos podem ser descritos de forma concisa com o exemplo de marcação.

Se um componente é projetado para ser aninhada dentro de outra, mostre-a que está sendo usado nesse contexto.

Liste os seus métodos de JavaScript e propriedades.

Liste seus eventos.

# Não coloque Tudo no Shadow DOM

Shadow DOM permite você esconder os detalhes de implementação fora da vista.

No entanto, isso não é uma desculpa para poluir seu Shadow Dom, com mais

elementos ainda vai levar a uma pior performance. Implementação vai no

shadow; material semântico não.

# Não crie mais custom elements do que precise

Se você tem dois custom elements semelhantes e a única diferença é a cor. não

crie outro apenas estenda.

não se esqueça de...

Acessibilidade

Performance

Responsive

Testes

tObrigado!

twitter.com/mteusortiz

github.com/mateusortiz