Die meisten Webentwicklungen beginnen nicht bei null. Das passiert in bestehenden Codebasen, in denen sich über Jahre hinweg Legacy-Workarounds, Polyfills und JavaScript-Dienstprogramme (Autosize, benutzerdefinierte Hacks für das Styling von Kontrollkästchen, scrollHeight-Listener) für Dinge angesammelt haben, die der Browser jetzt nativ verarbeitet. Aber hier ist das Problem:
Alter Code wird nicht ungültig. Es funktioniert, also meldet niemand einen Fehler. Es erfordert auch Vertrauen, funktionierenden Code zu refaktorieren, selbst wenn er alt ist. Daher sind Entwickler verständlicherweise zurückhaltend.
Wenn Sie alten Code nicht refaktorieren, um moderne Webfunktionen zu verwenden, kostet Sie das unbemerkt Bundle-Größe, Seitenreaktionsfähigkeit und Barrierefreiheit. Noch schlimmer: Wenn Sie in diesen Projekten KI-Agenten für die Programmierung verwenden, kopieren sie die umgebenden Konventionen aus dem Jahr 2015 zusammen mit den veralteten Mustern aus ihren Trainingsdaten.
Wenn Sie etwas Neues erstellen, lenkt Modern Web Guidance Ihren Agent auf moderne Baseline-Funktionen. Für vorhandenen Code bietet Modern Web Guidance 1.0 einen Modernisierungs-Workflow, der Ihr Projekt nach Legacy-Mustern durchsucht und Ihrem Agenten hilft, diese zu aktualisieren.
Funktionsweise des Modernisierungs-Workflows
Wenn Sie Ihren KI-Agenten bitten, ein Projekt zu modernisieren (oder den Befehl legacy-scan direkt ausführen), funktioniert das so:
- Deterministisches lokales Scannen: HTML-, CSS-, JavaScript-/TypeScript-, frameworkspezifische Komponenten und
package.json-Dateien werden schnell mit AST- (Abstract Syntax Tree), DOM- und CSS-Parsern lokal gescannt, ohne dass LLM-Aufrufe oder Tokenkosten anfallen. - Legacy-Regelkatalog: Ein Scanner, der bei jedem Durchlauf zu viele Elemente kennzeichnet, wird ignoriert. Wir haben Kandidatenregeln in etwa 45.000 Open-Source-Repositories getestet,die in zwei Hälften aufgeteilt waren: Die Regeln wurden in der Hälfte zum Schreiben von Regeln geschrieben und optimiert und in einer ungesehenen, zurückgehaltenen Hälfte bewertet. Wir haben mehr Kandidatenregeln verworfen als beibehalten. Dabei haben wir Funktionen übersprungen, die kein Äquivalent im Legacy-Code haben, und reine Syntax-Swaps ohne echten Nutzen eingestellt (z. B. das Umschreiben funktionierender
+- oder~-Geschwisterselektoren in:has()). Um standardmäßig ausgeliefert zu werden, muss eine Regel mindestens 80 % statische Matcher-Genauigkeit und 90 % Genauigkeit nach der Überprüfung bei unbekanntem Code erreichen. - Kontextsensitives Filtern von falsch positiven Ergebnissen: Jede Regelübereinstimmung enthält explizite
keepWhen/dropWhen-Rubriken. Der Agent wird dadurch angewiesen, den umgebenden Code zu bewerten und absichtliche Fallbacks, CSS-@supports-Guards oder Lookalikes zu verwerfen, bevor er seine Ergebnisse präsentiert. - Auf Legacy-Muster mit hoher Zuverlässigkeit beschränkt (und wachsend):
legacy-scanprüft die Teilmenge unserer etwa 200 Leitfäden (ca. 20 %), in denen Legacy-Code deterministisch ohne falsch positive Ergebnisse erkannt werden kann. Wir erweitern diese Abdeckung im Laufe der Zeit. Für den Rest des Katalogs sucht und ruft Ihr KI-Agent während der Erstellung Anleitungen ab.
Modernisierungs-Workflow aufrufen
Für die Modernisierung von Code mit Modern Web Guidance ist Version 1.0 oder höher erforderlich. Installieren oder aktualisieren Sie es mit npm oder über den Plug-in-Marktplatz Ihres KI-Agenten:
# 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
Da der Modernisierungs-Workflow Teil der Definition der Kernkompetenz ist, können Sie den Scanner mit natürlicher Sprache auslösen, indem Sie Ihren Agenten bitten, in einem Repository oder Ordner nach „Legacy-Mustern“ zu suchen oder diese zu „modernisieren“.
Hinweis: Wenn Sie nur eine einzelne Komponente benennen, wird stattdessen eine reguläre Anleitungssuche durchgeführt.
Hier ist ein Beispiel für einen Prompt, mit dem ein ganzes Repository gescannt wird:
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.
Sie können auch einen bestimmten Ordner angeben:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Sie können legacy-scan derzeit manuell in Ihrem Terminal ausführen. Automatisierte CI/CD-Pipeline-Integrationen befinden sich jedoch noch in der Entwicklung.
Beispielmuster, die erkannt und korrigiert werden
Die qualifizierten Regeln zielen auf gängige Legacy-Antipatterns in vier Bereichen ab: Formulare und UI, Dialogfelder und Steuerelemente, CSS-Layout, Typografie und visuelles Design sowie Sicherheit. In der folgenden Tabelle finden Sie Beispiele für Legacy-Muster und ihre modernen Ersetzungen:
Beispiele für Codetransformationen
Wenn Sie dazu aufgefordert werden, kann Ihr Coding-Agent mit dem Modernisierungs-Workflow Legacy-Antimuster in moderne Muster umwandeln. Hier einige Beispiele:
Automatisch wachsende <textarea>-Elemente
Das Messen von scrollHeight bei jedem input-Ereignis mit Legacy-JavaScript führt zu Layout-Thrashing. Das kann zu Leistungsproblemen führen, insbesondere bei Interaction to Next Paint (INP). Mit dem Modernisierungs-Workflow kann Ihr KI-Agent das Problem beheben:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Dafür ist heute kein JavaScript mehr erforderlich. Der Modernisierungs-Workflow führt Ihren Agenten dazu, es durch CSS zu ersetzen:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Deklarative Pop-over
Benutzerdefinierte modale und Pop-up-Logik mit JavaScript-Ereignis-Listenern kann durch Standard-HTML-Attribute ersetzt werden:
<!-- 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-sichere Eingabe senden
Ungeschützte Listener für die Eingabetaste lösen die Nachrichtenübermittlung vorzeitig aus, wenn Nutzer in japanischen, chinesischen oder koreanischen Eingabemethoden-Editoren (IMEs) tippen.
Der Agent fügt Zustandsprüfungen für die Zusammenstellung hinzu:
// 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();
}
});
Funktionsweise: Der Modernisierungsworkflow in vier Schritten
Das Refaktorieren von funktionierendem Code in einer vorhandenen App erfordert Vertrauen, da niemand automatisierte Abwanderung oder subtile Regressionen möchte. Aus diesem Grund gibt es auch kein --fix-Flag: Selbst Modernisierungen, die einfach erscheinen, erweisen sich oft als ebenenübergreifende Refaktorierungen, z. B. das Löschen eines imperativen JS-Listeners oder npm-Pakets und das Verschieben des Verhaltens in HTML und CSS, mit subtilen Verhaltens- und Browserunterstützungsproblemen.
Stattdessen führt der Modernisierungs-Workflow eine vierstufige Schleife mit Ihrem Coding-Agent aus:
- Scannen (
legacy-scan): Der Agent führtnpx modern-web-guidance legacy-scan <path> --jsonaus, um Dateien vorab auf relevante Teilstrings zu prüfen. So werden AST-, CSS- und HTML-Parser nur für Kandidatendateien und ‑regeln gestartet. Wenn ein Ergebnis so weit kommt, ist die Wahrscheinlichkeit, dass es sich nicht um ein falsch positives Ergebnis handelt, bereits hoch (etwa 92 %). Jede Übereinstimmung enthält eine Prüfliste für den Agenten. - Kontextbezogene Überprüfung (
keepWhen/dropWhen): Da der Coding-Agent das Repository geöffnet hat, prüft er den Code um jede Übereinstimmung anhand der Überprüfungsrubrik dieser Regel. Wenn einscrollHeight-Lesevorgang Teil des virtualisierten Scrollens und kein<textarea>-Hack ist oder wenn das Attribut bereits durch eine@supports-Prüfung geschützt ist, wird das Ergebnis ohne Benachrichtigung verworfen. - Bericht: Der KI-Agent fasst die verifizierten Ergebnisse zusammen. Dabei wird darauf hingewiesen, dass
legacy-scandie Teilmenge der Leitfäden mit deterministischen Regeln abdeckt, sowie den Modernisierungsplan, wenn Sie darum gebeten haben, einen Plan vor dem Vornehmen von Änderungen zu überprüfen. - Anleitung abrufen, refaktorieren und Tests verifizieren: Wenn der Agent aufgefordert wird, Code zu modernisieren, führt er
npx modern-web-guidance retrieve <guide-id>aus, um die entsprechende Anleitung abzurufen. Der Code wird gemäß den Baseline-Kompatibilitätsmustern des Leitfadens refaktoriert. Anschließend wirdlegacy-scan <path>für die geänderten Dateien zusammen mit der Test-Suite des Projekts ausgeführt, um die Behebung zu bestätigen.
Jetzt ausprobieren
Egal, ob Sie einen einmaligen legacy-scan im Terminal ausführen oder Ihren Coding-Agenten bitten, ein älteres Modul zu modernisieren – der Modernisierungs-Workflow hilft Ihnen, Altlasten der Webplattform ohne den Aufwand herkömmlicher Linter zu beseitigen.
Kombinieren Sie Modern Web Guidance mit den Chrome-Entwicklertools für KI-Agenten, wenn Sie von der statischen Codemodernisierung zur Live-Browserüberprüfung, zum Benchmarking und zum Debugging übergehen möchten.