La plupart des développements Web ne se font pas à partir de zéro. Cela se produit dans les codebases existants qui ont accumulé des années de solutions de contournement, de polyfills et d'utilitaires JavaScript (autosize, astuces de style de case à cocher personnalisées, écouteurs scrollHeight) pour des éléments que le navigateur gère désormais de manière native. Mais voici le problème :
l'ancien code ne s'interrompt pas. Ça fonctionne, donc personne ne signale de bug. Il faut également avoir confiance pour refactoriser du code fonctionnel, même s'il est ancien. Les développeurs sont donc naturellement réticents.
En revanche, ne pas refactoriser l'ancien code pour utiliser les fonctionnalités Web modernes vous coûtera silencieusement en termes de taille de bundle, de réactivité des pages et d'accessibilité. Pire encore, lorsque vous utilisez des agents de codage dans ces projets, ils copient les conventions de 2015 environnantes ainsi que les modèles obsolètes de leurs données d'entraînement.
Lorsque vous créez quelque chose de nouveau, Modern Web Guidance oriente votre agent vers les fonctionnalités Baseline modernes. Pour le code existant, Modern Web Guidance 1.0 ajoute un workflow de modernisation qui analyse votre projet à la recherche de modèles anciens et aide votre agent à les mettre à niveau.
Fonctionnement du workflow de modernisation
Lorsque vous demandez à votre agent de moderniser un projet (ou en exécutant directement la commande legacy-scan), voici comment cela fonctionne :
- Analyse locale déterministe : les fichiers HTML, CSS, JavaScript/TypeScript, les composants spécifiques au framework et les fichiers
package.jsonsont rapidement analysés localement avec des analyseurs d'arbre syntaxique abstrait (AST), DOM et CSS, sans aucun appel de LLM ni coût de jeton. - Catalogue de règles d'ancienne génération : un scanner qui signale trop d'éléments à chaque exécution est ignoré. Nous avons testé les règles candidates sur environ 45 000 dépôts Open Source divisés en deux : les règles ont été écrites et ajustées sur la moitié dédiée à l'écriture des règles, et évaluées sur une moitié non vue et mise de côté. Nous avons rejeté plus de règles candidates que nous n'en avons conservées, en ignorant les fonctionnalités qui n'ont pas d'équivalent dans le code existant et en supprimant les échanges de syntaxe sans réel intérêt (comme la réécriture de sélecteurs frères
+ou~fonctionnels en:has()). Pour être livrée par défaut, une règle doit atteindre une précision de correspondance statique d'au moins 80 % et une précision de post-vérification de 90 % sur du code non vu. - Filtrage des faux positifs contextuel : chaque correspondance de règle est accompagnée de rubriques
keepWhen/dropWhenexplicites. Cela indique à l'agent d'évaluer le code environnant et d'ignorer les solutions de remplacement intentionnelles, les protections CSS@supportsou les éléments similaires avant de présenter ses résultats. - Limité aux anciens modèles à haut niveau de confiance (et en croissance) :
legacy-scanvérifie le sous-ensemble de nos quelque 200 guides (environ 20 %) où l'ancien code peut être détecté de manière déterministe sans faux positifs, et nous étendons cette couverture au fil du temps. Pour le reste du catalogue, votre agent recherche et récupère des guides au fur et à mesure que vous le créez.
Appeler le workflow de modernisation
La modernisation du code avec Modern Web Guidance nécessite la version 1.0 ou une version ultérieure. Installez-le ou mettez-le à jour avec npm ou la place de marché de plug-ins de votre agent :
# Install Modern Web Guidance 1.0 in your project
npx modern-web-guidance@latest install
# Or update an existing installation
npx modern-web-guidance@latest update
Comme le workflow de modernisation fait partie de la définition de la compétence de base, vous pouvez déclencher l'analyseur en langage naturel en demandant à votre agent de rechercher des "modèles anciens" ou de "moderniser" un dépôt ou un dossier.
Remarque : Si vous ne nommez qu'un seul composant, une recherche de guide standard sera effectuée à la place.
Voici un exemple de requête permettant d'analyser l'intégralité d'un dépôt :
Modernize this repository using Modern Web Guidance. Scan our frontend files for legacy patterns, verify the findings, and propose a modernization plan before making any code edits.
Vous pouvez également le faire pointer vers un dossier spécifique :
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Bien que vous puissiez actuellement exécuter legacy-scan manuellement dans votre terminal, les intégrations de pipelines CI/CD automatisés sont en cours de développement.
Exemples de formats détectés et corrigés
Les règles qualifiées ciblent les antimodèles anciens courants dans quatre domaines : Formulaires et UI, Boîtes de dialogue et commandes, Mise en page CSS, typographie et conception visuelle, et Sécurité. Le tableau suivant présente des exemples d'anciens modèles et leurs remplacements modernes :
Exemples de transformation de code
Lorsque vous l'y invitez, votre agent de codage peut transformer les anciens antipatterns en antipatterns modernes à l'aide du workflow de modernisation. Voici quelques exemples :
Éléments <textarea> à croissance automatique
Le code JavaScript hérité qui mesure scrollHeight à chaque événement input force le thrashing de mise en page. Cela peut entraîner des problèmes de performances, en particulier avec l'Interaction to Next Paint (INP). Grâce au workflow de modernisation, votre agent peut résoudre le problème :
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Vous n'avez pas besoin de JavaScript pour cela aujourd'hui. Le workflow de modernisation guide votre agent pour le remplacer par du CSS :
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Pop-overs déclaratifs
La logique modale et pop-up personnalisée utilisant des écouteurs d'événements JavaScript peut être remplacée par des attributs HTML standards :
<!-- Before: a click listener that only calls showPopover() -->
<button id="openBtn">Open Menu</button>
<div id="menu" popover>Menu Content</div>
<script>
openBtn.addEventListener('click', () => menu.showPopover());
</script>
<!-- After: declarative control, no JavaScript -->
<button popovertarget="menu">Open Menu</button>
<div id="menu" popover>Menu Content</div>
Envoi sécurisé par l'éditeur de mode de saisie
Les écouteurs de touche Entrée non protégés déclenchent l'envoi de messages prématurément lorsque les utilisateurs saisissent du texte dans des éditeurs de mode de saisie (IME) japonais, chinois ou coréens.
Votre agent ajoute des protections d'état de composition :
// Before: Fires mid-composition when confirming kanji/hanzi characters
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
// After: Accurately checks IME composition state
textarea.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
if (e.isComposing || e.keyCode === 229) return;
sendMessage();
}
});
Fonctionnement : workflow de modernisation en quatre étapes
La refactorisation du code de travail dans une application existante nécessite de la confiance, car personne ne souhaite de désabonnement automatisé ni de régressions subtiles. C'est également la raison pour laquelle il n'existe pas d'option --fix : même les modernisations qui semblent simples s'avèrent souvent être des refactorisations multicouches (par exemple, la suppression d'un écouteur JS impératif ou d'un package npm et le déplacement du comportement vers HTML et CSS), avec des comportements subtils et des problèmes de compatibilité avec les navigateurs.
À la place, le workflow de modernisation exécute une boucle en quatre étapes avec votre agent de codage :
- Analyse (
legacy-scan) : l'agent exécutenpx modern-web-guidance legacy-scan <path> --json, qui pré-analyse les fichiers pour trouver les sous-chaînes pertinentes, de sorte qu'il ne lance les analyseurs AST, CSS et HTML que sur les fichiers et les règles candidats. Si un résultat atteint ce stade, il y a déjà une forte probabilité (environ 92 %) qu'il ne s'agisse pas d'un faux positif. Chaque correspondance inclut une checklist de validation pour l'agent. - Vérification contextuelle (
keepWhen/dropWhen) : comme l'agent de codage a ouvert le dépôt, il inspecte le code entourant chaque correspondance par rapport à la rubrique de vérification de cette règle. Si une lecturescrollHeightfait partie d'un défilement virtualisé plutôt que d'un piratage<textarea>, ou si une vérification@supportsprotège déjà la propriété, le résultat est supprimé sans notification. - Rapport : l'agent résume les résultats vérifiés (en notant que
legacy-scancouvre le sous-ensemble de guides avec des règles déterministes, ainsi que le plan de modernisation si vous avez demandé à examiner un plan avant d'apporter des modifications). - Récupération du guide, refactorisation et vérification des tests : lorsqu'il lui est demandé de moderniser, l'agent exécute
npx modern-web-guidance retrieve <guide-id>pour récupérer le guide approprié. Il refactorise le code conformément aux modèles de compatibilité Baseline du guide, puis réexécutelegacy-scan <path>sur les fichiers modifiés ainsi que sur la suite de tests du projet pour confirmer la résolution.
Essayer
Que vous exécutiez une commande legacy-scan ponctuelle dans le terminal ou que vous demandiez à votre agent de codage de moderniser un ancien module, le workflow de modernisation vous aide à réduire la dette de l'ancienne plate-forme Web sans le bruit des linters traditionnels.
Associez Modern Web Guidance aux Outils de développement Chrome pour les agents lorsque vous souhaitez passer de la modernisation du code statique à la vérification, à l'analyse comparative et au débogage du navigateur en direct.