Pular para o conteúdo
Todos os projetos

Portais internos · Mercado financeiro

Portais de investimento offshore

Portais internos das áreas de investimento offshore do BTG Pactual, usados 24/7 por centenas de usuários internos, com zero travamentos nas aplicações de contabilidade que recebiam mais de 9.000 registros por requisição

Cliente
BTG Pactual · via Exadel Financial Services
Cargo
Engenheiro de Software (Especialista Front-end)
Tecnologias
  • Angular 20
  • Signals
  • TypeScript
  • RxJS
  • NgRx
  • Tailwind CSS
  • Jest
  • Jasmine
  • REST APIs
  • GenAI
  • MCP
Projeto confidencialAs telas estão sob acordo de confidencialidade (NDA). O que está descrito aqui é o que pode ser compartilhado.Investimentos offshoreContabilidadeJava e Calypso

Contexto

Portais internos das áreas de investimento offshore do BTG Pactual, em projetos conduzidos via Exadel Financial Services. Cada funcionalidade é usada diariamente, 24/7, por centenas de usuários internos e processa dezenas de milhares de registros, com dados vindos de serviços Java e da plataforma Calypso.

Desafio

Conduzir 5 projetos simultâneos por trimestre, cada um da especificação à observabilidade em produção, enquanto aplicações legadas de contabilidade travavam em produção ao receber mais de 9.000 registros em uma única requisição e aplicações em Angular 14 e 16 precisavam chegar ao Angular 20.

Resultados

travamentos em produção após o chunking das requisições com 9.000+ registros
0
mais rápidas as aplicações de contabilidade após o chunking
~70%
menos tempo para criar aplicações front-end com IA e MCPs internos
75–80%
mais rápido no build após a migração para o Angular 20
30–40%

Principais entregas

  1. 01Liderei 5 projetos simultâneos de front-end por trimestre e entreguei de 12 a 15 projetos novos até agora, além de migrações de versão do Angular e correções de performance, conduzindo cada um de ponta a ponta: especificação, prototipação, integração, implantação e observabilidade em produção.
  2. 02Desenvolvi funcionalidades em Angular (standalone components, TypeScript, RxJS e NgRx) usadas 24/7 por centenas de usuários internos e ajudei a implementar a ferramenta interna de estilização padronizada do banco, baseada em Tailwind CSS.
  3. 03Zerei os travamentos em produção e deixei cerca de 70% mais rápidas as aplicações de contabilidade que recebiam mais de 9.000 registros em uma única requisição, implementando o processamento das chamadas em lotes (chunking).
  4. 04Migrei aplicações legadas do Angular 14 e 16 para o Angular 20, com build 30% a 40% mais rápido, bundle 20% a 30% menor e carregamento 20% a 30% melhor, adotando Signals, control flow nativo, @defer e o builder esbuild.
  5. 05Integrei o front-end Angular a serviços Java e à plataforma Calypso.
  6. 06Reduzi em 75% a 80% o tempo de criação de aplicações front-end com IA generativa, MCPs (Model Context Protocol) das bibliotecas internas e automação de testes das features (Jest e Jasmine), mantendo os padrões arquiteturais do projeto.

Funcionalidades e as dores que resolvem

Cada funcionalidade nasceu de um problema real da operação.

  1. 01

    Processamento em lotes (chunking)

    Dor
    Aplicações de contabilidade recebiam mais de 9.000 registros em uma única requisição e travavam em produção.
    Solução
    O processamento das chamadas passou a ser feito em lotes (chunks): em vez de receber e processar todo o volume de uma vez, a aplicação trabalha lote a lote, sem bloquear a interface.

    Impacto: 0 travamentos em produção e ~70% mais rápido

  2. 02

    Migração para o Angular 20

    Dor
    Aplicações legadas em Angular 14 e 16 estavam defasadas em várias versões principais em relação ao Angular 20.
    Solução
    As aplicações foram migradas para o Angular 20 com Signals (signal, computed, effect, linkedSignal, toSignal), control flow nativo (@if, @for), carregamento sob demanda com @defer e o builder esbuild.

    Impacto: Build 30–40% mais rápido, bundle 20–30% menor e carregamento 20–30% melhor

  3. 03

    Integração com Java e Calypso

    Dor
    Os dados das telas vêm de serviços Java e da plataforma Calypso, e o front-end precisa integrá-los.
    Solução
    O front-end Angular foi integrado aos serviços Java e ao Calypso nas telas usadas pelas áreas offshore.

  4. 04

    Criação de aplicações com IA e MCPs

    Dor
    Com 5 projetos simultâneos por trimestre, cada nova aplicação front-end precisava nascer nos padrões arquiteturais em pouco tempo.
    Solução
    IA generativa conectada a MCPs (Model Context Protocol) das bibliotecas internas passou a gerar aplicações front-end já nos padrões arquiteturais do projeto.

    Impacto: 75–80% menos tempo de criação

  5. 05

    Testes automatizados das features

    Dor
    Funcionalidades usadas 24/7 por centenas de usuários internos precisam chegar à produção testadas.
    Solução
    Os testes das features foram automatizados com Jest e Jasmine como parte do fluxo de criação com IA.

  6. 06

    Da especificação à produção com observabilidade

    Dor
    5 projetos simultâneos por trimestre exigem um responsável técnico do começo ao fim, não só na fase de código.
    Solução
    Cada projeto foi conduzido de ponta a ponta: especificação, prototipação, integração, implantação e observabilidade em produção, para acompanhar o comportamento real depois da entrega.

    Impacto: 12 a 15 projetos novos entregues até agora

  7. 07

    Operação 24/7 com alto volume

    Dor
    Centenas de usuários internos usam os portais todos os dias, 24/7, e cada funcionalidade precisa processar dezenas de milhares de registros sem travar.
    Solução
    As funcionalidades foram desenvolvidas em Angular (standalone components, TypeScript, RxJS e NgRx) para uso diário, 24/7, por centenas de usuários internos, com dezenas de milhares de registros processados.

    Impacto: Uso 24/7 por centenas de usuários internos