Estrutura de diretórios e arquivos

Manter o código limpo é fundamental para a manutenabilidade e escalabilidade de uma aplicação. Da mesma forma, manter a árvore de diretórios organizada permite aos desenvolvedores a fácil localização do código a ser trabalhado, bem como a criação de novos módulos e componentes.

Front-end

John Papa sugere uma pergunta simples neste artigo sobre organização de diretórios e nomenclatura de arquivos em projetos AngularJS:

Com que rapidez você consegue abrir e trabalhar em todos os arquivos de uma determinada funcionalidade?

Tentando responder a essa pergunta e tomando por base essas guide lines, aprensentamos algumas recomendações para a organização do Front-end do STF Digital.

Aplicação

A estrutura básica de pastas e arquivos da aplicação é herdada do Fuse.

Pastas

Seguindo o conceito LIFT, as pastas devem ser criadas no diretório app/main e nomeadas de acordo com a funcionalidade ou módulo a ser implementado.

app/
  main/
    modulo/

Os nomes compostos serão separados por hífen.

app/
  main/
    nome-do-modulo/

É possível a criação de submódulos e/ou pastas auxiliares.

app/
  main/
    nome-do-modulo/
      assets/
        img/
        video/
      submodulo/

Se o submódulo precisar de novos submódulos e/ou pastas auxiliares, é uma boa hora de mudá-lo para a pasta app/main.

A pasta assets deve conter as imagens, vídeos e outros arquivos estáticos exclusivos do módulo e seus submódulos. Caso o arquivo possa ser utilizado por mais de um módulo, ele deve estar na pasta app/main/assets

Arquivos

Com base nessas recomendações, os arquivos do frontend do STF Digital deverão ser nomeados seguindo o padrão nome-do-modulo.tipo.ts.

Typescript

app/
  main/
    nome-do-modulo/
      nome-do-modulo.module.ts
      nome-do-modulo.controller.ts
      nome-do-modulo.directive.ts
      nome-do-modulo.service.ts
      nome-do-modulo.filter.ts
      nome-do-modulo.config.ts
      nome-do-modulo.routs.ts
      nome-do-modulo.interceptor.ts

HTML

Arquivos HTML não precisam da parte .tipo em seu nome.

app/
  main/
    nome-do-modulo/
      nome-do-modulo.html

SCSS

Arquivos SCSS não precisam da parte .tipo em seu nome.

app/
  main/
    nome-do-modulo/
      nome-do-modulo.scss

Módulo de exemplo

app/
  main/
    autenticacao/
        autenticado.module.ts
      login/
        login.html
        login.scss
        login.controller.ts
      nao-autenticado/
        nao-autenticado.html
        nao-autenticado.scss
        nao-autenticado.module.ts
      autenticacao.module.ts
      autenticacao.service.ts
      autenticacao.interceptor.ts