VueJs Style Guide - Criando aplicações manuteníveis

Transcript

1. VueJs Style Guide Criando aplicações manuteníveis
2. */omarkdev
3. Categorias A B C D Essencial Altamente recomendadas Recomendadas Use com cautela
4. Prevenindo erros A
5. Nomes de componentes com multi-palavras 1.
6. “Nomes de componentes devem ser sempre multi-palavras, exceto o componente raiz”
9. Propriedade “data” no componente 2.
10. “A propriedade ‘data’ deve ser uma função, exceto no ‘new Vue’”
13. Por que precisa ser uma função?
15. Definindo “prop” 3.
16. “A definição de propriedades deve ser a mais detalhada possível, especificando pelo menos o seu tipo”
20. Mas por quê?
21. - Facilidade na leitura da utilização; - Receber notificação em desenvolvimento se possui um formato inválido.
22. Uso do “key” no “v-for” 4.
23. “Sempre use o atributo key com v-for”
26. Explicação detalhada
27. Estilos com escopos em componentes 5.
28. “Em aplicações os estilos para componentes de alto nível “App” devem ser globais, mas os outros devem utilizar o scope”
33. Imagine o seguinte caso
34. Melhorando a legibilidade B
35. Cada componente um arquivo 1.
36. “Sempre que houver um sistema de compilação para concatenar arquivos, cada componente deve estar em seu próprio arquivo.”
39. Nome de componente base 2.
40. “Componentes base que se aplicam a estilos e convenções específicos da aplicação, tais como Base, App, ou V.”
43. Esses componentes devem conter somente - Elementos HTML; - Outros componentes base; - Estados locais; - Elementos de UI de terceiros.
44. Vantagens - Ao listar por ordem alfabética, os componentes serão listados juntos; - Como os componentes precisam ser multi palavras, a convenção evita prefixos arbitrários; - Os componentes são sempre utilizados, então você pode torná-los globais.
45. Nomes de componente de instância única 3.
46. “Componentes que devem ter somente uma única instância ativa devem começar com o prefixo The, para determinar que eles podem ser somente um”
49. Isso não quer dizer que os componentes são utilizados em uma única página
50. Quer dizer que é somente utilizado uma vez a cada página.
51. Ordem das palavras no nome de componentes 4.
52. “Nomes de componentes devem começar com a palavra de mais alto nível e terminar com palavras que descrevem modificações.”
55. “Porque eu devo forçar nomes de componentes com uma linguagem menos natural?”
58. Separar por pastas também é uma opção - Geralmente leva-se mais tempo para navegar entre sub-diretórios do que componentes na mesma pasta; - Conflitos em nomes, pode se tornar mais difícil navegar no editor; - Refatoração se torna mais complexa, pois nem sempre substituir é suficiente para alterar as referências.
59. Minimizando opções arbitrárias C
60. Ordem das propriedades de um componente/instância 1.
61. “As propriedades de componente/instância devem ser ordenadas consistentemente.”
62. - functional 3. Tipo de componente (altera o tipo de componente) - el 1. Efeitos Externos (efeitos fora do componente) - name - parent 2. Nível global (requer conhecimento fora do componente) - delimiters - comments 4. Modificadores de template (muda forma como é compilado)
63. - components - directives - filters 5. Dependência de template (assets) - extends - mixins 6. Composição (merge das propriedades) - inheritAttrs - model - props/propsData 7. Interface (a interface do componente)
64. - methods - data - computed 8. Estado local (propriedades reativas locais) - watch - beforeCreate - created - beforeMount - mounted - beforeUpdate 9. Eventos (callbacks disparados atráves de eventos reativos) - updated - activated - deactivated - beforeDestroy - destroyed 10. Propriedades não reativas (propriedades independentes do sistema reativo)
65. - template/render - renderError 11. Renderização (A descrição declarativa da saída)
66. Linhas vazias em componentes/instâncias 2.
67. “Você pode adicionar uma linha vazia entre as propriedades de várias linhas.”
69. Ordem dos elementos de um componente de arquivo único “.vue” 3.
70. “Componentes de arquivo único devem sempre ter a ordem script, template, e style”
73. Padrões potencialmente perigosos D
74. Seletores de elemento com scoped 1.
75. “Os seletores de elemento devem ser evitados quando usados com scoped.”
78. Explicação detalhada
79. Como o scoped funciona
80. Gerenciamento de estado sem fluxo 2.
81. “Vuex deve ser preferido para o gerenciamento de estado global, em vez de this.$root ou um o uso de event bus.”
82. Mas você não precisa saber de tudo isso
85. Não é uma bala de prata!