1. Orientation de votre parcours de modernisation
Cet atelier de programmation complet est le complément pratique de l'article d'analyse approfondie de l'architecture Comment automatiser la modernisation avec Antigravity et l'orchestration multi-agents. Bien que nous utilisions un échange de framework Node.js classique comme véhicule de démonstration concret, les principaux modèles de conception, structures de répertoire et processus d'orchestration agentique que vous maîtriserez ici sont totalement indépendants du langage et universellement applicables à tout projet de modernisation d'anciens systèmes à grande échelle.
Contrairement aux assistants de codage standards qui se contentent d'autocompléter des lignes dans un seul fichier, vous apprendrez à exploiter les capacités de Google Antigravity axées sur les agents pour orchestrer des équipes autonomes de sous-agents d'IA spécialisés. Ces agents peuvent effectuer de l'ingénierie inverse sur des bases de code existantes, écrire des suites de tests rigoureuses, échafauder des architectures modernes et corriger eux-mêmes leurs propres erreurs de compilation à l'aide de boucles de réflexion, tout en vous permettant de conserver un contrôle absolu en tant qu'architecte de haut niveau.
Points abordés
- Cartographier le workflow : comment classer et séparer correctement les tâches de configuration déterministes des défis de refactoring heuristiques complexes.
- Architecture des compétences : comment structurer un pack de compétences d'agent extensible à l'aide de métadonnées de routage YAML et de la divulgation progressive.
- Orchestrer des modèles de conception : comment effectuer un refactoring à grande échelle en enchaînant les modèles de conception Router, Plan-and-Execute et Reflexion.
- Contrats d'entrée/sortie rigides : comment appliquer des limites claires d'entrée/de compétence/de sortie dans les pipelines d'ingénierie inverse et d'échafaudage cible en plusieurs phases.
- Vérification de la parité : découvrez comment utiliser le sous-agent de navigateur d'Antigravity pour effectuer des tests de parité côte à côte dans le navigateur Web Chrome.
Ce que vous allez faire
Vous orchestrerez un pipeline de refactoring Greenfield entièrement automatisé qui prend le monolithique CRUD Express et Mongoose emblématique et obsolète (la "démonstration madhums") et le reconstruira de manière autonome à partir de zéro dans une application Next.js App Router strictement typée, soutenue par MongoDB, une validation Zod stricte et des composants ShadCN UI accessibles.
Prérequis
- L'IDE Google Antigravity installé en local (disponible sur antigravity.google).
- Node.js (v18+) installé localement.
- Le navigateur Chrome pour la validation automatisée de l'UI.
- Clone du monorepo de démonstration modernizing-expressjs Open Source.
2. Configurer l'environnement de modernisation
Avant de laisser des agents autonomes s'attaquer à une ancienne codebase, nous devons établir un environnement monorepo propre et très stable. En fournissant une base de référence propre à un assistant IA, vous vous assurez qu'il se concentre entièrement sur la génération de code moderne de haute qualité, plutôt que de gaspiller des jetons pour lutter contre des failles de packages vieilles de dix ans ou des incompatibilités de compilateur.
Mappage de l'ancienne architecture Express par rapport à l'architecture Next.js moderne
Composant | Ancienne pile | Remplacement moderne | Explications |
Architecture | Monolithe Express | Routeur d'application Next.js | Découplage de la logique dans les composants serveur pour optimiser le rendu et les performances des composants serveur React (RSC). |
Logique des données | Mongoose (ODM) | MongoDB + Zod | Remplacement des hooks ORM implicites par des schémas Zod explicites et avec sûreté de typage, et performances brutes du pilote. |
Langue | CommonJS / JavaScript | TypeScript (ESM) | Application de la sécurité au moment de la compilation et passage aux normes de module modernes. |
Frontend | Pug/EJS (vue du serveur) | ShadCN UI + Tailwind | Passer de modèles rigides à un système de conception composable, accessible et axé sur l'utilité. |
Auth | Passport.js | NextAuth | Modernisation de la gestion des sessions avec prise en charge intégrée d'Edge et des fournisseurs contemporains. |
Sécurité | Middleware manuel | Zod (validation stricte) | Implémentation d'une "source unique de vérité" pour la validation des données dans l'ensemble de la pile. |
Initialiser le hub de modernisation
Notre première action déterministe consiste à cloner la structure monorepo isolée. Cela sépare l'ancien code en lecture seule de notre nouveau dépôt cible complètement nouveau, ce qui garantit l'absence de mutations accidentelles dans l'application d'origine.
Ouvrez votre terminal Antigravity et exécutez les commandes de configuration suivantes :
git clone https://github.com/GoogleCloudPlatform/devrel-demos.git cd devrel-demos/other/modernizing-expressjs
Une fois le dépôt cloné, ouvrez le dossier modernizing-expressjs directement dans l'explorateur Antigravity IDE. La mise en page isolée suivante s'affiche :
/modernizing-expressjs/ ├── .agents/ # Skills metadata and checklists │ └── skills/ ├── docs/ # Target directory for reverse-engineered markdown artifacts ├── legacy-app/ # Read-only root of the legacy Express monolith ├── modern-app/ # Greenfield target repository for the Next.js rewrite ├── GEMINI.md # Project-wide agent constitution └── README.md # Companion documentation
Regardez cette courte vidéo pour découvrir comment préparer et isoler votre environnement monorepo de manière déterministe :
3. Concevoir des packs et des modèles de compétences d'agents d'IA
La création d'une compétence d'agent robuste est fondamentalement différente de la rédaction d'une requête de chat standard. Lorsque vous créez un pack de compétences, vous concevez un élément logiciel modulaire qu'un LLM sous-jacent exécutera de manière autonome. Pour éviter que l'agent n'hallucine ou ne subisse une "taxe de fenêtre de contexte", nous introduisons le pack de compétences d'orchestration Greenfield Open Source en tant que modèle de création extensible, basé sur deux principes non négociables : la concision et la divulgation progressive.
Dévoilement progressif à l'aide du routage des métadonnées YAML
Plutôt que de regrouper toutes les règles cibles dans une seule invite système monolithique, nous distribuons les instructions dans les répertoires. Chaque répertoire de compétence contient un point d'entrée SKILL.md enveloppé dans un bloc de métadonnées YAML.
Ouvrez .agents/skills/orchestrating-greenfield-migration/SKILL.md et inspectez les métadonnées du routeur :
---
name: orchestrating-greenfield-migration
description: >
Manages the end-to-end modernization of legacy Express
monoliths into Next.js architectures. Orchestrates subagents
for auditing, scaffolding, and verification. Use when starting
or managing a greenfield rewrite project.
---
Codage en dur du modèle "planifier et exécuter"
Pour éviter qu'un agent autonome ne dérive, ne se laisse distraire par un middleware ancien intéressant ou ne tente des échanges de base de données non autorisés, nous remplaçons la planification ouverte standard en codant en dur le modèle Planifier et exécuter directement dans les instructions.
Inspectez la checklist Markdown littérale intégrée dans l'orchestrateur principal :
### Phase 1: The AI audit (reverse engineering)
Dispatch subagents to produce specifications while identifying project-specific test scenarios.
* [ ] Init `docs/verification/Verification_Plan.md` to create baseline template.
* [ ] Run `auditing-data-models` -> Append Data Integrity Stress-Tests.
* [ ] Run `auditing-api-contracts` -> Append API Parity & Edge Case Probes.
* [ ] Run `auditing-business-logic` -> Append Logic & Authorization Stress-Tests.
* [ ] Run `auditing-ui-archeology` -> Append Interaction & Layout Targets.
En formatant le workflow sous forme de checklist explicite avec des références de compétences intégrées, l'agent copie cette feuille de route exacte dans son plan de tâches, le verrouillant en mode "exécution uniquement". Il coche systématiquement les cases et appelle des sous-agents hautement spécialisés exactement quand il en a besoin.
4. Phase 1 : Rétro-ingénierie de l'ancien monolithe (audit)
Nous sommes prêts à déclencher notre séquence d'orchestration principale ! Notre première phase majeure consiste à extraire les règles métier, les schémas de données et les charges utiles d'API de l'ancien monolithe, en les stockant sous forme d'artefacts Markdown propres, tout en laissant derrière nous une décennie de dette technique impérative.
Déclencher la séquence de refactoring autonome
Dans le panneau de chat de l'Agent Manager Antigravity, saisissez la commande à barre oblique personnalisée suivante, puis appuyez sur Entrée :
/orchestrating-greenfield-migration
Observez maintenant la console de votre terminal. Vous verrez l'agent principal lire son prompt système, faire correspondre votre demande aux métadonnées de l'orchestrateur, générer la checklist en cinq phases et commencer immédiatement à distribuer des sous-agents "Auditor" spécialisés en parallèle.
Contrat pédagogique d'entrée/de compétence/de sortie
Au cours de la phase 1, l'agent exécute un pipeline de rétro-ingénierie strict lié au contrat d'instructions suivant :
Entrées consommées : fichiers de code source anciens en lecture seule situés dans legacy-app/.
Compétences invoquées :
Compétence | Description |
| Trace les anciennes routes pour documenter les enveloppes de réponse JSON exactes. |
| Décompose les schémas Mongoose pour extraire les relations, les champs obligatoires et les valeurs par défaut. |
| Documentation des effets secondaires implicites, des flux d'authentification Passport et des règles de middleware. |
| Analyse les anciens modèles Pug pour mapper l'intention de l'UI de haut niveau (barres de navigation, formulaires). |
Artefacts produits : spécifications Markdown très structurées générées directement dans votre dossier docs/
Artefact | Description |
| Ce document décrit en détail la surface de l'API rétro-ingéniée de l'ancienne application Express. Utilisez ce catalogue pour assurer une parité stricte lors de la reconstruction des routes dans l'application Next.js modernisée. |
| Ce document enregistre les comportements, les configurations et les règles strictes validés de l'ancienne application Express concernant l'authentification (AuthN), l'autorisation (AuthZ), les middlewares globaux, la gestion des sessions et les effets secondaires. |
| Ce document fournit une analyse complète des anciens schémas Mongoose de |
| Ce document fournit une analyse détaillée de l'ancienne interface utilisateur basée sur Pug dans |
Regardez cette capture de terminal en direct qui montre l'audit d'ingénierie inverse autonome en action :
5. Phases 2 et 3 : harnais TDD et échafaudage de backend greenfield
Une fois l'ancienne application entièrement auditée et documentée, l'orchestrateur principal passe à l'échafaudage du backend cible moderne. Cette phase présente le modèle de conception agentique le plus puissant de notre boîte à outils : la réflexion en boucle fermée (autoréflexion) basée sur le développement piloté par les tests (TDD, Test-Driven Development).
Générer du code autoréparateur à l'aide de boucles de réflexion
Écrire du code moderne est simple. S'assurer qu'il se compile parfaitement et qu'il respecte des contraintes de validation strictes nécessite une évaluation en boucle fermée. L'orchestrateur gère cela de manière autonome en redirigeant la sortie du test directement dans la fenêtre de contexte du sous-agent :
- Phase 2 (configuration TDD) : l'orchestrateur appelle le sous-agent
generating-api-tests, qui litdocs/API_Contracts.mdet écrit des suites de tests d'intégration Vitest exhaustives affirmant les codes d'état HTTP et les charges utiles JSON exacts requis. Comme prévu dans le TDD, ces tests échouent initialement. - Phase 3 (échafaudage du backend) : les sous-agents d'échafaudage commencent à écrire des gestionnaires de routes Next.js modernes et des schémas de validation Zod stricts.
- Boucle d'autocorrection : lorsque le harnais Vitest déterministe évalue le nouveau code et renvoie un échec (par exemple, une erreur de validation
422attendue a renvoyé un500), l'agent ne plante pas. Il réfléchit à la sortie d'erreur objective, rouvre le gestionnaire de route cible, corrige la structure de charge utile du schéma Zod et exécute à nouveau les tests. Il itère de manière autonome jusqu'à obtenir un code de sortie0.
Contrat pédagogique d'entrée/de compétence/de sortie
Entrées consommées : artefacts de spécification issus de la rétro-ingénierie (docs/API_Contracts.md, docs/Data_Models.md).
Compétences invoquées :
Compétence | Description |
| Génère des suites d'intégration Vitest défaillantes. |
| Initialise la mise en page de base du routeur d'application Next.js. |
| Configure l'environnement local du lanceur de tests Vitest. |
| Traduit les anciens modèles Mongoose en schémas MongoDB et Zod. |
| Recrée les routes Express en gestionnaires de routes Next.js et en gardes de routes modulaires. |
Résultats produits : suites Vitest initiales en échec, schémas Zod entièrement typés, gestionnaires de routes Next.js fonctionnels et exécutions de suites de tests propres et réussies.
Observez la génération automatique du harnais de test TDD :
Observez l'exécution en temps réel de l'échafaudage de la boucle de réflexion auto-correctrice du backend cible :
6. Phase 4 : Créer la structure du frontend moderne (composants d'UI)
Une fois la couche de validation du backend entièrement renforcée et les tests d'intégration réussis, l'orchestrateur principal change de contexte pour moderniser la présentation visuelle. Les modèles impératifs rendus côté serveur sont abandonnés au profit d'un système de conception de composants hautement accessible et axé sur les utilitaires.
Traduire l'intention de l'UI en vues composables
Au lieu de tenter une traduction CSS ligne par ligne, le sous-agent de l'interface lit l'inventaire "UI Intent" extrait et mappe les éléments structurels directement à des équivalents modernes de haute fidélité.
Contrat pédagogique d'entrée/de compétence/de sortie
Entrées consommées : artefact d'inventaire frontend de rétro-ingénierie (docs/UI_Inventory.md).
Compétences invoquées :
Compétence | Description |
| Traduit un artefact |
Sorties produites : pages frontend Next.js prêtes pour la production, construites à l'aide de composants ShadCN UI très accessibles et de mises en page utilitaires Tailwind CSS.
Regardez la génération autonome de la couche de vue frontend modernisée :
7. Phase 5 : Validation et audit contradictoire
Notre pipeline de refactoring se termine par un contrôle qualité rigoureux. L'orchestrateur principal passe de l'analyse statique du code aux tests actifs de l'environnement d'exécution, en tentant activement de casser la nouvelle application cible pour prouver la parité fonctionnelle absolue avec la référence héritée.
Exécuter le test à deux onglets et l'action du navigateur
La phase de validation s'appuie sur les fonctionnalités visuelles et DOM intégrées d'Antigravity pour prouver le succès de manière autonome, sans que vous ayez à cliquer manuellement sur les formulaires :
- Parité côte à côte : le sous-agent
auditing-paritydemande au runner local de démarrer simultanément l'ancien monolith Express et l'application Next.js modernisée, en vérifiant que la présentation visuelle et le rendu des données sont identiques. - Sondage de sécurité contradictoire : l'orchestrateur appelle le sous-agent
adversarial-verification, qui lance le sous-agent Antigravity Browser. Cet agent spécialisé actionne directement le navigateur : il saisit des informations, envoie des formulaires et recherche des régressions de sécurité, des cookies de session endommagés ou des cas extrêmes non gérés. - Génération d'un journal d'audit : le sous-agent de navigateur enregistre automatiquement les captures vidéo WebP de ses actions de session et les joint directement au rapport de migration final en tant que "preuve de travail" vérifiable.
Contrat pédagogique d'entrée/de compétence/de sortie
Entrées consommées : applications anciennes et modernes exécutées côte à côte dans des environnements d'exécution locaux.
Compétences invoquées :
Compétence | Description |
| Exécute des vérifications côte à côte au moment de l'exécution. |
| Sonde les défauts logiques et les régressions fonctionnelles à l'aide de l'actionnement automatisé du navigateur. |
Résultats produits : un audit complet de la parité fonctionnelle associé à des vidéos enregistrées des sessions de navigateur confirmant la réussite complète.
Observez le sous-agent de navigateur automatisé qui vérifie activement l'application modernisée :
8. Préparation à la production post-migration et étapes suivantes
Félicitations ! Vous avez orchestré avec succès un pipeline de refactoring agentique autonome et très avancé pour moderniser un ancien monolithe à partir de zéro, en acquérant des compétences universelles et très transférables telles que la divulgation progressive, les checklists Plan-and-Execute et les boucles de réflexion auto-réparatrices.
Préparer le déploiement en production
Une fois votre application Next.js entièrement validée et auditée, vous pouvez passer à l'intégration en production. Envisagez d'appliquer les étapes suivantes, qui sont des normes du secteur :
- Routage incrémental : déployez un proxy inverse (par exemple, le modèle du figuier étrangleur) pour router le trafic de manière incrémentale de l'ancienne application Express vers la cible moderne.
- Préservation du SEO : mappez les anciens itinéraires Express vers les redirections permanentes Next.js (
_redirects.yaml) pour conserver l'autorité de domaine existante. - Streaming de données : passez de l'amorçage statique de la base de données au streaming de données de production en direct, validé de manière sécurisée au moment de l'exécution à l'aide de schémas Zod stricts.
- Observabilité : remplacez les utilitaires de journalisation impératifs par des frameworks OpenTelemetry structurés.
Approfondissez votre expertise en matière de modernisation
Pour explorer les bases de code sous-jacentes complètes, les instructions de compétences personnalisées et la justification théorique exhaustive qui sous-tend ce pipeline, veillez à lire l'article parent complet :
Rejoindre la communauté Agentic Builder
J'espère que ces modèles de refactoring universels et ces pipelines agentiques vous ont été utiles. Pour ne pas manquer les futurs packs de compétences open source, les contenus techniques détaillés et les conférences à venir, suivez-moi sur les réseaux professionnels :
- Suivez-moi sur LinkedIn : linkedin.com/in/jamesor
- Suivez-moi sur X (Twitter) : x.com/JamesOR
Donnez-nous votre avis
Qu'est-ce qui vous passionne le plus dans l'orchestration agentique ?
Merci d'avoir développé avec Google Antigravity !