माइक्रो फ़्रंटएंड आर्किटेक्चर
ऐप को स्वतंत्र रूप से तैनात किए जा सकने वाले हिस्सों में बाँटें
माइक्रो फ़्रंटएंड आर्किटेक्चर, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
माइक्रो फ़्रंटएंड क्या हैं
माइक्रो फ़्रंटएंड माइक्रोसर्विस की अवधारणा को UI तक विस्तारित करते हैं: एक बड़े वेब ऐप को स्वतंत्र रूप से विकसित, परीक्षित और परिनियोजित किए जा सकने वाले हिस्सों में बाँटा जाता है। प्रत्येक हिस्से का स्वामित्व अलग टीम के पास होता है और रनटाइम पर सभी हिस्से मिलकर एक अनुभव बनाते हैं।
वे किस समस्या का समाधान करते हैं
एक बड़ा Angular ऐप ("मोनोलिथ फ़्रंटएंड") हर टीम को एक ही रिलीज़ प्रक्रिया, एक ही बिल्ड और एक ही परिनियोजन से जोड़ देता है। टीमों के बढ़ने पर यह सभी की गति धीमी कर देता है। माइक्रो फ़्रंटएंड टीमों को अपने समय-सारणी के अनुसार रिलीज़ करने देते हैं।
स्वतंत्र रूप से परिनियोजित होने वाले हिस्से
मुख्य विशेषता स्वतंत्र परिनियोजन क्षमता है: चेकआउट टीम उत्पाद कैटलॉग को दोबारा बिल्ड या परिनियोजित किए बिना नया चेकआउट प्रवाह परिनियोजित कर सकती है। प्रत्येक रिमोट अपने अलग पाइपलाइन के पीछे एक अलग आर्टिफ़ैक्ट होता है।
होस्ट और रिमोट
वास्तुशिल्प की दृष्टि से एक होस्ट (शेल) होता है, जो एक या अधिक रिमोट लोड करता है। शेल शीर्ष-स्तरीय रूटिंग और लेआउट संभालता है; रिमोट आवश्यकता पड़ने पर लोड किए जाने वाले फ़ीचर क्षेत्र उपलब्ध कराते हैं।
// conceptually
host -> loads -> remote: catalog
-> loads -> remote: checkout
-> loads -> remote: accountसंयोजन की रणनीतियाँ
रिमोट को बिल्ड के समय, सर्वर पर (SSI/एज), या ब्राउज़र में रनटाइम पर जोड़ा जा सकता है। Module Federation के साथ रनटाइम संयोजन Angular के लिए सबसे सामान्य है, क्योंकि इससे स्वतंत्र परिनियोजन बना रहता है।
एक वाक्य में Module Federation
Module Federation एक बिल्ड किए गए ऐप को ऐसे मॉड्यूल उपलब्ध कराने देता है जिन्हें दूसरा बिल्ड किया गया ऐप रनटाइम पर HTTP के माध्यम से लोड करता है। यह सामान्य लाइब्रेरी साझा करता है, इसलिए वे दोहराई नहीं जातीं। अधिकांश Angular माइक्रो फ़्रंटएंड इसी इंजन पर आधारित होते हैं।
टीम की स्वायत्तता और सीमाएँ
प्रत्येक माइक्रो फ़्रंटएंड को किसी स्पष्ट व्यावसायिक क्षेत्र, जैसे कैटलॉग, चेकआउट या खाता, से जुड़ा होना चाहिए। स्पष्ट डोमेन सीमाएँ टीमों के बीच निर्भरता को न्यूनतम करती हैं, और यही इसका मुख्य उद्देश्य है। साझा सरोकार, जैसे प्रमाणीकरण और डिज़ाइन सिस्टम, स्पष्ट अनुबंध बन जाते हैं।
लागत
माइक्रो फ़्रंटएंड वास्तविक जटिलता जोड़ते हैं: रिमोट के बीच संस्करणों का असंतुलन, गलत कॉन्फ़िगरेशन पर दोहराई गई निर्भरताएँ, सीमाओं के आर-पार कठिन डीबगिंग और रनटाइम पर लोडिंग विफलताएँ। इन्हें तभी अपनाएँ जब टीम का आकार इस अतिरिक्त बोझ को उचित ठहराता हो।
इनका उपयोग कब न करें
छोटी टीम या एकल उत्पाद के लिए, सुचारु रूप से संरचित मोनोलिथ और धीमे लोड होने वाले routes अधिक सरल और तेज़ होते हैं। माइक्रो फ़्रंटएंड तब लाभ देते हैं जब कई टीमों को एक ही ऐप में स्वतंत्र रूप से परिनियोजन करना हो।
साझा रूप-रंग और अनुभव
बिखरे हुए UI से बचने के लिए टीमें एक डिज़ाइन सिस्टम लाइब्रेरी और वैश्विक शैलियाँ साझा करती हैं। एकरूपता सोचा-समझा अनुबंध है, संयोग नहीं, क्योंकि प्रत्येक रिमोट अलग से बनाया जाता है।
Angular से जुड़ी विशेष बातें
Angular रिमोट को रनटाइम पर Angular फ़्रेमवर्क की एक ही प्रति साझा करनी चाहिए; Angular के दो संस्करण लोड करने से निर्भरता इंजेक्शन टूट जाता है और बंडल अनावश्यक रूप से बड़ा हो जाता है। Native Federation जैसे टूल इस साझाकरण को आपके लिए संभालते हैं।
त्वरित जाँच
माइक्रो फ़्रंटएंड का मुख्य लाभ क्या है?
पुनरावलोकन
माइक्रो फ़्रंटएंड एक बड़े ऐप को स्वतंत्र रूप से परिनियोजित किए जा सकने वाले रिमोट में बाँटते हैं, जिन्हें होस्ट शेल लोड करता है और जो व्यावसायिक क्षेत्रों से जुड़े होते हैं। Angular में Module Federation के माध्यम से रनटाइम संयोजन मानक है और इसमें फ़्रेमवर्क की एक ही प्रति साझा करनी होती है। ये टीमों के स्तर पर मौजूद निर्भरता की समस्या हल करते हैं, लेकिन वास्तविक संचालन लागत जोड़ते हैं।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “माइक्रो फ़्रंटएंड आर्किटेक्चर” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “माइक्रो फ़्रंटएंड आर्किटेक्चर” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“माइक्रो फ़्रंटएंड आर्किटेक्चर” में मैं क्या सीखूँगा?
ऐप को स्वतंत्र रूप से तैनात किए जा सकने वाले हिस्सों में बाँटें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“माइक्रो फ़्रंटएंड आर्किटेक्चर” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- माइक्रो फ़्रंटएंड आर्किटेक्चर
- Angular के लिए नेटिव फ़ेडरेशन
- निर्भरताएँ साझा करना
- रिमोट मॉड्यूल लोड करना