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

कस्टम संचार समाधान

विशिष्ट माइक्रो फ़्रंटएंड आवश्यकताओं के अनुरूप कस्टम संचार तंत्र डिज़ाइन और लागू कीजिए।

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

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

मानक संचार से आगे

माइक्रो फ्रंटएंड आर्किटेक्चर में अलग-अलग भागों के बीच संचार अत्यंत महत्वपूर्ण है। हमने इवेंट बस और साझा स्थिति प्रबंधन का अध्ययन किया है।

हालाँकि, कभी-कभी आपकी विशिष्ट आवश्यकताओं के लिए अधिक अनुकूलित तरीकों की ज़रूरत हो सकती है। यह पाठ कस्टम संचार समाधानों को डिज़ाइन करने और लागू करने पर केंद्रित है।

कस्टम समाधान क्यों?

आप किसी स्थापित पैटर्न के बजाय कस्टम समाधान क्यों चुनेंगे?

विशिष्ट परस्पर क्रिया: जब किसी बहुत विशेष और सीधे संपर्क की आवश्यकता हो।
प्रदर्शन: बहुत अधिक आवृत्ति या कम विलंबता वाले संचार के लिए अनुकूलन करने हेतु।
न्यूनतम अतिरिक्त भार: भारी लाइब्रेरी शामिल किए बिना सरल, तत्काल आवश्यकताओं के लिए।
घनिष्ठ युग्मन (दुर्लभ): ऐसी स्थितियों में जहाँ दो MFE जानबूझकर बहुत निकट हों और एक पैरेंट संदर्भ साझा करते हों।

सीधे कॉलबैक भेजना

एक कस्टम तरीका यह है कि होस्ट अनुप्रयोग से रिमोट अनुप्रयोग तक फ़ंक्शन (कॉलबैक) प्रॉप्स या तर्कों के रूप में सीधे भेजे जाएँ। यह तब उपयुक्त है जब कोई होस्ट घटक सीधे किसी रिमोट घटक को रेंडर करता हो और उसकी क्रियाओं पर प्रतिक्रिया देनी हो।

Module Federation आपको घटकों या डेटा की तरह ही फ़ंक्शन साझा करने की सुविधा देता है।

उदाहरण: कॉलबैक भेजना

कल्पना कीजिए कि होस्ट किसी रिमोट को 'notify' फ़ंक्शन भेजता है और रिमोट बाद में उसे कॉल करता है। यह JavaScript में इसका सरल रूप है:

function hostApp() {
  function handleNotification(message) {
    console.log(`Host received: ${message}`);
  }

  // In a real MFE, remote would be loaded
  // and `onNotify` passed as a prop.
  // For demo, we'll simulate the call.
  console.log("Host ready to receive.");
  remoteApp(handleNotification);
}

function remoteApp(onNotify) {
  console.log("Remote app started.");
  setTimeout(() => {
    onNotify("Data processed successfully!");
  }, 1000);
}

hostApp();

ब्राउज़र का postMessage API

postMessage API विंडो, iframe और Web Worker के बीच सुरक्षित क्रॉस-ओरिजिन संचार के लिए ब्राउज़र की एक शक्तिशाली सुविधा है।

यह होस्ट और एम्बेड किए गए MFE, जैसे iframe में मौजूद MFE, के बीच संदेश भेजने के लिए आदर्श है, जहाँ सुरक्षा नीतियों के कारण सीधे JavaScript एक्सेस प्रतिबंधित होता है।

उदाहरण: postMessage (अवधारणात्मक)

इस प्रकार होस्ट और रिमोट, जैसे iframe में मौजूद रिमोट, संचार करने के लिए अवधारणात्मक रूप से postMessage का उपयोग करेंगे। ध्यान दें: इसे पूरी तरह चलाने के लिए ब्राउज़र वातावरण आवश्यक है।

// Host (parent window):
// const iframe = document.getElementById('remote-mfe');
// iframe.contentWindow.postMessage('Hello from Host!', 'http://remote.com');
// window.addEventListener('message', (event) => {
//   if (event.origin === 'http://remote.com') {
//     console.log('Host received:', event.data);
//   }
// });

// Remote (inside iframe):
// window.addEventListener('message', (event) => {
//   if (event.origin === 'http://host.com') {
//     console.log('Remote received:', event.data);
//     event.source.postMessage('Hello from Remote!', event.origin);
//   }
// });

// This snippet simulates the message flow:
function simulatePostMessage() {
  console.log("Simulating postMessage...");
  const hostMessage = "Hello from Host!";
  const remoteMessage = "Hello from Remote!";

  // Host sends to Remote
  console.log(`Host sends: "${hostMessage}"`);

  // Remote receives and replies
  console.log(`Remote receives: "${hostMessage}"`);
  console.log(`Remote sends: "${remoteMessage}"`);

  // Host receives reply
  console.log(`Host receives: "${remoteMessage}"`);
}

simulatePostMessage();

साझा वैश्विक रजिस्ट्री/सेवा

विशिष्ट और सीमित वैश्विक डेटा या सेवाओं के लिए, आप एक कस्टम JavaScript ऑब्जेक्ट या क्लास बना सकते हैं और उसे Module Federation के साझा स्कोप के माध्यम से उपलब्ध करा सकते हैं।

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

उदाहरण: कस्टम साझा रजिस्ट्री

यह एक सरल कस्टम रजिस्ट्री ऑब्जेक्ट है जिसे साझा किया जा सकता है। प्रत्येक MFE mySharedRegistry को आयात करके उसका उपयोग कर सकता है।

// mySharedRegistry.js (exposed via Module Federation)
const mySharedRegistry = {
  _data: {},
  set: function(key, value) {
    this._data[key] = value;
    console.log(`Registry updated: ${key} = ${value}`);
  },
  get: function(key) {
    return this._data[key];
  },
  getAll: function() {
    return { ...this._data };
  }
};

// Simulate usage in different MFEs
console.log("--- MFE A ---");
mySharedRegistry.set("userTheme", "dark");

console.log("--- MFE B ---");
console.log(`Current user theme: ${mySharedRegistry.get("userTheme")}`);
mySharedRegistry.set("appVersion", "1.0.1");

console.log("--- MFE A (again) ---");
console.log(`Current app version: ${mySharedRegistry.get("appVersion")}`);

विचारणीय बातें और समझौते

कस्टम समाधान लचीलापन प्रदान करते हैं, लेकिन इनके साथ कुछ समझौते भी करने पड़ते हैं:

बढ़ा हुआ युग्मन: इससे MFE कम स्वतंत्र हो सकते हैं।
जटिलता: मानक पैटर्न की तुलना में रखरखाव और डीबगिंग कठिन हो सकती है।
विस्तार-क्षमता: संचार की आवश्यकताएँ बढ़ने पर यह अच्छी तरह विस्तार योग्य न हो।
सुरक्षा: `postMessage` के लिए ओरिजिन का सावधानीपूर्वक सत्यापन आवश्यक है।

लाभों की तुलना इन संभावित कमियों से हमेशा करें।

कस्टम संचार जाँच

आप माइक्रो फ्रंटएंड आर्किटेक्चर लागू कर रहे हैं। एक MFE किसी दूसरे डोमेन के iframe में एम्बेड किया गया है। आपको होस्ट और iframe के बीच सरल संदेश सुरक्षित रूप से भेजने हैं।

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

पुनरावलोकन: कस्टम समाधान

हमने इवेंट बस और साझा स्थिति से आगे बढ़कर माइक्रो फ्रंटएंड के लिए कस्टम संचार समाधानों का अध्ययन किया।

सीधे कॉलबैक: घनिष्ठ रूप से जुड़े घटकों के लिए।
postMessage API: सुरक्षित क्रॉस-ओरिजिन संचार के लिए, विशेष रूप से iframe के साथ।
साझा रजिस्ट्री: हल्के, कस्टम वैश्विक डेटा या सेवाओं के लिए।

कस्टम तरीका अपनाने से पहले बढ़े हुए युग्मन और जटिलता के समझौतों पर सावधानीपूर्वक विचार करना याद रखें।

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

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

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

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

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

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

क्या “कस्टम संचार समाधान” पाठ निःशुल्क है?

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

“कस्टम संचार समाधान” में मैं क्या सीखूँगा?

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

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

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

“कस्टम संचार समाधान” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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