1. Orientation de votre parcours de modernisation
Cet atelier de programmation complet est l'atelier pratique complémentaire directement issu de l'article d'analyse approfondie de l'architecture, Automatiser la modernisation avec Antigravity et l'orchestration multi-agent. Bien que nous utilisions un échange de framework Node.js classique comme véhicule de démonstration concret, les modèles de conception de base, les structures de répertoire et les processus d'orchestration agentique que vous allez maîtriser ici sont totalement indépendants du langage et universellement applicables à tout projet de modernisation hérité à grande échelle.
Contrairement aux assistants de codage standards qui ne font qu'autocompléter des lignes dans un seul fichier, vous apprendrez à exploiter les capacités d'abord agentiques de Google Antigravity pour orchestrer des équipes autonomes de sous-agents d'IA spécialisés. Ces agents peuvent effectuer une rétro-ingénierie indépendante des bases de code héritées, écrire des suites de tests rigoureuses, créer des architectures modernes et corriger eux-mêmes leurs propres erreurs de compilation à l'aide de boucles de réflexion, tout en conservant un contrôle absolu en tant qu'architecte de haut niveau.
Points abordés
- Mappage du workflow : comment classer et séparer correctement les tâches de configuration déterministes des défis complexes de refactorisation heuristique.
- Architecture des compétences : comment structurer un pack de compétences d'agent extensible à l'aide de la divulgation progressive et des métadonnées de routage YAML.
- Orchestration des modèles de conception : comment effectuer une refactorisation à 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 de rétro-ingénierie et de création de cibles en plusieurs phases.
- Vérification de la parité : comment exploiter le sous-agent de navigateur d'Antigravity pour effectuer des tests de parité côte à côte dans le navigateur Web Chrome.
Objectifs de l'atelier
Vous allez orchestrer un pipeline de refactorisation Greenfield entièrement automatisé qui prend le monolithe CRUD Express et Mongoose emblématique et obsolète (la "démonstration madhums") et le reconstruit de A à Z de manière autonome dans une application Next.js App Router strictement typée, basée sur MongoDB, une validation Zod stricte et des composants d'interface utilisateur ShadCN accessibles.
Ce dont vous avez besoin
- IDE Google Antigravity installé localement (disponible sur antigravity.google).
- Node.js (v18+) installé localement.
- Navigateur Chrome pour la vérification automatisée de l'interface utilisateur.
- Un clone du monorepo de démonstration open source modernizing-expressjs.
2. Configurer l'environnement de modernisation
Avant de laisser des agents autonomes s'attaquer à une base de code héritée vieillissante, nous devons établir un environnement monorepo propre et très stable. Fournir une base de référence propre à un assistant IA lui permet de se concentrer 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 package datant de dix ans ou des incompatibilités de compilateur.
Mappage de l'architecture Express héritée par rapport à l'architecture Next.js moderne
Composant | Pile héritée | Remplacement moderne | Rationale |
Architecture | Monolithe Express | Routeur d'application Next.js | Découplage de la logique en composants de serveur pour un rendu optimisé et des performances React Server Components (RSC). |
Logique des données | Mangouste (ODM) | MongoDB + Zod | Échange de hooks ORM implicites contre des schémas Zod explicites et de type sécurisé, et performances du pilote brut. |
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 serveur) | Interface utilisateur ShadCN + Tailwind | Passage de modèles rigides à un système de conception composable, accessible et axé sur l'utilité. |
Authentification | 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 le code hérité en lecture seule de notre nouveau dépôt cible Greenfield, 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 cloné, ouvrez le dossier modernizing-expressjs directement dans l'explorateur de l'IDE Antigravity. 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 brève vidéo de présentation qui explique 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'agent IA
La création d'une compétence d'agent robuste est fondamentalement différente de l'écriture d'un prompt de chat standard. Lorsque vous créez un pack de compétences, vous concevez un logiciel modulaire qu'un LLM sous-jacent exécutera de manière autonome. Pour éviter que l'agent ne hallucine ou ne subisse une "taxe de fenêtre de contexte", nous introduisons le pack de compétences d'orchestration Greenfield Open Source comme modèle de création extensible basé sur deux principes non négociables : la concision et la divulgation progressive.
Divulgation progressive à l'aide du routage des métadonnées YAML
Au lieu de déverser toutes les règles cibles dans un seul prompt système monolithique, nous distribuons les instructions dans les répertoires. Chaque répertoire de compétences contient un point d'entrée SKILL.md encapsulé dans un bloc de frontmatter de routage 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 de planification et d'exécution
Pour éviter qu'un agent autonome ne dérive, ne soit distrait par un middleware hérité intéressant ou ne tente d'échanger des bases de données non autorisées, nous remplaçons la planification ouverte standard en codant en dur le modèle Plan-and-Execute directement dans les instructions.
Inspectez la liste de contrôle 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 mettant en forme le workflow sous forme de liste de contrôle 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, ce qui le verrouille dans un mode "exécution uniquement" qui coche systématiquement les cases et appelle des sous-agents hautement spécialisés exactement au moment où ils sont nécessaires.
4. Phase 1 : rétro-ingénierie du monolithe hérité (audit)
Nous sommes prêts à déclencher notre séquence d'orchestration principale ! Notre première phase majeure extrait les règles métier, les schémas de données et les charges utiles d'API du monolithe hérité, en les stockant sous forme d'artefacts Markdown propres tout en laissant derrière lui une décennie de dette technique impérative.
Déclencher la séquence de refactorisation 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 requête aux métadonnées de l'orchestrateur, générer la liste de contrôle en cinq phases et commencer immédiatement à distribuer des sous-agents "Auditor" spécialisés en parallèle.
Contrat d'instruction 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é par le contrat d'instruction suivant :
Entrées consommées : fichiers de code source hérités en lecture seule situés dans legacy-app/.
Compétences appelées :
Compétences | Description |
| Trace les routes héritées pour documenter les enveloppes de réponse JSON exactes. |
| Déconstruit les schémas Mongoose pour extraire les relations, les champs obligatoires et les valeurs par défaut. |
| Documente les effets secondaires implicites, les flux d'authentification Passport et les règles de middleware. |
| Analyse les modèles Pug hérités pour mapper l'"intention d'interface utilisateur" de haut niveau (barres de navigation, formulaires). |
Artefacts produits : spécifications Markdown hautement structurées générées directement dans votre dossier docs/
Artefact | Description |
| Ce document détaille la surface de l'API de l'application Express héritée, obtenue par rétro-ingénierie. Utilisez ce catalogue pour garantir 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 vérifiés de l'application Express héritée 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 schémas Mongoose hérités de |
| Ce document fournit une analyse détaillée de l'interface utilisateur héritée basée sur Pug dans |
Regardez cette capture de terminal en direct qui montre l'audit de rétro-ingénierie autonome en action :
5. Phases 2 et 3 : harnais TDD et création de backend Greenfield
Une fois l'application héritée entièrement auditée et documentée, l'orchestrateur principal passe à la création du backend cible moderne. Cette phase introduit le modèle de conception agentique le plus puissant de notre boîte à outils : la réflexion en boucle fermée (auto-réflexion) basée sur le développement piloté par les tests (TDD) strict.
Pilotage du code d'autoréparation à l'aide de boucles de réflexion
L'écriture de 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 qui affirment les codes d'état HTTP et les charges utiles JSON exacts requis. Comme prévu dans le TDD, ces tests échouent initialement. - Phase 3 (création de backend) : les sous-agents de création 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 routes 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'à atteindre un code de sortie de0.
Contrat d'instruction d'entrée/de compétence/de sortie
Entrées consommées : artefacts de spécification obtenus par rétro-ingénierie (docs/API_Contracts.md, docs/Data_Models.md).
Compétences appelées :
Compétences | Description |
| Génère des suites d'intégration Vitest en échec. |
| Initialise la mise en page de base du routeur d'application Next.js. |
| Configure l'environnement d'exécution de test Vitest local. |
| Traduit les anciens modèles Mongoose en schémas MongoDB + Zod. |
| Reconstruit les routes Express en gestionnaires de routes Next.js et en gardes de routes modulaires. |
Sorties produites : 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 automatisée du harnais de test TDD :
Observez l'exécution en temps réel de la boucle de réflexion d'autocorrection qui crée le backend cible :
6. Phase 4 : création du frontend moderne (composants d'interface utilisateur)
Une fois la couche de validation du backend entièrement renforcée et les tests d'intégration réussis, l'orchestrateur principal passe au contexte de la modernisation de la présentation visuelle. Les modèles impératifs rendus par le serveur sont abandonnés au profit d'un système de conception de composants hautement accessible et axé sur l'utilité.
Traduction de l'intention d'interface utilisateur en vues composables
Au lieu de tenter une traduction CSS ligne par ligne, le sous-agent frontend lit l'inventaire "Intention d'interface utilisateur" extrait et mappe les éléments structurels directement à des équivalents modernes de haute fidélité.
Contrat d'instruction d'entrée/de compétence/de sortie
Entrées consommées : artefact d'inventaire frontend obtenu par rétro-ingénierie (docs/UI_Inventory.md).
Compétences appelées :
Compétences | Description |
| Traduit un artefact |
Sorties produites : pages frontend Next.js prêtes pour la production, construites à l'aide de composants d'interface utilisateur ShadCN hautement accessibles et de mises en page utilitaires CSS Tailwind.
Regardez la génération autonome de la couche de vue frontend modernisée :
7. Phase 5 : vérification et audit contradictoire
Notre pipeline de refactorisation 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 une parité fonctionnelle absolue avec la base de référence héritée.
Exécution du test à deux onglets et activation du navigateur
La phase de vérification exploite les capacité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 à l'exécuteur local de démarrer simultanément le monolithe Express hérité et l'application Next.js modernisée, en vérifiant la présentation visuelle et le rendu des données identiques. - Sondage de sécurité contradictoire : l'orchestrateur appelle le sous-agent
adversarial-verification, qui lance le sous-agent de navigateur Antigravity. Cet agent spécialisé active directement le navigateur : il saisit des entrées, 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 de pistes d'audit : le sous-agent de navigateur enregistre automatiquement des captures vidéo WebP de ses activations de session, en les joignant directement au rapport de migration final comme "preuve de travail" vérifiable.
Contrat d'instruction d'entrée/de compétence/de sortie
Entrées consommées : applications héritées et modernes exécutées côte à côte dans des environnements d'exécution locaux.
Compétences appelées :
Compétences | Description |
| Exécute des vérifications de parité côte à côte au moment de l'exécution. |
| Recherche les failles logiques et les régressions fonctionnelles à l'aide de l'activation automatisée du navigateur. |
Sorties produites : piste d'audit de parité fonctionnelle complète associée à des vidéos de session de navigateur enregistrées 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 refactorisation agentique autonome très avancé pour moderniser un monolithe hérité de A à Z, en acquérant des compétences universelles et hautement transférables telles que la divulgation progressive, les listes de contrôle Plan-and-Execute et les boucles de réflexion d'autoréparation.
Préparation du déploiement en production
Une fois votre application Next.js entièrement vérifiée et auditée, vous êtes prêt à passer à l'intégration en production. Envisagez de mettre en œuvre les étapes suivantes standards du secteur :
- Routage incrémentiel : déployez un proxy inverse (par exemple, le modèle Strangler Fig) pour acheminer le trafic de manière incrémentielle de l'application Express héritée vers la cible moderne.
- Préservation du SEO : mappez les routes Express héritées vers des redirections permanentes Next.js (
_redirects.yaml) pour conserver l'autorité de domaine existante. - Streaming de données : passez de l'amorçage de base de données statique 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 pilotent ce pipeline, veillez à lire l'article parent complet, ainsi que d'autres contenus d'orchestration multi-agent.
- Article : Automatiser la modernisation avec Antigravity et l'orchestration multi-agent
- Atelier de programmation : Créer un auditeur de code multilingue avec des agents Antigravity parallèles
Rejoignez la communauté des créateurs agentiques
J'espère que vous avez trouvé ces modèles de refactorisation universels et ces pipelines agentiques utiles. Pour vous tenir informé des futurs packs de compétences Open Source, des contenus techniques approfondis et des prochaines conférences, suivez-moi sur les canaux 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 enthousiasme le plus dans l'orchestration agentique ?
Merci pour votre confiance dans Google Antigravity !