Upload
mateus-ortiz
View
462
Download
0
Embed Size (px)
DESCRIPTION
Palestra - Front in Interior 2014
Citation preview
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