Visão Geral (TL;DR)
O SIGMACOMTI passou por uma refatoração de sua estrutura monolítica para uma arquitetura com frontend e backend separados em repositórios distintos. A modernização reuniu Vue.js, Express e TypeScript, adicionou autenticação JWT e estabeleceu uma suíte de 17 testes automatizados com Vitest. O principal impacto foi criar uma base mais organizada para manutenção e evolução, com responsabilidades explícitas, verificações automatizadas e um ambiente de execução padronizado com Docker Compose.
O Desafio
O ponto de partida era um sistema legado cuja modernização exigia rever tanto a organização do código quanto a forma de desenvolver e executar a aplicação. A estrutura monolítica concentrava responsabilidades que precisavam ser separadas para permitir uma evolução mais controlada das interfaces, das regras da aplicação e do acesso aos dados.
O desafio era conduzir essa mudança preservando o comportamento necessário ao uso do sistema. Separar projetos, por si só, não resolveria o problema: a nova estrutura precisava definir como as partes se comunicariam, onde a autenticação seria tratada e como detectar regressões durante a refatoração.
A modernização, portanto, teve três prioridades: reduzir o acoplamento, tornar as interfaces entre as camadas mais claras e incorporar verificações de estabilidade ao desenvolvimento.
Stack Tecnológico
- Vue.js: construção das interfaces e organização da apresentação em componentes.
- Vite e Tailwind CSS: ferramentas de desenvolvimento do frontend e composição visual das telas.
- Node.js e Express: implementação do backend e dos endpoints consumidos pela interface.
- Prisma ORM e SQLite: acesso estruturado aos dados e persistência da aplicação.
- TypeScript: tipagem rigorosa para explicitar os dados e as interfaces do código.
- JWT: mecanismo de autenticação na comunicação com o backend.
- Vitest: suíte de 17 testes automatizados.
- Docker Compose: definição e execução coordenada dos serviços conteinerizados.
Arquitetura e Implementação
Separação de responsabilidades
A implementação adotou uma arquitetura cliente-servidor, com dois repositórios: um dedicado ao frontend em Vue.js e outro ao backend em Express. A interface concentra a apresentação e a interação com o usuário; o backend recebe as requisições, trata as operações da aplicação e acessa a persistência por meio do Prisma.
Essa organização estabelece fronteiras entre apresentação, processamento e dados. O desacoplamento permite trabalhar em cada parte com maior clareza, mantendo atenção ao contrato de comunicação entre elas.
Visão conceitual das responsabilidades da aplicação.
Autenticação e consistência do código
A autenticação JWT integra o fluxo entre cliente e servidor, permitindo ao backend verificar o token apresentado nas requisições autenticadas. A tipagem estrita com TypeScript complementa essa organização ao tornar explícitos os formatos de dados esperados pelo código e apontar incompatibilidades durante o desenvolvimento.
Verificação e execução reproduzível
A suíte de 17 testes com Vitest acrescenta uma camada de verificação automatizada aos comportamentos cobertos. Já o Docker Compose reúne a configuração dos serviços em uma definição versionável, oferecendo uma forma consistente de preparar e executar o ambiente. Isso aproxima a organização do código das necessidades de implantação e manutenção da aplicação.
Desafios Superados
Desacoplar sem perder consistência
O ponto técnico mais delicado da refatoração foi transferir responsabilidades antes concentradas no legado para aplicações separadas, preservando a coerência do fluxo completo. Uma mudança no formato de um dado ou em uma resposta do backend pode afetar diretamente a interface, mesmo quando cada projeto funciona isoladamente.
A solução combinou separação clara das responsabilidades, tipagem rigorosa e testes automatizados. O TypeScript ajuda a identificar incompatibilidades nas partes tipadas; o Vitest verifica os comportamentos cobertos pela suíte; e o Compose padroniza a execução dos serviços envolvidos.
Esses mecanismos atuam em problemas diferentes e se complementam. Os 17 testes representam uma base concreta de verificação, sem implicar cobertura integral do sistema ou garantia de ausência de regressões.
Resultados Alcançados
- Manutenção mais organizada: frontend e backend passaram a ter repositórios e responsabilidades próprios, facilitando localizar e delimitar alterações.
- Verificação automatizada: 17 testes com Vitest passaram a apoiar a identificação de regressões nos comportamentos cobertos.
- Maior consistência no desenvolvimento: a tipagem rigorosa tornou os formatos de dados mais explícitos e ampliou a detecção antecipada de incompatibilidades.
- Autenticação estruturada: JWT passou a integrar o fluxo de acesso ao backend.
- Ambiente padronizado: Docker Compose tornou a configuração dos serviços reproduzível e versionável.
Uma base automatizada de verificação com Vitest.
Fronteiras explícitas entre a interface e o backend.