मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर · पाठ

केंद्रीकृत रूटिंग रणनीति

समझिए कि एकल होस्ट ऐप्लिकेशन सभी एकीकृत माइक्रो फ़्रंटएंड के लिए रूटिंग कैसे प्रबंधित कर सकता है।

पाठ 1, कुल 4 में से11 चरण

केंद्रीकृत रूटिंग रणनीति, CoddyKit पर मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

केंद्रीकृत रूटिंग का परिचय

माइक्रो फ्रंटएंड में केंद्रीकृत रूटिंग रणनीति के पाठ में आपका स्वागत है! बड़े अनुप्रयोग के विभिन्न भागों में नेविगेशन प्रबंधित करने के लिए यह तरीका अत्यंत महत्वपूर्ण है।

हम जानेंगे कि एकल 'होस्ट' अनुप्रयोग सभी रूटिंग निर्णयों का नियंत्रण कैसे ले सकता है और एकसमान उपयोगकर्ता अनुभव प्रदान कर सकता है।

केंद्रीकृत रूटिंग क्या है?

केंद्रीकृत रूटिंग सेटअप में मुख्य होस्ट अनुप्रयोग, जिसे शेल या कंटेनर भी कहा जाता है, पूरे अनुप्रयोग के सभी रूट निर्धारित करने और प्रबंधित करने के लिए ज़िम्मेदार होता है।

यह नेविगेशन के लिए सत्य के एकमात्र स्रोत के रूप में काम करता है।
यह तय करता है कि दिए गए URL पथ के लिए कौन-सा माइक्रो फ्रंटएंड (MFE) घटक लोड किया जाना चाहिए।
रिमोट MFE सामान्यतः अपने शीर्ष-स्तरीय रूट प्रबंधित नहीं करते।

होस्ट की रूटिंग भूमिका

अपने होस्ट अनुप्रयोग की कल्पना यातायात नियंत्रक के रूप में कीजिए। जब उपयोगकर्ता किसी URL पर जाता है, तो होस्ट उसे रोकता है, अपनी रूटिंग तालिका देखता है और अनुरोध को उपयुक्त माइक्रो फ्रंटएंड तक भेजता है।

वैश्विक रूट निर्धारित करने के लिए होस्ट अक्सर किसी रूटिंग लाइब्रेरी, जैसे React अनुप्रयोगों के लिए React Router, का उपयोग करता है।

होस्ट राउटर का अवधारणात्मक सेटअप

यह लोकप्रिय रूटिंग लाइब्रेरी का उपयोग करके होस्ट के रूटिंग कॉन्फ़िगरेशन का एक सरल रूप है। ध्यान दें कि अलग-अलग पथों को विभिन्न माइक्रो फ्रंटएंड के घटकों से कैसे जोड़ा गया है।

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Imagine these are dynamically loaded MFE components
const ProductMFE = React.lazy(() => import('product_app/ProductPage'));
const CartMFE = React.lazy(() => import('cart_app/CartPage'));
const UserProfileMFE = React.lazy(() => import('user_app/ProfilePage'));

const App = () => (
  <Router>
    <Switch>
      <Route path="/products" component={ProductMFE} />
      <Route path="/cart" component={CartMFE} />
      <Route path="/profile" component={UserProfileMFE} />
      <Route path="/" component={HomePage} exact />
    </Switch>
  </Router>
);

export default App;

MFE को गतिशील रूप से लोड करना

MFE को कुशलतापूर्वक लोड करने के लिए होस्ट सामान्यतः गतिशील आयात का उपयोग करता है। इसका अर्थ है कि MFE का कोड मुख्य अनुप्रयोग के लोड होते समय पहले से प्राप्त और लोड नहीं किया जाता, बल्कि संबंधित रूट सक्रिय होने पर ही लोड होता है।

इससे प्रारंभिक पृष्ठ लोड होने का समय कम होता है, क्योंकि उपयोगकर्ता केवल आवश्यक कोड डाउनलोड करते हैं।

कोड: गतिशील MFE आयात

यह अंश दिखाता है कि React.lazy() को Suspense के साथ मिलाने पर गतिशील लोडिंग कैसे सक्षम होती है और MFE घटक प्राप्त किए जाने के दौरान एक वैकल्पिक सामग्री कैसे दिखाई जाती है।

import React, { Suspense } from 'react';

// Dynamically import a remote component
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

const HostComponent = () => (
  <div>
    <h1>My Host App</h1>
    <Suspense fallback={<div>Loading Remote Button...</div>}>
      <RemoteButton label="Click Me!" />
    </Suspense>
  </div>
);

export default HostComponent;

केंद्रीकृत रूटिंग के लाभ

केंद्रीकृत रूटिंग रणनीति अपनाने से कई महत्वपूर्ण लाभ मिलते हैं:

एकसमान उपयोगकर्ता अनुभव: पूरे अनुप्रयोग में नेविगेशन के पैटर्न और URL एकसमान रहते हैं।
सरल वैश्विक नेविगेशन: एकल, सुसंगत नेविगेशन बार या मेन्यू लागू करना आसान होता है।
होस्ट का नियंत्रण: होस्ट का इस पर पूरा नियंत्रण रहता है कि कौन-से MFE और कब लोड किए जाएँ।
आसान विश्लेषण: केंद्रीकृत रूटिंग से पूरे अनुप्रयोग में उपयोगकर्ता की यात्रा पर नज़र रखना आसान हो सकता है।

विचारणीय बातें और चुनौतियाँ

लाभकारी होने के बावजूद, केंद्रीकृत रूटिंग से जुड़ी कुछ बातें ध्यान में रखनी चाहिए:

होस्ट पर निर्भरता: होस्ट एक महत्वपूर्ण निर्भरता बन जाता है; उसके विफल होने पर पूरी रूटिंग प्रणाली बंद हो जाती है।
रूटिंग तर्क की विस्तार-क्षमता: बहुत बड़े अनुप्रयोग में होस्ट का रूटिंग कॉन्फ़िगरेशन जटिल और प्रबंधित करना कठिन हो सकता है।
MFE की स्वायत्तता: रिमोट MFE का अपने सार्वजनिक URL पर नियंत्रण कम हो जाता है।
संस्करण प्रबंधन: होस्ट में रूट बदलने पर MFE की तैनाती के साथ समन्वय करना पड़ सकता है।

केंद्रीकृत रूटिंग का उपयोग कब करें

यह रणनीति अक्सर उन परिस्थितियों के लिए आदर्श होती है, जहाँ:

एक ही टीम या संस्था पूरे अनुप्रयोग ढाँचे और नेविगेशन का स्वामित्व रखती है।
अनुप्रयोग में स्पष्ट पदानुक्रम और अपेक्षाकृत स्थिर शीर्ष-स्तरीय मार्ग होते हैं।
सभी MFE में एक जैसा रूप-रंग और अनुभव उच्च प्राथमिकता होता है।
अनुप्रयोग के विभिन्न भागों के बीच घनिष्ठ एकीकरण और साझा संदर्भ की आवश्यकता होती है।

केंद्रीकृत मार्ग-निर्धारण रणनीति की जाँच

Micro Frontends में केंद्रीकृत मार्ग-निर्धारण रणनीति की प्रमुख विशेषताएँ या लाभ निम्नलिखित में से कौन-से हैं?

इंटरैक्टिव पाठ में इसका उत्तर दें

केंद्रीकृत मार्ग-निर्धारण का पुनरावलोकन

इस पाठ में हमने केंद्रीकृत मार्ग-निर्धारण रणनीति का अध्ययन किया। हमने सीखा कि होस्ट अनुप्रयोग सभी शीर्ष-स्तरीय मार्गों को नियंत्रित करता है और आवश्यकता के अनुसार Micro Frontends को गतिशील रूप से लोड करता है।

यह तरीका एकीकृत उपयोगकर्ता अनुभव और सरल वैश्विक नेविगेशन जैसे लाभ देता है, हालाँकि इससे होस्ट पर मजबूत निर्भरता उत्पन्न होती है। प्रभावी Micro Frontend आर्किटेक्चर के लिए यह समझना महत्वपूर्ण है कि इस रणनीति को कब अपनाना चाहिए।

शुरुआत निःशुल्क

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 12
पाठ: 48

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “केंद्रीकृत रूटिंग रणनीति” पाठ निःशुल्क है?

हाँ—“केंद्रीकृत रूटिंग रणनीति” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“केंद्रीकृत रूटिंग रणनीति” में मैं क्या सीखूँगा?

समझिए कि एकल होस्ट ऐप्लिकेशन सभी एकीकृत माइक्रो फ़्रंटएंड के लिए रूटिंग कैसे प्रबंधित कर सकता है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“केंद्रीकृत रूटिंग रणनीति” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← मॉड्यूल फ़ेडरेशन के साथ माइक्रो फ्रंटएंड आर्किटेक्चर पर वापस जाएँ