Padrões de front-end

Prévia do material em texto

● Interpolação de strings; 
Errado: 
'Listas - ' + listName 
Certo: 
`Listas - ${listName}` 
 
● Colocar o css em outro arquivo no mesmo nível do componente; 
Errado: 
 
 .pd-content { 
 position: relative; 
 z-index: 1; 
 } 
 
Certo: 
 
 
● Utilizar scoped na hora de importar o css. Leia mais aqui; 
Errado: 
 
Certo: 
 
 
● Colocar try catch, console.log e tratar o erro se necessário quando fizer chamada 
para algum service; 
Errado: 
methods: { 
 async infiniteHandler($state) { 
 const newItems = await publicApi.getFollowedSubjects( 
 this.userProfile.Id 
 ); 
 ... 
 } 
} 
 
Certo: 
 methods: { 
 async infiniteHandler($state) { 
 try { 
 const newItems = await publicApi.getFollowedSubjects( 
 this.userProfile.Id 
 ); 
https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
 } catch(error) { 
 console.error(error); 
 // pode não fazer nada 
 // ou mandar um toast (toastUtil.error(...)) 
 // ou fazer uma lógica para mostrar uma msg de erro 
 // ou redirecionar para uma página de erro (404, 500) 
 // tem que avaliar caso a caso 
 } 
 ... 
} 
 
● Colocar todas as chamadas para apis no pd-api-service; 
 
● Se for criar um componente e ele for utilizado por mais de um projeto, colocar no 
pd-vue-components e fazer pensando que será utilizado em outros lugares. Confira 
também se ele já não existe; Pesquise no github, pergunte no canal. 
 
● Não colocar lógica no template, coloca no computed; 
Errado: 
 0" /> 
 
 
Certo: 
 
 
 computed: { 
 hasSubjectsFollowing() { 
 return this.subjectsFollowing.length > 0; 
 } 
} 
 
Em casos muito simples que não sejam repetidos em mais de um lugar não há 
necessidade de criar um computed, por exemplo uma operação booleana básica 
como “a || b” ou “a && b“. 
 
● É preferível utilizar id ao invés de index como key no v-for, ou seja, só utilize index 
como key se não tiver outra opção. Leia mais aqui; 
Errado: 
 
 
Certo: 
 
https://github.com/PasseiDireto/pd-api-services
https://github.com/PasseiDireto/pd-vue-components
https://br.vuejs.org/v2/guide/list.html
 
 
● Criar sempre PR e compartilhar com seu time. Se for um PR para algum projeto 
compartilhado (pd-vue-components, pd-api-service, pd-app-frontend), enviar para os 
outros times também. Para saber os times responsáveis por cada componente veja 
este documento; 
 
● Quando você estiver revisando um PR, seja rígido. Olhe se tem alguma parte do 
código que pode ficar mais limpo, mais fácil de entender, se tem algo fora do padrão, 
se tem algum bug óbvio, se tem alguma side effect que a pessoa não notou, se tem 
código repetido,… Quando uma pessoa da merge, o código se torna de todos. 
 
● Se for criar ou editar algum componente no pd-vue-components, avisar aos outros 
times; 
 
● Quando for adicionar um font-size no scss, utilizar o mixin rem que converte de 
pixels para rems. O primeiro parâmetro que diz qual a propriedade que deve ser 
definida pode ser omitido caso seja font-size.8 
Errado: 
font-size: 13px; 
 
Certo: 
@include rem('font-size', 13px); 
@include rem(13px); 
 
● Quando for criar uma classe scss, adicione o prefixo do projeto a ela. Quando o 
código estiver junto com outros e uma pessoa estiver inspecionando o elemento, 
facilita saber de que projeto aquela classe está vindo. 
Errado: 
.following {...} 
 
Certo: 
.pd-following {...} 
 
● Quando for utilizar uma cor, procurar se já não existe uma variável para ela. Existe 
uma lista de variáveis aqui; 
Errado: 
color: #90939e; 
 
Certo: 
color: $black-3; 
 
● Utilizamos flexbox ou grid como padrão, de preferência não utilize float, por 
exemplo, para montar um layout. 
https://github.com/PasseiDireto/pd-vue-components
https://github.com/PasseiDireto/pd-api-services
https://github.com/PasseiDireto/pd-app-frontend
https://www.notion.so/passeidireto/2432b4d53ac34898b38bad0414f30d8d?v=db80acda7f3643f6a1e4393631a7678d
https://github.com/PasseiDireto/pd-vue-components
https://github.com/PasseiDireto/pd-vue-components/blob/master/assets/sass/_site-settings.scss
Você pode ler mais sobre flexbox aqui. 
Aqui tem uma cheat-sheet de flexbox que pode ser útil também. 
 
● Quando criar uma classe css, utilizar apenas hífen (-); 
Errado: 
; 
 
Certo: 
; 
 
 
● Quando for fazer um componente ou uma página, olhe o avocode para olhar as 
medidas certas e evitar ajuste de design depois; 
 
● Quando for fazer um componente ou página, lembre-se de pensar se precisa de 
loading, de mensagem de erro ou de mensagem de empty state; 
 
● Não utilizar var. Utilize const de preferência. Sò utilize let se você precisar alterar a 
variável em questão. Leia mais aqui; 
 
● Quando for criar um componente ou uma página, separe bem as responsabilidades. 
Veja se pode ser quebrado em outros componentes. Leia mais aqui; 
 
● Se você precisar criar um enum, cheque se vai ser utilizado em outros projetos. Se 
sim, adicione no pd-api-services; 
 
● Dentro dos projetos frontend dividimos os contextos do projeto em módulos. Analise 
se o que você está criando é um módulo novo ou se faz parte de um módulo já 
existente; 
 
 
● Cada módulo pode possuir subpastas para melhor organização. Essas pastas são: 
components, locales, store; 
○ Components são componentes daquele módulo e que não é o componente 
pai (principal) daquele módulo; 
 
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://flexbox.malven.co/
https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75
https://en.wikipedia.org/wiki/Single_responsibility_principle
https://github.com/PasseiDireto/pd-api-services/tree/master/constants
○ Store é a pasta que a gente coloca a lógica do vuex. Leia mais aqui. 
 
 
○ Locales é onde ficam nossas strings de tradução; 
■ Lembre-se de adicionar um prefixo (nome do módulo) para as 
traduções já que por debaixo dos panos vira um grande arquivo de 
traduções. Se você não fizer isso, vai virar global e pode dar conflito 
com outros que fizerem o mesmo; 
Errado: 
export default { 
 title: 'Passei Direto' 
} 
 
Certo: 
export default { 
 header: { 
 title: 'Passei Direto' 
 } 
} 
 
 ps: no caso do pd-vue-components, o prefixo é “common” 
 
■ Não utilize traduções de outro módulo; 
 
 
● Se você quer adicionar uma informação global no vuex, adicione no namespace 
global que se encontra no pd-vue-components. Se forem várias informações, 
adicione outro namespace para dar contexto aquela informação; 
 
● Quando você tiver classes que queira compartilhar entre componentes do mesmo 
módulo, crie um arquivo chamado _Shared.scss no módulo e importe nos 
componentes em questão. No arquivo de scss do componente, deixe só o scss 
referente a aquele componente em questão. Exemplo: 
https://vuex.vuejs.org/
https://github.com/PasseiDireto/pd-vue-components/tree/master/store
 
 
 
● Quando você fizer alguma coisa com rota, lembre de testar se o histórico do 
navegador está salvo (back do navegador); 
● Quando você fizer algo que é clicável (um card que abre disciplina por exemplo, ou 
uma tab que abre outro plano), lembre que ter que ser possível clicar com o botão 
direito e do meio do mouse; 
● Não utilizar import com destructuring. Sempre importar o objeto inteiro, isso facilita 
saber de onde está vindo cada parte do código. 
Exceção com vuex e session. 
 
 Errado: 
 import { method } from './service'; 
 
 Certo: 
 import service from './service'; 
;