De meeste webontwikkeling begint niet helemaal vanaf nul. Dit gebeurt in bestaande codebases waarin jarenlang tijdelijke oplossingen, polyfills en JavaScript-hulpprogramma's (automatisch formaat aanpassen, hacks voor aangepaste selectievakjes, scrollHeight-listeners) zijn verzameld voor zaken die de browser nu zelf afhandelt. Maar hier is het probleem:
Oude code gaat niet kapot. Het werkt, dus niemand dient een bug in. Het vereist ook vertrouwen om werkende code te refactoren, zelfs als deze oud is. Ontwikkelaars zijn daarom begrijpelijkerwijs terughoudend.
Aan de andere kant kost het niet refactoren van oude code om moderne webfuncties te gebruiken je ongemerkt bundelgrootte, paginaresponsiviteit en toegankelijkheid. Erger nog: als je programmeeragents in deze projecten gebruikt, kopiëren ze de omringende conventies uit 2015 samen met de verouderde patronen uit hun trainingsgegevens.
Als je iets nieuws maakt, stuurt Modern Web Guidance je agent naar moderne Baseline-functies. Voor bestaande code voegt Modern Web Guidance 1.0 een moderniseringsworkflow toe die je project scant op verouderde patronen en je agent helpt deze te upgraden.
Wat de moderniseringsworkflow doet
Als je je agent vraagt om een project te moderniseren (of door de opdracht legacy-scan
rechtstreeks uit te voeren), werkt dit als volgt:
- Deterministische lokale scans: HTML, CSS, JavaScript/TypeScript,
frameworkspecifieke componenten en
package.json-bestanden worden snel lokaal gescand met Abstract Syntax Tree (AST), DOM en CSS-parsers zonder LLM-aanroepen of tokenkosten. - Verouderde regelcatalogus: Een scanner die bij elke uitvoering te veel items markeert, wordt genegeerd. We hebben kandidaatregels getest in ongeveer 45.000 open-source repositories,verdeeld in 2 helften: Regels werden geschreven en afgestemd op de helft voor het schrijven van regels en beoordeeld op een onzichtbare, achtergehouden helft. We hebben meer kandidaatregels weggegooid dan we hebben gehouden. We hebben functies overgeslagen die geen equivalent in de oude code hebben en we hebben alleen-syntaxis-swaps zonder echte opbrengst (zoals het herschrijven van werkende
+- of~-sibling-selectors naar:has()) buiten gebruik gesteld. Om standaard te worden geleverd, moet een regel een precisie van ten minste 80% voor statische overeenkomsten en een precisie van 90% na verificatie op ongeziene code behalen. - Contextbewuste filtering van onterechte positieve resultaten: Elke regelovereenkomst wordt geleverd met expliciete
keepWhen/dropWhen-rubrieken. Dit vertelt de agent om de omringende code te evalueren en opzettelijke fallbacks, CSS@supports-beveiligingen of lookalikes te negeren voordat de bevindingen worden gepresenteerd. - Beperkt tot verouderde patronen met een hoge betrouwbaarheid (en groeiend):
legacy-scancontroleert de subset van onze ongeveer 200 handleidingen (ongeveer 20%) waarin verouderde code deterministisch kan worden opgespoord zonder fout-positieven. We breiden die dekking in de loop van de tijd uit. Voor de rest van de catalogus zoekt en haalt je agent handleidingen op terwijl je bouwt.
De moderniseringsworkflow aanroepen
Voor het moderniseren van code met Modern Web Guidance is versie 1.0 of hoger vereist. Installeer of update de plug-in met npm of de plug-inmarktplaats van je 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
Omdat de moderniseringsworkflow deel uitmaakt van de definitie van de kernvaardigheid, kun je de scanner activeren met natuurlijke taal door je agent te vragen om te controleren op verouderde patronen of om een repository of map te moderniseren.
Opmerking: Als je één component een naam geeft, wordt er een normale gidszoekopdracht uitgevoerd.
Hieronder vind je een voorbeeldprompt om een hele repository te scannen:
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.
Je kunt de tool ook op een specifieke map richten:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Je kunt legacy-scan op dit moment handmatig uitvoeren in je terminal, maar geautomatiseerde CI/CD-pipeline-integraties zijn nog in ontwikkeling.
Voorbeeldpatronen die worden gevonden en gecorrigeerd
De gekwalificeerde regels zijn gericht op veelvoorkomende verouderde antipatronen in 4 domeinen: Formulieren en UI, dialoogvensters en bedieningselementen, CSS-indeling, typografie en visueel ontwerp en Beveiliging. De volgende tabel bevat voorbeelden van verouderde patronen en de moderne vervangingen:
Voorbeelden van codetransformatie
Als je hierom wordt gevraagd, kan je programmeeragent verouderde antipatronen omzetten in moderne patronen met de moderniseringsworkflow. Hier volgen enkele voorbeelden:
Automatisch groeiende <textarea>-elementen
Verouderde JavaScript-meting scrollHeight bij elke input-gebeurtenis dwingt layout thrashing af. Dit kan prestatieproblemen veroorzaken, met name met Interaction to Next Paint (INP). Met de moderniseringsworkflow
kan je agent dit oplossen:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Je hebt hier geen JavaScript voor nodig. De moderniseringsworkflow leidt je agent om deze te vervangen door CSS:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Declaratieve pop-overs
Aangepaste modale venster- en pop-uplogica met JavaScript-event-listeners kan worden vervangen door standaard HTML-kenmerken:
<!-- 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>
IME-veilige invoer van inzending
Onbeschermde Enter-toetslisteners activeren het indienen van berichten voortijdig wanneer gebruikers typen in Japanse, Chinese of Koreaanse Input Method Editors (IME's).
Je agent voegt beveiligingsmaatregelen voor de compositiestatus toe:
// 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();
}
});
Hoe het werkt: de moderniseringsworkflow in 4 stappen
Het refactoren van werkende code in een bestaande app vereist vertrouwen, omdat niemand automatische churn of subtiele regressies wil. Daarom is er ook geen --fix-markering: zelfs moderniseringen die eenvoudig lijken, blijken vaak refactoren op meerdere lagen te zijn, zoals het verwijderen van een imperatieve JS-listener of npm-pakket en het gedrag verplaatsen naar HTML en CSS, met subtiele uitdagingen op het gebied van gedrag en browserondersteuning.
In plaats daarvan voert de moderniseringsworkflow een lus van 4 stappen uit met uw programmeeragent:
- Scan (
legacy-scan): De agent voertnpx modern-web-guidance legacy-scan <path> --jsonuit, waarmee bestanden vooraf worden gescreend op relevante subtekenreeksen, zodat alleen AST-, CSS- en HTML-parsers worden gestart voor kandidaatbestanden en -regels. Als een bevinding zo ver komt, is er al een grote kans (ongeveer 92%) dat het geen fout-positief is. Elke overeenkomst bevat een verificatiechecklist voor de agent. - Contextuele verificatie (
keepWhen/dropWhen): Omdat de programmeeragent de repository heeft geopend, inspecteert deze de code rond elke overeenkomst aan de hand van de verificatierubriek van die regel. Als eenscrollHeight-lezing deel uitmaakt van gevirtualiseerd scrollen in plaats van een<textarea>-hack, of als een@supports-controle de property al beschermt, wordt de bevinding zonder melding verwijderd. - Rapport: De agent vat de geverifieerde bevindingen samen (waarbij wordt opgemerkt dat
legacy-scande subset van handleidingen met deterministische regels dekt, plus het moderniseringsplan als je hebt gevraagd om een plan te beoordelen voordat je bewerkingen aanbrengt). - Handleiding ophalen, refactoren en testverificatie: Als de agent wordt gevraagd om te moderniseren, voert deze
npx modern-web-guidance retrieve <guide-id>uit om de juiste handleiding op te halen. De code wordt gerefactord volgens de Baseline-compatibiliteitspatronen van de gids enlegacy-scan <path>wordt opnieuw uitgevoerd op de aangepaste bestanden, samen met het testpakket van het project om de oplossing te bevestigen.
Uitproberen
Of je nu een eenmalige legacy-scan uitvoert in de terminal of je programmeeragent vraagt een oudere module te moderniseren, met de moderniseringsworkflow kun je de schuld van het oude webplatform afbetalen zonder de ruis van traditionele linters.
Koppel Modern Web Guidance aan Chrome DevTools voor agents als je van statische codemodernisering wilt overstappen naar live browserverificatie, benchmarking en foutopsporing.