4 melhores práticas para o desenvolvimento de projetos Vue em grande escala

Como você sabe, Vue.js é uma estrutura baseada em JavaScript cuja popularidade cresceu rapidamente nos últimos anos.



Existem muitas razões para o aumento da popularidade do Vue. Isso inclui a simplicidade da estrutura, a facilidade de sua integração em projetos existentes, a conveniência de trabalhar com ela e as restrições não muito fortes impostas aos aplicativos Vue. Tudo isso também ajuda o Vue a competir com o Angular e o React. Na verdade, parece que o Vue está, em muitos aspectos, no mesmo nível de outros frameworks e bibliotecas populares.



Decidi descobrir o que eles escrevem sobre as deficiências do Vue. Enquanto procurava por materiais relevantes, percebi que em todos os lugares eles dizem que o Vue não é bom o suficiente para desenvolver projetos de grande escala. Conhecendo a Vue, posso dizer com segurança que isso não é verdade. Neste post, quero chamar sua atenção para 4 diretrizes detalhadas para o desenvolvimento de projetos Vue de grande escala.

1. Use slots Vue para tornar seu código mais claro

Ao configurar relacionamentos de componentes, o modelo pai-filho é usado com mais frequência. Mas em algumas situações, esse modelo pode estar longe de ser o mais bem-sucedido. Imagine que você tem um único componente pai que hospeda um grande número de componentes filhos. Isso significa que você tem que usar um grande número de parâmetros de entrada (props) e gerar muitos eventos para estabelecer a interação dos componentes. Nessas condições, o código ficará confuso muito rapidamente. Essas são as situações que os desenvolvedores de projetos de grande escala enfrentam. Mas o Vue tem mecanismos projetados especificamente para lidar com esses tipos de problemas.



Estamos falando de slots. Eles são usados ​​para fornecer uma maneira alternativa de representar os relacionamentos entre pais e filhos. Slots, ou seja, elementos <slot>, dão ao desenvolvedor a capacidade de reorganizar o código. Aqui está um exemplo simples de como usar um slot:

<div class="demo-content">
   <slot></slot>
</div>

Quando tal componente for renderizado, sua tag <slot></slot>será substituída pelo conteúdo da tag <demo-content>:

<demo-content>
  <h2><font color="#3AC1EF">Hi!</font></h2>
  <class-name name="Welcome to Vue!"></class-name>
</demo-content>

Existem muitas variedades de slots que podem ser usados ​​em projetos Vue. A coisa mais importante que você precisa saber sobre slots é que seu uso pode ter um grande impacto em um projeto em crescimento. Eles mantêm o código do projeto em boa forma e ajudam a criar um código limpo.

2. Crie componentes independentes e os reutilize

Siga o princípio FIRST ao desenvolver componentes , tornando os componentes Focados, Independentes, Reutilizáveis, Pequenos e Testáveis.



Na verdade, o segredo para projetar sistemas "grandes" com eficácia não é tentar construir esses sistemas em primeiro lugar. Em vez disso, você precisa montar esses sistemas a partir de peças menores que resolvem problemas altamente especializados. Isso torna mais fácil avaliar como as partes menores dos sistemas se encaixam em seus objetivos “maiores”.

Eddie Osmani



Você pode usar sistemas especializados como o Bit para criar e gerenciar componentes . Aqui está o material sobre isso.

3. Manter uma loja Vuex bem organizada

Vuex é um padrão e biblioteca de gerenciamento de estado de aplicativo Vue. Com o Vuex, você pode organizar um armazenamento de dados centralizado para todos os componentes do aplicativo. Já vi comentários sobre o Vuex que dizem que o Vuex limita a capacidade dos desenvolvedores de estruturar um projeto e os impede de fazer o que precisam. Eu não concordo com tais afirmações. A Vuex na verdade ajuda desenvolvedores que seguem um conjunto de princípios a estruturar seus projetos, tornando-os mais organizados.



Antes de falar sobre esses princípios, gostaria de falar sobre 4 componentes principais dos repositórios Vuex que qualquer pessoa que queira usar esses repositórios efetivamente precisa conhecer. Se você estiver familiarizado com esses componentes, significa que pode facilmente estruturar sua loja Vuex e melhorar a organização do projeto. Aqui está uma breve descrição:

• Estados: usado para armazenar dados do aplicativo.
• Getters: usado para organizar o acesso a objetos de estado fora do armazenamento.
• Mutações: necessárias para modificar objetos de estado.
• Ações: usado para aplicar mutações.

Supondo que você esteja familiarizado com esses componentes, vamos falar sobre os princípios acima:

1. O estado da camada de aplicativo precisa ser gerenciado centralmente, armazenando-o em um repositório.
2. As mudanças de estado sempre devem ser feitas usando mutações.
3. A lógica assíncrona deve ser encapsulada; ela deve agir apenas no estado por meio de ações.

Se você seguir estes 3 princípios, significa que será capaz de estruturar bem o projeto. Se, no decorrer do crescimento do projeto, você decidir que o código dos componentes Vuex correspondentes precisa ser colocado em arquivos diferentes, você pode fazer isso facilmente. Abaixo está um exemplo de uma estrutura de projeto usando Vuex:

├── index.html
├── main.js
├── api
├── components
└── store
    ├── index.js          
    ├── actions.js
    ├── mutations.js
    └── modules

▍ Organização de armazenamento modular VIP

Neste artigo, estamos falando sobre projetos de grande escala. Pode-se esperar que esses projetos usem arquivos muito grandes e complexos. Os programadores que criam esses projetos precisam de mecanismos de gerenciamento de armazenamento que reflitam suas necessidades. Ao mesmo tempo, a estrutura do armazenamento não deve ser desnecessariamente complicada. Portanto, é recomendável que você organize suas lojas Vuex de forma modular, customizando-as de acordo com sua visão da melhor estrutura para tais lojas. Não há uma maneira definida de dividir o armazenamento em módulos. Alguns desenvolvedores adotam uma abordagem baseada na capacidade de design e alguns adotam uma abordagem de modelo de dados. A decisão final sobre a divisão do armazenamento em módulos é feita pelo programador responsável pelo projeto.O armazenamento razoavelmente estruturado tem um impacto positivo na usabilidade de um projeto a longo prazo.



Aqui está um exemplo de uma abordagem modular para estruturar o armazenamento:

store/
   ├── index.js 
   └── modules/
       ├── module1.store.js
       ├── module2.store.js
       ├── module3.store.js
       ├── module4.store.js
       └── module5.store.js

▍ Usando métodos auxiliares

Acima, falei sobre 4 componentes usados ​​em repositórios Vuex. Considere uma situação em que você precisa acessar estados e trabalhar com getters, quando precisa chamar ações e mutações em componentes. Nesses casos, você não precisa criar muitos métodos ou propriedades computadas. Você pode simplesmente usar um método auxiliar ( mapState, mapGetters, mapMutationse mapActions), cuja utilização evitaria indevidamente aumentar o volume de código. Vamos falar sobre como usar esses métodos auxiliares.

▍mapState

Se um componente precisar acessar várias propriedades de armazenamento ou vários getters, isso significa que podemos usar um método auxiliar mapStatepara gerar uma função getter. Isso nos poupa de ter que escrever quantidades relativamente grandes de código.

import { mapState } from 'vuex'
export default {
  computed: mapState({
    count: state => state.count,
    countAlias: 'count',
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

▍mapGetters

O método auxiliar é mapGettersusado para configurar o mapeamento de getters de armazenamento para propriedades locais computadas.

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'count1',
      'getter1',
    ])
  }
}

▍mapMutations

Um método auxiliar é mapMutationsusado em componentes para aplicar mutações. Ele define a correspondência entre métodos de componentes e chamadas store.commit. Além disso, este método pode ser usado para transferir alguns dados para o armazenamento.

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations({
      cal: 'calculate' //  `this.cal()`  `this.$store.commit('calculate')`
    })
  }
}

▍mapActions

Um método auxiliar mapActionsé usado em componentes para despachar ações. Ele define a correspondência entre métodos de componentes e chamadas store.dispatch.

import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions({
      cal: 'calculate' //  `this.cal()`  `this.$store.dispatch('calculate')`
    })
  }
}

4. Não se esqueça dos testes de unidade

O teste é outro aspecto importante de qualquer projeto. Os desenvolvedores devem testar o que criam, independentemente da importância e do tamanho dos projetos. Isso é especialmente verdadeiro em projetos de grande escala que têm centenas ou até milhares de pequenas funções. Nossa tarefa é testar cada um deles. Os testes de unidade ajudam a resolver este problema. Eles permitem que o programador teste módulos individuais de código. Esses testes não apenas permitem identificar e eliminar erros. Eles também aumentam o nível de confiança do programador ou da equipe de programadores na correção de suas ações quando são feitas alterações no código existente. Quando, com o tempo, o projeto cresce, os desenvolvedores, graças ao uso de testes de unidade, podem adicionar com segurança novos recursos a ele e ao mesmo tempo não ter medo de queque as inovações irão atrapalhar o trabalho dos mecanismos existentes. Tudo o que você precisa fazer é seguir a prática de escrever testes de unidade desde o início do projeto.



Se falamos de testes de unidade usados ​​em projetos baseados no Vue, então podemos dizer que tais testes são quase idênticos aos usados ​​em projetos baseados em outros frameworks e bibliotecas. Ou seja, Jest , Karma ou Mocha funcionam bem com Vue . Mas, não importa qual estrutura você escolha para criar seus testes, existem algumas diretrizes gerais para se manter em mente ao desenvolver testes de unidade:

• Se o teste falhar, ele deve exibir mensagens de erro claras.
• É recomendável usar boas bibliotecas de asserção ao criar testes. (Por exemplo, os mecanismos para gerar reivindicações são integrados ao Jest e, com o Mocha, a biblioteca Chai é usada).
• Os testes de unidade devem cobrir todos os componentes do Vue.

Se você seguir essas recomendações desde o início do projeto, conforme o projeto cresce, reduzirá muito o tempo gasto na depuração do código e em seu teste manual.



Os projetos Vue, além dos testes de unidade, podem ser submetidos a testes de ponta a ponta e de integração. A situação aqui, como no caso dos testes de unidade, também é muito semelhante à situação com outras estruturas e bibliotecas. Portanto, é recomendável incluir em projetos e testes semelhantes. Normalmente, a parte de roteamento de um projeto não é testada com testes de unidade. O teste de ponta a ponta é usado aqui. Testar a loja Vue é o maior desafio. É recomendável usar testes de integração para testá-lo, pois é considerado uma perda de tempo testar estados, ações ou getters separadamente.

Resultado

Depois de revisar os recursos técnicos do Vue.js neste post, reforcei minha crença de que esse framework é adequado para o desenvolvimento de projetos de grande escala. Com sua ajuda, como com outros frameworks e bibliotecas, você pode criar tais projetos e gerenciá-los, mantendo-os em bom estado.



Você acha que o Vue é adequado para o desenvolvimento de projetos de grande escala?