La maggior parte dello sviluppo web non avviene da zero. Questo accade nelle codebase esistenti che hanno accumulato anni di soluzioni alternative legacy, polyfill e utilità JavaScript (ridimensionamento automatico, hack per lo stile delle caselle di controllo personalizzate, listener scrollHeight) per elementi che ora il browser gestisce in modo nativo. Ma ecco il problema:
il codice precedente non si interrompe. Funziona, quindi nessuno segnala un bug. Inoltre, per rifattorizzare il codice funzionante, anche se è vecchio, è necessaria fiducia, quindi gli sviluppatori sono comprensibilmente riluttanti.
D'altra parte, non rifattorizzare il codice precedente per utilizzare le funzionalità web moderne ti costerà silenziosamente in termini di dimensioni del bundle, reattività della pagina e accessibilità. Peggio ancora, quando utilizzi agenti di programmazione in questi progetti, questi copiano le convenzioni del 2015 circostanti insieme ai pattern obsoleti dei loro dati di addestramento.
Quando crei qualcosa di nuovo, Modern Web Guidance indirizza l'agente verso le funzionalità Baseline moderne. Per il codice esistente, Modern Web Guidance 1.0 aggiunge un flusso di lavoro di modernizzazione che analizza il progetto alla ricerca di pattern legacy e aiuta l'agente a eseguirne l'upgrade.
Cosa fa il workflow di modernizzazione
Quando chiedi all'agente di modernizzare un progetto (o eseguendo direttamente il comando legacy-scan), ecco come funziona:
- Scansione locale deterministica: i file HTML, CSS, JavaScript/TypeScript, i componenti specifici del framework e i file
package.jsonvengono scansionati rapidamente con parser Abstract Syntax Tree (AST), DOM e CSS localmente, senza chiamate LLM o costi dei token. - Catalogo delle regole legacy: uno scanner che segnala troppi elementi a ogni esecuzione viene ignorato. Abbiamo testato le regole candidate su circa 45.000 repository open source divisi a metà: le regole sono state scritte e ottimizzate sulla metà di scrittura delle regole e valutate su una metà nascosta non vista. Abbiamo scartato più regole candidate di quante ne abbiamo mantenute, saltando le funzionalità che non hanno un equivalente nel codice legacy e ritirando gli scambi di sola sintassi senza un vero vantaggio (come la riscrittura dei selettori di elementi di pari livello
+o~funzionanti in:has()). Per essere spedita per impostazione predefinita, una regola deve raggiungere almeno l'80% di precisione del matcher statico e il 90% di precisione post-verifica sul codice non visto. - Filtro dei falsi positivi sensibile al contesto: ogni corrispondenza di regola è accompagnata da rubriche
keepWhen/dropWhenesplicite. In questo modo, l'agente valuta il codice circostante e scarta i fallback intenzionali, le protezioni CSS@supportso i sosia prima di presentare i risultati. - Ambito limitato a pattern legacy ad alta affidabilità (e in crescita):
legacy-scancontrolla il sottoinsieme delle nostre circa 200 guide (circa il 20%) in cui il codice legacy può essere individuato in modo deterministico senza falsi positivi e stiamo espandendo questa copertura nel tempo. Per il resto del catalogo, l'agente cerca e recupera le guide man mano che le crei.
Come richiamare il workflow di modernizzazione
La modernizzazione del codice con Modern Web Guidance richiede la versione 1.0 o successive. Installalo o aggiornalo con npm o con il marketplace dei plug-in dell'agente:
# 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
Poiché il workflow di modernizzazione fa parte della definizione delle competenze di base, puoi attivare lo scanner con il linguaggio naturale chiedendo all'agente di verificare la presenza di "pattern legacy" o di "modernizzare" un repository o una cartella.
Nota: se assegni un nome a un singolo componente, verrà eseguita una normale ricerca nella guida.
Per dimostrarlo, di seguito è riportato un esempio di prompt per scansionare un intero repository:
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.
Puoi anche indirizzarlo a una cartella specifica:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Sebbene al momento sia possibile eseguire legacy-scan manualmente nel terminale, le integrazioni automatiche della pipeline CI/CD sono attualmente in fase di sviluppo.
Esempi di pattern che rileva e corregge
Le regole idonee hanno come target gli antipattern legacy comuni in quattro domini: Moduli e UI, Finestre di dialogo e controlli, Layout CSS, tipografia e design visivo e Sicurezza. Di seguito è riportata una tabella di esempi di pattern legacy e delle relative sostituzioni moderne:
Esempi di trasformazione del codice
Quando richiesto, l'agente di programmazione può trasformare gli antipattern legacy in antipattern moderni con il workflow di modernizzazione. Ecco alcuni esempi:
Elementi <textarea> con espansione automatica
Il codice JavaScript legacy che misura scrollHeight su ogni evento input forza il layout thrashing. Ciò può causare problemi di prestazioni, in particolare con Interaction to Next Paint (INP). Utilizzando il workflow di modernizzazione, l'agente può risolvere il problema:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Oggi non è necessario JavaScript per questo. Il flusso di lavoro di modernizzazione guida l'agente nella sostituzione con CSS:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Popover dichiarativi
La logica personalizzata di popup e finestre modali che utilizza i listener di eventi JavaScript può essere sostituita con attributi HTML standard:
<!-- 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>
Invio sicuro con IME
I listener del tasto Invio non protetti attivano l'invio dei messaggi prematuramente quando gli utenti digitano negli Input Method Editor (IME) giapponese, cinese o coreano.
L'agente aggiunge i guard di stato della composizione:
// 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();
}
});
Come funziona: il flusso di lavoro di modernizzazione in quattro passaggi
Il refactoring del codice funzionante in un'app esistente richiede fiducia, perché nessuno vuole un churn automatico o regressioni impercettibili. Questo è anche il motivo per cui non esiste un flag --fix: anche le modernizzazioni che sembrano semplici spesso si rivelano rifattorizzazioni tra livelli, come l'eliminazione di un listener JS imperativo o di un pacchetto npm e lo spostamento del comportamento in HTML e CSS, con sfide di comportamento e supporto del browser impercettibili.
Il workflow di modernizzazione esegue invece un loop in quattro passaggi con l'agente di programmazione:
- Scansione (
legacy-scan): l'agente eseguenpx modern-web-guidance legacy-scan <path> --json, che pre-analizza i file per individuare sottostringhe pertinenti, in modo da attivare i parser AST, CSS e HTML solo sui file e sulle regole candidati. Se un risultato arriva a questo punto, è già molto probabile (circa il 92%) che non si tratti di un falso positivo. Ogni corrispondenza include un elenco di controllo di verifica per l'agente. - Verifica contestuale (
keepWhen/dropWhen): poiché l'agente di programmazione ha il repository aperto, ispeziona il codice che circonda ogni corrispondenza rispetto alla rubrica di verifica della regola. Se una lettura discrollHeightfa parte dello scorrimento virtualizzato anziché di un hack di<textarea>o se un controllo di@supportsprotegge già la proprietà, il risultato viene ignorato senza avvisi. - Report: l'agente riassume i risultati verificati (notando che
legacy-scancopre il sottoinsieme di guide con regole deterministiche, oltre al piano di modernizzazione se hai chiesto di rivedere un piano prima di apportare modifiche). - Recupero della guida, rifattorizzazione e verifica dei test: quando viene richiesto di modernizzare, l'agente esegue
npx modern-web-guidance retrieve <guide-id>per recuperare la guida appropriata. Esegue il refactoring del codice in base ai pattern di compatibilità di Baseline della guida e rieseguelegacy-scan <path>sui file modificati insieme alla suite di test del progetto per confermare la risoluzione.
Prova
Che tu stia eseguendo un legacy-scan una tantum nel terminale o chiedendo al tuo agente di programmazione di modernizzare un modulo precedente, il flusso di lavoro di modernizzazione ti aiuta a ridurre il debito della piattaforma web legacy senza il rumore dei linter tradizionali.
Abbina Modern Web Guidance a Chrome DevTools per agenti quando vuoi passare dalla modernizzazione del codice statico alla verifica, al benchmarking e al debug del browser in tempo reale.