Estrutura de diretórios e arquivos

Diretórios

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