ज़्यादातर वेब डेवलपमेंट, शुरुआत से नहीं होता. यह उन मौजूदा कोड बेस में होता है जिनमें सालों से लेगसी वर्कअराउंड, पॉलीफ़िल, और JavaScript यूटिलिटी (ऑटोसाइज़, कस्टम चेकबॉक्स स्टाइलिंग हैक, scrollHeight लिसनर) इकट्ठा हो गई हैं. ये ऐसी चीज़ें हैं जिन्हें ब्राउज़र अब नेटिव तौर पर हैंडल करता है. लेकिन समस्या यह है कि पुराना कोड काम करना बंद नहीं करता. यह काम करता है, इसलिए कोई भी गड़बड़ी की शिकायत नहीं करता. काम कर रहे कोड को रीफ़ैक्टर करने के लिए भी भरोसे की ज़रूरत होती है, भले ही वह पुराना हो. इसलिए, डेवलपर ऐसा करने से कतराते हैं.
वहीं दूसरी ओर, वेब की आधुनिक सुविधाओं का इस्तेमाल करने के लिए पुराने कोड को रीफ़ैक्टर न करने से, बंडल के साइज़, पेज के रिस्पॉन्सिव होने, और सुलभता पर असर पड़ेगा. इससे भी बुरी बात यह है कि जब इन प्रोजेक्ट में कोडिंग एजेंट का इस्तेमाल किया जाता है, तो वे अपने ट्रेनिंग डेटा से पुराने पैटर्न के साथ-साथ, 2015 के आस-पास के कन्वेंशन भी कॉपी कर लेते हैं.
कोई नया ऐप्लिकेशन बनाते समय, मॉडर्न वेब गाइडेंस आपके एजेंट को आधुनिक बेसलाइन सुविधाओं की ओर ले जाता है. मौजूदा कोड के लिए, मॉडर्न वेब गाइडेंस 1.0 में एक मॉडर्नाइज़ेशन वर्कफ़्लो जोड़ा गया है. यह वर्कफ़्लो, आपके प्रोजेक्ट को स्कैन करके लेगसी पैटर्न का पता लगाता है और आपके एजेंट को उन्हें अपग्रेड करने में मदद करता है.
मॉडर्नाइज़ेशन वर्कफ़्लो क्या करता है
जब अपने एजेंट से किसी प्रोजेक्ट को आधुनिक बनाने के लिए कहा जाता है (या सीधे legacy-scan कमांड को चलाकर), तो यह इस तरह काम करता है:
- डिटरमिनिस्टिक लोकल स्कैनिंग: एचटीएमएल, सीएसएस, JavaScript/TypeScript, फ़्रेमवर्क के हिसाब से कॉम्पोनेंट, और
package.jsonफ़ाइलों को एब्स्ट्रैक्ट सिंटैक्स ट्री (एएसटी), डीओएम, और सीएसएस पार्सर की मदद से तेज़ी से स्कैन किया जाता है. इसके लिए, एलएलएम कॉल या टोकन की ज़रूरत नहीं होती. - लेगसी रूल कैटलॉग: ऐसा स्कैनर जो हर बार स्कैन करने पर बहुत सारी चीज़ों को फ़्लैग करता है, उसे अनदेखा कर दिया जाता है. हमने करीब 45,000 ओपन-सोर्स रिपॉज़िटरी में, कैंडिडेट के नियमों की जांच की. इन्हें दो हिस्सों में बांटा गया: नियमों को लिखने वाले हिस्से में नियम लिखे गए और उन्हें ट्यून किया गया. साथ ही, उन्हें अनदेखे हिस्से में ग्रेड दिया गया. हमने जितने नियम रखे, उससे ज़्यादा को खारिज कर दिया. हमने ऐसी सुविधाओं को छोड़ दिया जिनका कोई लेगसी कोड नहीं है. साथ ही, हमने सिर्फ़ सिंटैक्स वाले ऐसे बदलावों को हटा दिया जिनसे कोई फ़ायदा नहीं होता. जैसे, काम करने वाले
+या~सिबलिंग सिलेक्टर को:has()में फिर से लिखना. डिफ़ॉल्ट रूप से शिप करने के लिए, किसी नियम को अनदेखे कोड पर कम से कम 80% स्टैटिक मैचर सटीक और 90% पुष्टि के बाद सटीक होना चाहिए. - कॉन्टेक्स्ट-अवेयर फ़ॉल्स-पॉज़िटिव फ़िल्टरिंग: हर नियम के मैच होने पर, साफ़ तौर पर
keepWhen/dropWhenरूब्रिक मिलते हैं. इससे एजेंट को आस-पास के कोड का आकलन करने और जान-बूझकर किए गए फ़ॉलबैक, सीएसएस@supportsगार्ड या मिलते-जुलते कोड को खारिज करने का निर्देश मिलता है. इसके बाद ही, एजेंट अपने नतीजे दिखाता है. - यह टूल, लेगसी पैटर्न के सबसे भरोसेमंद सबसेट पर फ़ोकस करता है (और इस सबसेट का दायरा लगातार बढ़ रहा है):
legacy-scan, हमारी करीब 200 गाइड के सबसेट (करीब 20%) की जांच करता है. इस सबसेट में, लेगसी कोड का पता बिना किसी गलत पॉज़िटिव के लगाया जा सकता है. हम समय के साथ इस कवरेज को बढ़ा रहे हैं. कैटलॉग के बाकी हिस्से के लिए, आपका एजेंट गाइड खोजता है और उन्हें वापस लाता है.
आधुनिक बनाने वाले वर्कफ़्लो को शुरू करने का तरीका
मॉडर्न वेब गाइडेंस की मदद से कोड को आधुनिक बनाने के लिए, वर्शन 1.0 या इसके बाद का वर्शन होना ज़रूरी है. इसे npm या अपने एजेंट के प्लगिन मार्केटप्लेस से इंस्टॉल या अपडेट करें:
# 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
मॉडर्नाइज़ेशन वर्कफ़्लो, मुख्य स्किल की परिभाषा का हिस्सा है. इसलिए, स्कैनर को नैचुरल लैंग्वेज का इस्तेमाल करके ट्रिगर किया जा सकता है. इसके लिए, अपने एजेंट से किसी रिपॉज़िटरी या फ़ोल्डर में "लेगसी पैटर्न" या "मॉडर्नाइज़" करने के लिए कहें.
ध्यान दें: सिर्फ़ एक कॉम्पोनेंट का नाम देने पर, सामान्य गाइड लुकअप की सुविधा काम करेगी.
उदाहरण के लिए, पूरी रिपॉज़िटरी को स्कैन करने के लिए, यहां एक प्रॉम्प्ट दिया गया है:
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.
इसे किसी खास फ़ोल्डर पर भी पॉइंट किया जा सकता है:
Check src/components/forms for legacy web patterns that can be refactored to modern Baseline features.
फ़िलहाल, अपने टर्मिनल में legacy-scan को मैन्युअल तरीके से चलाया जा सकता है. हालांकि, ऑटोमेटेड सीआई/सीडी पाइपलाइन इंटिग्रेशन पर अभी काम चल रहा है.
यह टूल, इस तरह के पैटर्न का पता लगाता है और उन्हें ठीक करता है
ज़रूरी शर्तें पूरी करने वाले नियम, चार डोमेन में आम तौर पर इस्तेमाल होने वाले लेगसी ऐंटीपैटर्न को टारगेट करते हैं: फ़ॉर्म और यूज़र इंटरफ़ेस (यूआई), डायलॉग और कंट्रोल, सीएसएस लेआउट, टाइपोग्राफ़ी, और विज़ुअल डिज़ाइन, और सुरक्षा. यहां दी गई टेबल में, लेगसी पैटर्न और उनके आधुनिक विकल्पों के उदाहरण दिए गए हैं:
कोड ट्रांसफ़ॉर्मेशन के उदाहरण
प्रॉम्प्ट मिलने पर, आपका कोडिंग एजेंट, मॉडर्नाइज़ेशन वर्कफ़्लो की मदद से, लेगसी ऐंटीपैटर्न को मॉडर्न ऐंटीपैटर्न में बदल सकता है. यहां कुछ उदाहरण दिए गए हैं:
अपने-आप बढ़ने वाले <textarea> एलिमेंट
हर input इवेंट पर scrollHeight को मेज़र करने वाला लेगसी JavaScript, लेआउट थ्रैशिंग को मजबूर करता है. इससे परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं. खास तौर पर, पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) से जुड़ी समस्याएं. मॉडर्नाइज़ेशन वर्कफ़्लो का इस्तेमाल करके, आपका एजेंट इसे ठीक कर सकता है:
// Before: Imperative layout recalculation on every keystroke
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
});
आज के समय में, इसके लिए JavaScript की ज़रूरत नहीं है. मॉडर्नाइज़ेशन वर्कफ़्लो, आपके एजेंट को इसे सीएसएस से बदलने के लिए गाइड करता है:
/* After: Native declarative field sizing */
textarea {
field-sizing: content;
min-block-size: 3lh;
max-block-size: 15lh;
}
डिक्लेरेटिव पॉपओवर
JavaScript इवेंट लिसनर का इस्तेमाल करने वाले कस्टम मोडल और पॉप-अप लॉजिक को स्टैंडर्ड एचटीएमएल एट्रिब्यूट से बदला जा सकता है:
<!-- 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>
आईएमई-सेफ़ एंटर सबमिशन
जब उपयोगकर्ता जैपनीज़, चाइनीज़ या कोरियन इनपुट पद्धति संपादक (आईएमई) में टाइप करते हैं, तो असुरक्षित एंटर-की लिसनर, मैसेज को समय से पहले सबमिट कर देते हैं.
आपका एजेंट, कंपोज़िशन स्टेट गार्ड जोड़ता है:
// 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();
}
});
यह कैसे काम करता है: मॉडर्नाइज़ेशन वर्कफ़्लो के चार चरण
किसी मौजूदा ऐप्लिकेशन में काम करने वाले कोड को रीफ़ैक्टर करने के लिए, भरोसे की ज़रूरत होती है. ऐसा इसलिए, क्योंकि कोई भी व्यक्ति अपने-आप होने वाली गड़बड़ियों या छोटी-मोटी समस्याओं का सामना नहीं करना चाहता. यही वजह है कि इसके लिए कोई --fix फ़्लैग नहीं है: आधुनिक बनाने के ऐसे तरीके जो आसान लगते हैं वे अक्सर क्रॉस-लेयर रीफ़ैक्टर होते हैं. जैसे, किसी ज़रूरी JS लिसनर या npm पैकेज को मिटाना और उसके व्यवहार को एचटीएमएल और सीएसएस में ले जाना. इसमें व्यवहार और ब्राउज़र के साथ काम करने से जुड़ी चुनौतियां होती हैं.
इसके बजाय, मॉडर्नाइज़ेशन वर्कफ़्लो आपके कोडिंग एजेंट के साथ चार चरणों वाला लूप चलाता है:
- स्कैन (
legacy-scan): एजेंटnpx modern-web-guidance legacy-scan <path> --jsonको चलाता है. यह काम की सबस्ट्रिंग के लिए, फ़ाइलों की पहले से जांच करता है. इससे, यह सिर्फ़ उन फ़ाइलों और नियमों पर एएसटी, सीएसएस, और एचटीएमएल पार्सर को चलाता है जो काम के होते हैं. अगर कोई नतीजा इस चरण तक पहुंचता है, तो इस बात की काफ़ी संभावना (करीब 92%) होती है कि वह फ़ॉल्स पॉज़िटिव नहीं है. हर मैच में, एजेंट के लिए पुष्टि करने की चेकलिस्ट शामिल होती है. - कॉन्टेक्स्ट के हिसाब से पुष्टि करना (
keepWhen/dropWhen): कोडिंग एजेंट के पास रिपॉज़िटरी खुली होती है. इसलिए, वह नियम की पुष्टि करने वाली रूब्रिक के हिसाब से, मैच होने वाले हर कोड की जांच करता है. अगरscrollHeightरीड,<textarea>हैक के बजाय वर्चुअलाइज़्ड स्क्रोलिंग का हिस्सा है या अगर@supportsजांच से प्रॉपर्टी पहले से ही सुरक्षित है, तो नतीजे को बिना किसी सूचना के हटा दिया जाता है. - रिपोर्ट: एजेंट, पुष्टि किए गए नतीजों की खास जानकारी देता है. इसमें बताया जाता है कि
legacy-scanमें डिटरमिनिस्टिक नियमों वाली गाइड का सबसेट शामिल है. साथ ही, अगर आपने बदलाव करने से पहले प्लान की समीक्षा करने के लिए कहा है, तो इसमें आधुनिक बनाने का प्लान भी शामिल है. - गाइड को वापस लाना, रीफ़ैक्टर करना, और टेस्ट की पुष्टि करना: कोड को मॉडर्न बनाने के लिए कहने पर, एजेंट सही गाइड फ़ेच करने के लिए
npx modern-web-guidance retrieve <guide-id>चलाता है. यह गाइड के बेसलाइन के साथ काम करने के पैटर्न के मुताबिक, कोड रीफ़ैक्टर को लागू करता है. साथ ही, समस्या हल होने की पुष्टि करने के लिए, प्रोजेक्ट के टेस्ट सुइट के साथ-साथ बदली गई फ़ाइलों परlegacy-scan <path>को फिर से चलाता है.
इसे आज़माएं
चाहे टर्मिनल में एक बार legacy-scan चलाना हो या अपने कोडिंग एजेंट से किसी पुराने मॉड्यूल को आधुनिक बनाने के लिए कहना हो, आधुनिक बनाने का वर्कफ़्लो आपको पुराने वेब प्लैटफ़ॉर्म के क़र्ज़ को चुकाने में मदद करता है. इसके लिए, आपको पारंपरिक लिंटर के शोर की ज़रूरत नहीं पड़ती.
अगर आपको स्टैटिक कोड को मॉडर्न बनाने के साथ-साथ, लाइव ब्राउज़र की पुष्टि करने, मानदंड तय करने, और डीबग करने की सुविधा चाहिए, तो मॉडर्न वेब गाइडेंस को एजेंट के लिए Chrome DevTools के साथ जोड़ें.