मैं आपके jQuery या लेगेसी रिएक्ट फ्रंट एंड को आधुनिक रिएक्ट या Next.js में, पेज दर पेज स्थानांतरित करूँगा।

कुछ उत्पाद काम करते हैं और पैसा कमाते हैं, लेकिन उनका फ्रंट एंड बदलना मुश्किल हो गया है: टेम्प्लेट में फैला jQuery, कई साल पहले के रिएक्ट क्लास घटक, या एक Next.js ऐप अभी भी पेज राउटर पर है। एक पूर्ण पुनर्लेखन उत्पाद को महीनों तक फ्रीज कर देता है। मैं दूसरा काम करता हूं: पुराना और नया कोड साथ-साथ चलता है, और पेज एक-एक करके स्थानांतरित होते हैं, इसलिए आपके उपयोगकर्ताओं के लिए कभी भी कोई बड़ा स्विच-ओवर दिन नहीं होता है।

मैंने NDA के तहत एक पिछले प्रोजेक्ट पर बिल्कुल यही किया: एक jQuery फ्रंट एंड को रिएक्ट पेज दर पेज में स्थानांतरित किया गया जबकि उत्पाद लाइव रहा।

स्टार्टर आपको योजना देता है: मैं पुराने फ्रंट एंड को पढ़ता हूं, उसके पेजों और साझा टुकड़ों का मानचित्रण करता हूं, जोखिमों को सूचीबद्ध करता हूं, और दृष्टिकोण के एक कार्यशील नमूने के रूप में एक छोटा पेज माइग्रेट करता हूं। स्टैंडर्ड तीन पेज या स्क्रीन तक स्थानांतरित करता है। एडवांस्ड आठ तक स्थानांतरित करता है, उन्हें आवश्यक साझा घटक बनाता है, और उनके डेटा के लिए टाइपस्क्रिप्ट प्रकारों और मुख्य प्रवाह के लिए परीक्षणों के साथ उन्हें कवर करता है।

क्या रहता है: आपका बैकएंड, आपके यूआरएल और उपयोगकर्ता जिस व्यवहार को जानते हैं। क्या बदलता है: कोड को कैसे व्यवस्थित किया जाता है, ताकि अगली सुविधा एक बार, एक जगह पर लिखी जाए। डिलीवरी के 14 दिनों के बाद, मैं किसी भी ऐसी चीज़ को ठीक करता हूं जो हमने सहमत नहीं की थी, निःशुल्क।

पेज का क्रम और योजना ऑर्डर चैट में, बिना कॉल के सहमत होती है। प्रत्येक माइग्रेट किया गया पेज अपने आप में शिप होता है, और आपको हर कार्य दिवस पर एक लिखित स्थिति नोट मिलता है।

अपने प्रोजेक्ट को पूरा करने के चरण
1. पुराने फ्रंट एंड का मानचित्रण करें - मैं टेम्प्लेट, स्क्रिप्ट और घटकों से गुजरता हूं, और पृष्ठों, साझा भागों और किसी भी जोखिम भरी चीज़, जैसे वैश्विक स्थिति या इनलाइन स्क्रिप्ट को सूचीबद्ध करता हूं।
2. क्रम पर सहमत हों - आपको एक लिखित योजना मिलती है: कौन सा पृष्ठ पहले आता है, उसके साथ क्या चलता है, और पुराना और नया कोड दोनों के मौजूद होने पर उत्पाद को कैसे साझा करते हैं।
3. ब्रिज - नया React या Next.js कोड पुराने कोड के बगल में सेट किया गया है, जिसमें रूटिंग है जो प्रत्येक पृष्ठ को उस पक्ष को भेजता है जिसके पास वह है।
4. पृष्ठों को एक-एक करके ले जाएं - प्रत्येक पृष्ठ को फिर से बनाया जाता है, पुराने संस्करण से तुलना की जाती है और अपने आप स्विच किया जाता है, ताकि एक समस्या एक पृष्ठ को प्रभावित करे, उत्पाद को नहीं।
5. हैंडओवर - माइग्रेट किए गए पृष्ठ, जो बचा है उसके लिए अद्यतन योजना, और अगले पृष्ठों के लिए पालन किए जाने वाले पैटर्न पर एक छोटा नोट।