Vue.js: Guia Oficial de Boas Práticas
Recentemente, os responsáveis por manter o Vue.js disponibilizaram um Guia Oficial de Boas Práticas (por enquanto disponível somente em inglês) elaborado pela própria equipe do framework.
A tradução literal seria “Guia de Estilo” (Style Guide), mas podemos dizer que o mais adequado neste caso seria “Guia Oficial de Boas Práticas do Vue.js”, o qual adotamos neste artigo.
O próprio guia já cita que não deve ser adotado verbatim por todos os times e projetos e é recomendado que seja adaptado conforme a situação.
Níveis das regras
O guia é separado em quatro níveis de regras:
- Essenciais: visam à prevenção de erros e por isso são as regras mais importantes do guia
- Fortemente recomendadas: melhoram a legibilidade e facilidade de codificação
- Recomendadas: visam a garantir a consistência entre os códigos produzidos pelos desenvolvedores que utilizam o framework. É um exemplo do que dissemos em nosso artigo anterior sobre a adoção de um estilo próprio de cada linguagem (mais detalhes em “Vista a camisa ao aprender uma nova linguagem”)
- Use com cautela: algumas funcionalidades do Vue servem para facilitar a adoção do framework em códigos legados ou casos raros de uso. Quando utilizados sem critério podem se tornar uma fonte de bugs, portanto essas funcionalidades devem ser evitadas ou usadas com discernimento
Regras e Boas Práticas
Algumas regras “essenciais” mencionam o uso de nomes de componentes com várias palavras, para evitar clashes com tags HTML que existem ou ainda não existem; o data de um componente deve ser uma função para evitar referência ao mesmo objeto data em todas as instâncias do componente (este é bem importante! anotem nos seus caderninhos); utilizar estilos scoped em todos os componentes que não forem o componente raiz; entre outros.
Muitas regras da categoria “fortemente recomendadas” citam regras de nomeação para componentes para facilitar a organização dentro do editor de código (aproveitando da ordem alfabética da listagem de arquivos, por exemplo); outras regras citam o uso de CamelCase e kebab-case dependendo se o componente é declarado em um template ou em um JS/JSX.
Na categoria “recomendados”, temos sugestões de ordenação das diferentes estruturas de um componente na sua declaração, como o estado local e eventos. Já na declaração de uso, temos a recomendação de outro set de ordenação para os atributos do componente. Lembrando que essa categoria se refere à facilidade de leitura do código por todos os desenvolvedores Vue, portanto esta sim seria uma categoria que lida mais com o estilo.
Por fim, na categoria de “uso com cautela”, temos alguns casos de efeitos colaterais no uso de v-if e afins sem a declaração do key; comunicação entre componentes pais e filhos devem idealmente ser props down e events up (props dos pais para filhos e eventos dos filhos para os pais); e outros.
Importância
Embora esteja em beta, este guia já é bastante extenso e sua leitura atenta pode levar algumas horas.
É sempre bom quando os próprios criadores recomendam um guia de boas práticas. Assim podemos ter um pouco da ideia por trás do framework, entendendo os motivos que o levaram a ser como é atualmente. É muito importante que não saibamos apenas usar o framework, mas sempre que possível investigar e entender as motivações. Este guia é um exemplo ótimo de como aplicar essa filosofia em nossa vida de desenvolvedores. Ter essa preocupação nos ajuda a ir para o próximo nível (dica quente 🔥).
Gostou deste artigo?
Gostou do guia de boas práticas?
Gosta de Vue.js?
Recomende 👏, comente e compartilhe!
Siga-nos nas redes sociais e não perca as novidades! http://www.codeprestige.com.br — Facebook, Twitter, Youtube
