Web geliştirme çalışmaları genellikle sıfırdan başlamaz. Bu durum, tarayıcının artık yerel olarak işlediği şeyler için yıllarca eski geçici çözümler, polyfill'ler ve JavaScript yardımcı programları (otomatik boyutlandırma, özel onay kutusu stil hileleri, scrollHeight dinleyiciler) biriktirmiş mevcut kod tabanlarında görülür. Ancak şöyle bir sorun var:
Eski kod bozulmaz. Çalıştığı için kimse hata bildirimi yapmaz. Çalışan kodu yeniden düzenlemek için de güven gerekir. Bu nedenle, geliştiriciler eski de olsa çalışan kodu yeniden düzenleme konusunda isteksizdir.
Öte yandan, eski kodu modern web özelliklerini kullanacak şekilde yeniden düzenlememek, paket boyutu, sayfa yanıt hızı ve erişilebilirlik açısından size sessizce maliyet getirir. Daha da kötüsü, bu projelerde kodlama asistanları kullandığınızda, eğitim verisindeki eski kalıplarla birlikte 2015'teki kuralları da kopyalarlar.
Yeni bir şey oluştururken Modern Web Rehberi, temsilcinizi modern Baseline özelliklerine yönlendirir. Modern Web Rehberi 1.0, mevcut kodlar için projenizi eski kalıplara karşı tarayan ve temsilcinizin bunları yükseltmesine yardımcı olan bir modernizasyon iş akışı ekler.
Modernizasyon iş akışının işlevi
Temsilcinizden bir projeyi modernize etmesini istediğinizde (veya doğrudan legacy-scan komutunu çalıştırdığınızda) şu şekilde çalışır:
- Deterministik yerel tarama: HTML, CSS, JavaScript/TypeScript, çerçeveye özgü bileşenler ve
package.jsondosyaları; Soyut Söz Dizimi Ağacı (AST), DOM ve CSS ayrıştırıcıları kullanılarak yerel olarak hızlıca taranır. Bu işlem için LLM çağrısı yapılmaz veya jeton maliyeti oluşmaz. - Eski kural kataloğu: Her çalıştırmada çok fazla öğeyi işaretleyen bir tarayıcı yok sayılır. Aday kuralları, yaklaşık 45.000 açık kaynak kod deposunda test ettik. Bu depoları ikiye böldük: Kurallar, kural yazma yarısında yazılıp ayarlandı ve görünmeyen, ayrı tutulan yarıda değerlendirildi. Eski kod karşılığı olmayan özellikleri atlayarak ve gerçek bir getirisi olmayan, yalnızca söz dizimi değişikliklerini (çalışan
+veya~kardeş seçicileri:has()olarak yeniden yazmak gibi) kullanımdan kaldırarak, sakladığımızdan daha fazla kural adayını attık. Bir kuralın varsayılan olarak gönderilmesi için görünmeyen kodda en az %80 statik eşleştirici hassasiyetine ve %90 doğrulama sonrası hassasiyete ulaşması gerekir. - Bağlama duyarlı yanlış pozitif filtreleme: Her kural eşleşmesi, açık
keepWhen/dropWhenrubriklerle birlikte gelir. Bu, temsilciye çevreleyen kodu değerlendirmesini ve bulgularını sunmadan önce kasıtlı yedekleri, CSS@supportskorumalarını veya benzerlerini silmesini söyler. - Yüksek güvenilirlikli eski kalıplara göre kapsam belirlenir (ve kapsam genişletilir):
legacy-scan, eski kodun yanlış pozitifler olmadan kesin olarak tespit edilebildiği yaklaşık 200 kılavuzumuzun alt kümesini (yaklaşık %20) kontrol eder ve bu kapsamı zaman içinde genişletiriz. Kataloğun geri kalanı için temsilciniz, siz oluştururken kılavuzları arar ve alır.
Modernizasyon iş akışını çağırma
Modern Web Rehberi ile kodu modernize etmek için 1.0 veya daha yeni bir sürüm gerekir. npm veya temsilcinizin eklenti pazarını kullanarak yükleyin ya da güncelleyin:
# 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
Modernizasyon iş akışı, temel beceri tanımının bir parçası olduğundan, temsilcinizden bir depo veya klasörde "eski kalıpları" kontrol etmesini ya da "modernize etmesini" isteyerek tarayıcıyı doğal dille tetikleyebilirsiniz.
Not: Tek bir bileşenin adlandırılması, normal bir kılavuz araması gerçekleştirir.
Örnek olarak, tüm depoyu taramak için aşağıdaki istemi kullanabilirsiniz:
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.
Belirli bir klasörü de işaret edebilirsiniz:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
Şu anda terminalinizde legacy-scan aracını manuel olarak çalıştırabilirsiniz ancak otomatik CI/CD ardışık düzen entegrasyonları henüz geliştirme aşamasındadır.
Yakalanıp düzeltilen örnek kalıplar
Uygun kurallar, dört alandaki yaygın eski anti-kalıpları hedefler: Formlar ve kullanıcı arayüzü, iletişim kutuları ve kontroller, CSS düzeni, tipografi ve görsel tasarım ve Güvenlik. Aşağıdaki tabloda eski kalıplara ve bunların modern alternatiflerine örnekler verilmiştir:
Kod dönüştürme örnekleri
İstendiğinde kodlama temsilciniz, modernizasyon iş akışıyla eski antipattern'leri modern olanlara dönüştürebilir. Aşağıda birkaç örnek verilmiştir:
Otomatik olarak büyüyen <textarea> öğeleri
Her input etkinliğinde scrollHeight ölçen eski JavaScript, düzen karmaşasına neden oluyor. Bu durum, özellikle Interaction to Next Paint (INP) ile ilgili performans sorunlarına neden olabilir. Temsilciniz, modernizasyon iş akışını
kullanarak bu sorunu düzeltebilir:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
Bunun için artık JavaScript kullanmanız gerekmiyor. Modernizasyon iş akışı, temsilcinizi CSS ile değiştirmesi için yönlendirir:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
Bildirime dayalı popover'lar
JavaScript etkinlik işleyicileri kullanan özel kalıcı ve pop-up mantığı, standart HTML özellikleriyle değiştirilebilir:
<!-- 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 için güvenli giriş gönderimi
Korumasız Enter tuşu dinleyicileri, kullanıcılar Japonca, Çince veya Korece giriş yöntemi düzenleyicilerinde (IME) yazı yazarken mesaj gönderimini erken tetikler.
Temsilciniz, oluşturma durumu korumaları ekler:
// 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();
}
});
İşleyiş şekli: Dört adımlı modernizasyon iş akışı
Mevcut bir uygulamadaki çalışan kodu yeniden düzenlemek güven gerektirir. Kimse otomatik kayıp veya küçük gerilemeler istemez. Bu nedenle --fix işareti de yoktur: Basit görünen modernizasyonlar bile genellikle katmanlar arası yeniden düzenlemelerdir (ör. zorunlu bir JS dinleyicisini veya npm paketini silip davranışı HTML ve CSS'ye taşıma) ve küçük davranış ve tarayıcı desteği sorunları içerir.
Bunun yerine, modernizasyon iş akışı, kodlama temsilcinizle dört adımlı bir döngü çalıştırır:
- Tarama (
legacy-scan): Temsilci, dosyaları alakalı alt dizeler için önceden tarayannpx modern-web-guidance legacy-scan <path> --jsonaracını çalıştırır. Böylece yalnızca aday dosyalarda ve kurallarda AST, CSS ve HTML ayrıştırıcılarını etkinleştirir. Bir bulgu bu aşamaya gelirse yanlış pozitif olmama olasılığı zaten yüksektir (yaklaşık %92). Her eşleşmede temsilci için bir doğrulama kontrol listesi bulunur. - Bağlamsal doğrulama (
keepWhen/dropWhen): Kodlama temsilcisi, depoyu açtığı için her eşleşmeyi çevreleyen kodu ilgili kuralın doğrulama ölçütüne göre inceler. BirscrollHeightokuma işlemi,<textarea>hilesi yerine sanallaştırılmış kaydırmanın bir parçasıysa veya bir@supportskontrolü özelliği zaten koruyorsa bulgu sessizce silinir. - Rapor: Temsilci, doğrulanmış bulguları özetler (
legacy-scan, deterministik kurallara sahip kılavuzların alt kümesini ve düzenleme yapmadan önce bir planı incelemek istediyseniz modernizasyon planını kapsar). - Kılavuz alma, yeniden düzenleme ve test doğrulama: Modernizasyon istendiğinde temsilci, uygun kılavuzu almak için
npx modern-web-guidance retrieve <guide-id>aracını çalıştırır. Kılavuzun Baseline uyumluluk kalıplarına göre kodun yeniden düzenlenmesini sağlar ve sorunun çözüldüğünü doğrulamak için projenin test paketiyle birlikte değiştirilen dosyalardalegacy-scan <path>aracını yeniden çalıştırır.
Deneyin
Terminalde tek seferlik bir legacy-scan çalıştırırken veya kodlama temsilcinizden eski bir modülü modernize etmesini isterken modernizasyon iş akışı, geleneksel linter'ların gürültüsü olmadan eski web platformu borcunu ödemenize yardımcı olur.
Statik kod modernizasyonundan canlı tarayıcı doğrulaması, karşılaştırma ve hata ayıklamaya geçmek istediğinizde Modern Web Rehberi'ni ajanlar için Chrome Geliştirici Araçları ile birlikte kullanın.