Palestra - Front in Interior 2014

1. Melhores Práticas
!
Web Components
@mteusortiz

2. mateusortiz
@mteusortiz

5. Web Components ??
Criar Tags
Estender Tags

6. Hoje vamos falar de
Melhores Práticas

8. # Namespacing
O Custom Elements
deve ter um traço em seu nome

9. goo.gl/S3t eiDw

10. # exemplo
<mark-down></mark-down>
goo.gl/t
Cjkqkq

11. # Atributos de dados
Definir um valor default
para o atributo

12. # exemplo
Use atributos booleanos para valores booleanos
<my-tabs selected></my-tabs>
em vez de
<my-tabs selected="true"></my-tabs>

13. # 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

14. 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">

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

16. 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.

17. # Não coloque Tudo no
Shadow DOM
Shadow DOM permite você esconder os
detalhes de implementação fora da vista.

18. 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.

19. # 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.

20. não se esqueça de...
Acessibilidade
Performance
Responsive
Testes

21. t
Obrigado!
twitter.com/mteusortiz
github.com/mateusortiz