9. Arquitetura To Be

Proposta de arquitetura

Front-end

Visando melhorar a manutenção e escalabilidade da arquitetura presente, baseado na arquitetura As-Is analisada, identificamos alguns pontos-chave a serem melhorados, em especial na representação da estrutura de diretórios e do estabelecimento de um padrão de design (composite).

1. Resumo da proposta

O projeto atual conta com códigos duplicados nos próprios componentes e em componentes diferentes, além de código descontinuados e também a ausência de uma convenção de nomenclatura. Utilizando o padrão de design composite, temos como objetivo uma melhor reformulação e compreensão da estrutura de cada página-componente. Códigos duplicados entre páginas se tornarão componentes compartilhados, por exemplo. Dessa forma conseguiremos deixar a estrutura do repositório mais limpa e escalável.

Veja abaixo o diagrama de pacotes da arquitetura proposta:

Visão em /src antes das mudanças:

my-app/
|
|- public/ …
|
|- src/
|    |- App.css
|    |- App.js
|    |- Contato.js
|    |- Home.js
|    |- Login.js
|    |- Sala.js
|    |- Teste.js
|    |- index.cxx
|    |- index.js
|    |- logo.svg
|    |- reportWebVitals.js
|    |- setupTest.js
|    |- style.css
|
| …

Visão em /src depois das mudanças:

frontend/
|
|- public/ …
|
|- src/
|      |- _test_/
|          |- components/
|               |- formTeste/
|    
|          |- pages/
|               |- teste/
|                     |- Teste.js
|    
|     |- components/
|         |- header/
|         	|- Header.js
|    
|         |- footer/
|         	|- Footer.js
|    
|         |- list/
|       	|- List.js
|    
|         |- form/
|               |- formLogin/
|                     |- FormLogin.js
|               |- formContato/
|                     |- FormContato.js
|    
|    |- pages/
|        |- Home.js
|        |- Contato.js
|        |- Login.js
|        |- Teste.js
|        |- Sala.js
|    
|    |- App.js
|    |- App.css
|    |- index.js
|    |- index.css
|    |- style.css
|
| …