Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Marcos Felipe
September 01, 2018

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

Marcos Felipe

September 01, 2018
Tweet

More Decks by Marcos Felipe

Other Decks in Programming

Transcript

  1. - Facilidade na leitura da utilização; - Receber notificação em

    desenvolvimento se possui um formato inválido.
  2. “Em aplicações os estilos para componentes de alto nível “App”

    devem ser globais, mas os outros devem utilizar o scope”
  3. “Sempre que houver um sistema de compilação para concatenar arquivos,

    cada componente deve estar em seu próprio arquivo.”
  4. “Componentes base que se aplicam a estilos e convenções específicos

    da aplicação, tais como Base, App, ou V.”
  5. Esses componentes devem conter somente - Elementos HTML; - Outros

    componentes base; - Estados locais; - Elementos de UI de terceiros.
  6. 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.
  7. “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”
  8. “Nomes de componentes devem começar com a palavra de mais

    alto nível e terminar com palavras que descrevem modificações.”
  9. 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.
  10. - 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)
  11. - 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)
  12. - 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)
  13. “Vuex deve ser preferido para o gerenciamento de estado global,

    em vez de this.$root ou um o uso de event bus.”