Frontend

Esta página centraliza informações sobre o repositório Frontend do projeto Sem Barreiras.

Sumário

• Organização do repositório
• Padrões de código
  • Nomenclatura de funções
  • Nomenclatura de variáveis
  • Nomenclatura de componentes
  • Nomenclatura de telas
  • Documentação de componentes e telas

Organização do repositório

O projeto React Native do repositório de Frontend está organizado seguindo um padrão de componentização. Essa abordagem envolve a divisão da interface do usuário em componentes modulares e reutilizáveis, que são então compostos para formar as diversas telas ou páginas do aplicativo. Dessa forma, tendo um componente podemos passar parametros com o que quisermos ter e trabalhar na tela. As telas tem um comportamento semelhante, dado que elas são chamadas a partir de um arquivo que irá realizar o controle de roteamento do usuário passando as informações necessárias para que se possa executar as funcionalidades da aplicação.

Diante disso, os pacotes do projeto estão divididos da forma abaixo:

• 📁 src/
  • 📁 apis/: Chamadas de api aos endpoints do Backend.
    • 📁 api.js: Arquivo com o cliente do axios que reliza as chamadas.
  • 📁 assets/: Recursos como imagens e ícones.
    • 📁 dummy.png: Imagem a ser utilizada em algum lugar.
  • 📁 components/: Componentes reutilizáveis.
    • 📁 Component.js: Implementação de código de um componente.
  • 📁 constants/: Variáveis constantes.
    • 📁 colors: Cores constantes da aplicação.
    • 📁 connection: Constantes para conexão com o Backend.
  • 📁 routes/: Roteamento das telas.
    • 📁 router.js: Implementação de código das rotas.
  • 📁 screens/: Telas da aplicação.
    • 📁 Screen.js: Implementação de código de uma tela.
• App.js: Chama o roteamento de telas ao iniciar o app.

Padrões de código

Com intuito de manter legibilidade e consistência no código a seguir estão algumas padronizações definidas.

Nomenclatura de funções e variáveis

Funções do projeto devem ser nomeadas em inglês e seguir o padrão camelCase, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Por exemplo:

• variableExample ✔
• Variable_Example ❌
• Variableexample ❌
• VariableExample ❌

Nomenclatura de componentes

Componentes do projeto devem ser nomeadas em inglês e seguir o padrão PascalCase, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno do componente deve seguir o padrão {O que é X componente?}Component.js. Por exemplo:

• InputTextComponent.js ✔
• Input_Text_Component.js ❌
• Inputtextcomponent.js ❌
• inputTextComponent.js ❌

Nomenclatura de telas

Telas do projeto devem ser nomeadas em inglês e seguir o padrão PascalCase, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno da tela deve seguir o padrão {O que é X tela?}Screen.js. Por exemplo:

• CreateAccountScreen.js ✔
• Create_Account_Screen ❌
• Createaccountscreen ❌
• createAccountScreen ❌

Documentação de componentes e telas

Para que outras pessoas que forem olhar como utilizar seu componente ou tela é importante que elas entendam o que cada parâmetro quer dizer. Com isso, vem a importância da documentação de parâmetros de componentes e telas a fim de proporcionar uma compreensão rápida e evitar erros. Embora o nome da variável muitas vezes deixe explícito o que ela faz, outras vezes pode ser que não esteja tão claro assim. Dessa forma, isso leva a um custo de a pessoa ter de analisar o código para entender o que X valor significa. Assim, para cada componente e tela, visto que componentes serão chamados múltiplas vezes e telas serão chamadas no roteamento, é importante seguir o seguinte padrão de documentação no começo do arquivo .js de cada um:

/**
 * {Breve descrição do que seu componente/tela faz/é}
 *
 * @param {nome_parametro_1}       {Descrição do que aquele parâmetro faz/setta}
 * @example          <ComponentExample
 *                     text={"teste"}
 *                   /> <------------- Aqui um exemplo de uso do componente/tela
 */

Abaixo é demonstrado um exemplo com o ComponentExample:

/**
 * Componente de modelo que cria um texto
 *
 * @param text       Texto principal do componente
 * @example          <ComponentExample
 *                     text={"teste"}
 *                   />
 */