Cases

Case · Engenharia de front-endLeitura: 5 min

Migração de larga escala:
Vue 2.7 → Vue 3

Como a ProHaus conduziu a modernização do front-end de uma plataforma B2C de alta escala: milhares de componentes migrados de Vue 2.7 para Vue 3, sem downtime, com Inteligência Artificial em todas as etapas e ganhos mensuráveis de performance.

  • Vue 3
  • TypeScript
  • Vite
  • Micro-frontends
  • IA
  • Large-Scale Migration
−40%no bundle size
3xmais rápido no build
95%de cobertura de testes
+30%de velocidade na entrega de features
O desafio

Um legado que limitava a escala do negócio.

O cliente opera uma plataforma B2C de grande porte, com milhares de sessões simultâneas nos horários de pico, construída sobre Vue 2.7 e Options API.

O bundle estava inchado, a experiência de desenvolvimento estava degradada e a ausência de TypeScript nativo gerava regressões constantes em produção. O time não conseguia lançar novas features sem acumular dívida técnica crítica.

A solução

Migração incremental, com compatibilidade e testes à frente.

Em vez de uma reescrita big-bang, a ProHaus desenhou uma migração incremental. Com o modo de compatibilidade do Vue, componentes Vue 2 e Vue 3 passaram a conviver no mesmo runtime — a plataforma seguiu no ar durante toda a transição.

Antes de tocar qualquer componente crítico, elevamos a cobertura de testes a uma baseline de 85%. E, para não criar um híbrido instável, estabelecemos um styleguide: todo componente novo nasce em Composition API com script setup, enquanto o legado é refatorado em sprints dedicadas.

AntesVue 2.7Options API · Node 16 · sem TypeScript nativo
DepoisVue 3Composition API · Node 22 · Vite · TypeScript
Vue 2 + Vue 3convivendo no mesmo runtime, via compat mode
85% de coberturaantes de tocar qualquer componente crítico
Composition API+ script setup em todo componente novo
A execução

Quatro fases, cada uma com seu portão de qualidade.

Cada fase só avançava depois de passar por gates de QA automatizados e testes de regressão visual com Chromatic.

  1. Fase 01

    Tooling

    Vite + TS + Compat

    Upgrade do Node 16 para o 22, que abriu caminho para o Vite e modernizou toda a cadeia de build. Setup do compat mode e do TypeScript.

  2. Fase 02

    Design System

    42 componentes migrados

    Migração dos componentes base e do design system — a fundação de todas as telas.

  3. Fase 03

    Páginas core

    0 downtime deploys

    Migração das páginas principais e dos fluxos de checkout, sem parar a operação.

  4. Fase 04

    Vue 3 puro

    Compat removido

    Remoção do modo de compatibilidade e otimização final.

Os resultados

Impacto técnico que virou resultado de negócio.

O tempo de build caiu drasticamente e a performance no cliente melhorou. Com a experiência de desenvolvimento de Vue 3 + TypeScript, o time do cliente passou a entregar novas features 30% mais rápido.

IA na execução

Inteligência Artificial em todas as etapas.

A migração foi conduzida com IA do começo ao fim. Ela não substituiu a engenharia: deu escala a ela — e cada decisão passou pelos portões de teste e pela revisão do time.

  1. 01AnáliseMapeou a estrutura do projeto, os componentes e os plugins, e apontou o que precisava mudar para o Vue 3.
  2. 02PlanejamentoDividiu a migração em etapas e em commits pequenos, fáceis de revisar e de reverter.
  3. 03TestesMontou a bateria de testes que protegeu cada etapa antes e depois de cada mudança.
  4. 04ExecuçãoAcompanhou a refatoração fase a fase, do tooling à remoção do compat mode.
O que levamos para cada projeto

Migração é gestão de mudança.

Migrar um framework em larga escala não é apenas um problema técnico — é um problema de gestão de mudança.

  • Compatibilidade durante a transição é o que evita paradas de produção.
  • Testes automatizados antes da migração pagam dividendos exponenciais.
  • Um padrão único desde o primeiro dia — aqui, Composition API — evita o híbrido instável entre dois paradigmas.

Sua plataforma também precisa escalar?

A ProHaus une IA, front-end e engenharia para modernizar sistemas sem parar a operação. É assim que transformamos tecnologia em valor.