माइक्रो-फ्रंटेंड और डिज़ाइन सिस्टम ड्रिफ्ट: सभी टीमों में यूआई को सुसंगत रखना
माइक्रो-फ़्रंटएंड का उपयोग करने वाली टीमें एक सुसंगत यूआई कैसे रखती हैं: संस्करणित पैकेज के रूप में साझा टोकन और घटक, CSS अलगाव, अपग्रेड नीतियां और विज़ुअल रिग्रेशन जांच।
कोर टेकअवे
माइक्रो-फ़्रंटएंड टीमों को किसी उत्पाद के कुछ हिस्सों को स्वतंत्र रूप से तैनात करने देता है, जिससे यूआई बहाव की संभावना होती है: घटकों के विभिन्न संस्करण, परस्पर विरोधी CSS और डुप्लिकेट शैलियाँ। डिज़ाइन टोकन और घटकों को संस्करणित पैकेजों के रूप में साझा करके, प्रत्येक टीम के CSS को अलग करके, अपग्रेड नीति पर सहमत होकर, और विज़ुअल रिग्रेशन परीक्षणों के साथ मतभेदों को पकड़कर निरंतरता बनाए रखें।
बहाव क्यों होता है
मार्टिन फाउलर की साइट माइक्रो-फ्रंटेंड को स्वतंत्र रूप से वितरित करने योग्य फ्रंटएंड अनुप्रयोगों के रूप में वर्णित करती है, जो एक प्रमुख लाभ के रूप में स्वतंत्र तैनाती के साथ एक बड़े संपूर्ण में बना है। वही स्वतंत्रता बहाव का कारण बनती है: टीमें अलग-अलग समय पर डिज़ाइन सिस्टम को अपग्रेड करती हैं, तेजी से आगे बढ़ने के लिए घटकों की प्रतिलिपि बनाती हैं, और CSS लिखती हैं जो पृष्ठ के अन्य हिस्सों में लीक हो जाता है। लेख यह भी चेतावनी देता है कि कुछ कार्यान्वयन डुप्लिकेट निर्भरताएँ हैं और CSS, वैश्विक और व्यापक होने के कारण, जानबूझकर अलगाव की आवश्यकता है।
सिस्टम को पैकेज के रूप में साझा करें
टोकन और घटकों को संस्करणित पैकेज के रूप में प्रकाशित करें, कॉपी-पेस्ट किए गए कोड के रूप में नहीं। एक मानक प्रारूप में टोकन, जैसे कि W3C DTCG प्रारूप, एक टीम द्वारा उपयोग किए जाने वाले प्रत्येक ढांचे के लिए बनाया जा सकता है, इसलिए एक React टीम और एक Vue टीम अभी भी समान रंग, रिक्ति और गति साझा करती है।
CSS को अलग करें
एक सुसंगत दृष्टिकोण के साथ टीमों के बीच शैलियों को लीक होने से रोकें: वेब घटकों के लिए BEM, CSS मॉड्यूल, CSS-in-JS, या शैडो DOM जैसी नामकरण परंपराएँ। पूरे उत्पाद और उसके लिए लिंट के लिए एक कन्वेंशन चुनें।
एक उन्नयन नीति
इस बात पर सहमत हों कि कोई टीम कितनी पीछे रह सकती है, उदाहरण के लिए एक से अधिक प्रमुख संस्करण नहीं, और सिमेंटिक वर्जनिंग का उपयोग करें ताकि टीमों को पता चले कि परिवर्तन कब टूट रहे हैं। ट्रैक करें कि प्रत्येक माइक्रो-फ़्रंटएंड साझा डैशबोर्ड में किस संस्करण का उपयोग करता है।
बहाव को स्वचालित रूप से पकड़ें
कुंजी स्क्रीन पर दृश्य प्रतिगमन परीक्षण, लिंट नियम जो कच्चे रंग और रिक्ति मानों को रोकते हैं, और साझा सतहों (हेडर, नेविगेशन, चेकआउट) पर डिज़ाइन समीक्षाएं उपयोगकर्ताओं को देखने से पहले विसंगतियों को पकड़ती हैं।
याद रखने योग्य कुंजी Principle
- स्वतंत्र परिनियोजन यूआई बहाव की संभावना बनाता है
- टोकन और घटकों को संस्करणित पैकेज के रूप में साझा करें
- एक सुसंगत दृष्टिकोण के साथ CSS को अलग करें
- अपग्रेड नीति पर सहमति दें और संस्करणों को ट्रैक करें
- दृश्य प्रतिगमन परीक्षण और लिंट नियमों का उपयोग करें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Micro Frontends — martinfowler.com
- Design Tokens Community Group — designtokens.org
- Semantic Versioning 2.0.0 — semver.org