Większość stron internetowych nie jest tworzona od podstaw. Dzieje się tak w przypadku istniejących baz kodu, w których przez lata nagromadziły się starsze obejścia, polyfille i narzędzia JavaScript (autosize, niestandardowe hacki do stylizacji pól wyboru, detektory scrollHeight) do obsługi funkcji, które przeglądarka obsługuje teraz natywnie. Problem polega na tym, że stary kod nie przestaje działać. Działa, więc nikt nie zgłasza błędu. Refaktoryzacja działającego kodu, nawet jeśli jest on stary, wymaga również zaufania, więc programiści niechętnie się na nią decydują.
Z drugiej strony brak refaktoryzacji starego kodu w celu wykorzystania nowoczesnych funkcji internetowych będzie po cichu kosztować Cię rozmiar pakietu, czas reakcji strony i dostępność. Co gorsza, gdy używasz agentów kodujących w tych projektach, kopiują one konwencje z 2015 r. wraz z przestarzałymi wzorcami z danych treningowych.
Gdy tworzysz coś nowego, Przewodnik po współczesnych technologiach internetowych kieruje agenta do nowoczesnych funkcji Baseline. W przypadku istniejącego kodu Przewodnik po współczesnych technologiach internetowych 1.0 dodaje przepływ pracy modernizacji, który skanuje projekt pod kątem starszych wzorców i pomaga agentowi w ich uaktualnieniu.
Co robi przepływ pracy modernizacji
Gdy poprosisz agenta o zmodernizowanie projektu (lub bezpośrednio uruchomisz polecenie legacy-scan), proces będzie wyglądał tak:
- Deterministyczne skanowanie lokalne: pliki HTML, CSS, JavaScript/TypeScript, komponenty specyficzne dla platformy i pliki
package.jsonsą szybko skanowane lokalnie za pomocą parserów AST, DOM i CSS bez wywołań LLM i kosztów tokenów. - Starszy katalog reguł: skaner, który przy każdym uruchomieniu oznacza zbyt wiele elementów, jest ignorowany. Przetestowaliśmy reguły kandydujące na około 45 000 repozytoriów open source podzielonych na pół: reguły zostały napisane i dostrojone na jednej połowie,a ocenione na drugiej, niewidocznej połowie. Odrzuciliśmy więcej reguł, niż zachowaliśmy, pomijając funkcje, które nie mają odpowiednika w starszym kodzie, i wycofując zamiany dotyczące tylko składni, które nie przynoszą żadnych korzyści (np. przepisywanie działających selektorów rodzeństwa
+lub~na:has()). Aby reguła była domyślnie stosowana, musi osiągnąć co najmniej 80% precyzji dopasowania statycznego i 90% precyzji po weryfikacji w przypadku niewidocznego kodu. - Filtrowanie fałszywych alarmów zależne od kontekstu: każde dopasowanie reguły zawiera wyraźne rubryki
keepWhen/dropWhen. Dzięki temu agent ocenia otaczający kod i odrzuca celowe kreacje zastępcze, zabezpieczenia CSS@supportslub podobne elementy przed przedstawieniem wyników. - Zakres obejmuje wzorce starszego typu o wysokim poziomie ufności (i stale się powiększa):
legacy-scansprawdza podzbiór naszych około 200 przewodników (około 20%), w których starszy kod można wykryć deterministycznie bez wyników fałszywie dodatnich. Z czasem będziemy rozszerzać ten zakres. W przypadku pozostałej części katalogu agent wyszukuje i pobiera przewodniki podczas tworzenia.
Jak wywołać przepływ pracy modernizacji
Modernizowanie kodu za pomocą Przewodnika po współczesnych technologiach internetowych wymaga wersji 1.0 lub nowszej. Zainstaluj lub zaktualizuj go za pomocą npm lub na platformie handlowej wtyczek agenta:
# 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
Proces modernizacji jest częścią definicji podstawowych umiejętności, więc możesz uruchomić skaner za pomocą języka naturalnego, prosząc agenta o sprawdzenie „wzorców starszego typu” lub „modernizację” w repozytorium lub folderze.
Uwaga: jeśli podasz nazwę pojedynczego komponentu, zostanie wykonane zwykłe wyszukiwanie przewodnika.
Oto przykład prompta, który pozwala przeskanować całe repozytorium:
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.
Możesz też wskazać konkretny folder:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Obecnie możesz uruchamiać legacy-scan ręcznie w terminalu, ale pracujemy nad automatyczną integracją potoków CI/CD.
Przykładowe wzorce, które wykrywa i poprawia
Reguły kwalifikujące dotyczą typowych starszych antywzorców w 4 obszarach: formularze i interfejs, okna i elementy sterujące, układ CSS, typografia i projekt wizualny oraz bezpieczeństwo. Poniższa tabela zawiera przykłady starszych wzorców i ich nowoczesnych zamienników:
Przykłady przekształcania kodu
Gdy pojawi się prośba, agent kodowania może przekształcić starsze antywzorce w nowoczesne za pomocą przepływu pracy modernizacji. Oto kilka przykładów:
Automatycznie powiększające się elementy <textarea>
Starszy kod JavaScript, który mierzy scrollHeight przy każdym zdarzeniu input, wymusza niszczenie układu. Może to powodować problemy z wydajnością, zwłaszcza w przypadku interakcji do kolejnego wyrenderowania (INP). Dzięki przepływowi pracy modernizacji agent może to naprawić:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Nie potrzebujesz już do tego kodu JavaScript. Proces modernizacji pomaga agentowi zastąpić go kodem CSS:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Deklaratywne wyskakujące okienka
Niestandardową logikę okien modalnych i wyskakujących okienek, która korzysta z detektorów zdarzeń JavaScript, można zastąpić standardowymi atrybutami HTML:
<!-- 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>
Przesyłanie bezpiecznego wpisu IME
Niechronione detektory klawisza Enter powodują przedwczesne przesyłanie wiadomości, gdy użytkownicy piszą w edytorach IME w języku japońskim, chińskim lub koreańskim.
Agent dodaje zabezpieczenia stanu kompozycji:
// 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();
}
});
Jak to działa: 4-etapowy proces modernizacji
Refaktoryzacja działającego kodu w istniejącej aplikacji wymaga zaufania, ponieważ nikt nie chce automatycznej rezygnacji ani subtelnych regresji. Dlatego też nie ma flagi --fix: nawet modernizacje, które wydają się proste, często okazują się refaktoryzacją obejmującą wiele warstw – np. usunięcie imperatywnego detektora JS lub pakietu npm i przeniesienie zachowania do HTML i CSS – z subtelnymi wyzwaniami związanymi z zachowaniem i obsługą przeglądarki.
Zamiast tego przepływ pracy modernizacji uruchamia 4-etapową pętlę z agentem kodowania:
- Skanowanie (
legacy-scan): agent uruchamianpx modern-web-guidance legacy-scan <path> --json, który wstępnie sprawdza pliki pod kątem odpowiednich podłańcuchów, dzięki czemu uruchamia parsery AST, CSS i HTML tylko w przypadku plików i reguł kandydujących. Jeśli wynik dotrze do tego etapu, istnieje już duże prawdopodobieństwo (około 92%), że nie jest to wynik fałszywie dodatni. Każde dopasowanie zawiera listę kontrolną weryfikacji dla agenta. - Weryfikacja kontekstowa (
keepWhen/dropWhen): agent kodujący ma otwarte repozytorium, więc sprawdza kod otaczający każde dopasowanie pod kątem rubryki weryfikacji reguły. Jeśli odczytscrollHeightjest częścią wirtualnego przewijania, a nie obejścia<textarea>, lub jeśli właściwość jest już chroniona przez sprawdzenie@supports, wynik jest ignorowany. - Raport: agent podsumowuje zweryfikowane wyniki (zauważ, że
legacy-scanobejmuje podzbiór przewodników z regułami deterministycznymi oraz plan modernizacji, jeśli poprosisz o sprawdzenie planu przed wprowadzeniem zmian). - Pobieranie przewodnika, refaktoryzacja i weryfikacja testowa: gdy agent zostanie poproszony o modernizację, uruchamia
npx modern-web-guidance retrieve <guide-id>, aby pobrać odpowiedni przewodnik. Przeprowadza refaktoryzację kodu zgodnie ze wzorcami zgodności z Baseline i ponownie uruchamialegacy-scan <path>na zmodyfikowanych plikach wraz z zestawem testów projektu, aby potwierdzić rozwiązanie problemu.
Wypróbuj
Niezależnie od tego, czy uruchamiasz jednorazowe polecenie legacy-scan w terminalu, czy prosisz agenta kodującego o modernizację starszego modułu, przepływ pracy modernizacji pomaga spłacić dług związany ze starszą platformą internetową bez szumu tradycyjnych linterów.
Połącz Przewodnik po współczesnych technologiach internetowych z Narzędziami deweloperskimi w Chrome dla agentów, aby przejść od modernizacji kodu statycznego do weryfikacji, testów porównawczych i debugowania w przeglądarce na żywo.