Fala, comunidade dev! 👋
Chegamos ao nono e último artigo da nossa série documentando a evolução estrutural de um YMS (Yard Management System) gigante, saindo do Angular 16 direto para o 21. Já refatoramos o núcleo, as rotas, os Signals, a estrutura de pastas e a internacionalização.
Mas, para o usuário final, a arquitetura invisível do código não importa. O que importa é a tela. E hoje, os usuários de sistemas corporativos B2B (Backoffice, ERPs, YMS) não aceitam mais interfaces cinzas com cara de Windows 95. Eles exigem a mesma fluidez, UX e beleza dos aplicativos que usam no celular.
1. A Evolução do PrimeNG e o Padrão Ouro dos Grids
Nossa interface sempre foi alicerçada no PrimeNG. O pulo de 5 versões do Angular exigiu adequações estruturais pesadas na forma como lidávamos com os estilos. A biblioteca evoluiu muito para adotar um sistema de design baseado em tokens (CSS Variables) e uma integração profunda com Utility Classes (o PrimeFlex).
Sistemas logísticos respiram dados. Tabelas (<p-table>) não são apenas para visualização; elas são a principal ferramenta de trabalho do operador.
Implementamos recursos modernos que mudaram completamente a percepção de performance e usabilidade do usuário:
- Filtros e Ordenação no lado do Servidor: Absolutamente essencial quando você tem milhões de registros na base de dados e não pode travar o navegador tentando filtrar isso no Front-end.
- Scroll Virtual (Lazy Loading UI): Substituindo a paginação tradicional por um scroll infinito suave. O Angular destrói as linhas HTML que sobem pela tela e recria as que aparecem embaixo. Isso consome recursos de renderização da CPU apenas para as linhas que estão visíveis.
- Salvamento de Estado (Stateful Grids): O usuário reordena as colunas, ajusta as larguras, sai da tela e, ao voltar no dia seguinte, a tabela "lembra" exatamente da preferência dele usando o Local Storage.
2. A Inevitável Chegada do Dark Mode
O Dark Mode (Modo Escuro) não é mais um "frufru" visual. Para operadores logísticos que passam 10 horas por dia olhando para painéis de controle e gráficos de pátio em salas escuras de monitoramento, é uma questão de saúde visual e ergonomia.
A Mágica dos Tokens: Com a arquitetura de tokens CSS das versões modernas do Angular e do PrimeNG, a alternância de temas parou de exigir a recarga inteira da página ou a inserção manual de dezenas de classes no HTML com JavaScript. Agora, mudar para o tema escuro é apenas uma substituição de variáveis nativas CSS (como
--surface-aou--text-color) na raiz do documento (:root). A transição é instantânea e extremamente leve para o navegador.
Conclusão: O Veredito da Jornada
Pular 5 versões de um ecossistema complexo exige sangue frio, testes extensivos e muita leitura de changelogs. Mas o resultado final faz cada erro de compilação no terminal valer a pena:
- Um código absurdamente mais limpo (Adeus,
app.moduleengOnDestroy!). - Uma compilação instantânea no ambiente de desenvolvimento (graças ao novo bundler com Vite e esbuild).
- Uma aplicação rápida como um raio no navegador do usuário (com Signals e Zoneless).
Manter sistemas atualizados não é apenas perseguir a novidade tecnológica pelo hype. É garantir agilidade e segurança para continuar entregando valor ao negócio nos próximos 5 anos, sem que o código vire um legado intocável que ninguém na equipe tem coragem de mexer.
Espero que essa série de 9 artigos tenha ajudado a desmistificar alguns conceitos modernos do Angular e inspirado você a encarar a modernização das suas bases de código por aí.
Um grande abraço e até a próxima refatoração! 🚀
Quais foram os maiores desafios de UI/UX que vocês já enfrentaram em sistemas corporativos internos? Deixem nos comentários! 👇
Top comments (0)