Melhores Práticas 
! 
Web Components 
@mteusortiz
mateusortiz 
@mteusortiz
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
goo.gl/S3t eiDw
# exemplo 
<mark-down></mark-down> 
goo.gl/t 
Cjkqkq
# Atributos de dados 
Definir um valor default 
para o atributo
# exemplo 
Use atributos booleanos para valores booleanos 
<my-tabs selected></my-tabs> 
em vez de 
<my-tabs selected="tru...
# Incluir Dependências 
Inclua todas as dependências necessárias do componente. 
defina cabeçalhos de cache apropriados, e...
t 
# exemplo 
imports.html 
<link rel="import" href="../src/my-tabs.html"> 
<link rel="import" href="../src/my-buttons.htm...
# 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 aninh...
# 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 
performan...
# 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 se esqueça de... 
Acessibilidade 
Performance 
Responsive 
Testes
t 
Obrigado! 
twitter.com/mteusortiz 
github.com/mateusortiz
Melhores Práticas Web Components
Melhores Práticas Web Components
Melhores Práticas Web Components
Próximos SlideShares
Carregando em…5
×

Melhores Práticas Web Components

1.240 visualizações

Publicada em

Palestra - Front in Interior 2014

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.240
No SlideShare
0
A partir de incorporações
0
Número de incorporações
399
Ações
Compartilhamentos
0
Downloads
7
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Melhores Práticas Web Components

  1. 1. Melhores Práticas ! Web Components @mteusortiz
  2. 2. mateusortiz @mteusortiz
  3. 3. Web Components ?? Criar Tags Estender Tags
  4. 4. Hoje vamos falar de Melhores Práticas
  5. 5. # Namespacing O Custom Elements deve ter um traço em seu nome
  6. 6. goo.gl/S3t eiDw
  7. 7. # exemplo <mark-down></mark-down> goo.gl/t Cjkqkq
  8. 8. # Atributos de dados Definir um valor default para o atributo
  9. 9. # exemplo Use atributos booleanos para valores booleanos <my-tabs selected></my-tabs> em vez de <my-tabs selected="true"></my-tabs>
  10. 10. # 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
  11. 11. t # exemplo imports.html <link rel="import" href="../src/my-tabs.html"> <link rel="import" href="../src/my-buttons.html"> concateno em único arquivo index.html <link rel="import" href="../src/imports.html">
  12. 12. # Documente seu componente Documente seu componente para que outros saibam como usá-lo.
  13. 13. 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.
  14. 14. # Não coloque Tudo no Shadow DOM Shadow DOM permite você esconder os detalhes de implementação fora da vista.
  15. 15. 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.
  16. 16. # 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.
  17. 17. não se esqueça de... Acessibilidade Performance Responsive Testes
  18. 18. t Obrigado! twitter.com/mteusortiz github.com/mateusortiz

×