Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में Shopify Dawn theme के Pub/Sub Core System के बारे में detail में समझेंगे!.
इस article में हम ये जानेंगे!:
- Pub/Sub system क्या होता है!
- Dawn theme में Pub/Sub कैसे काम करता है!
- Shopify ने Pub/Sub system का उसे क्यों किया है!
- इस system को उसे करने के क्या फायदे है!
अगर आप Shopify Dawn theme JavaScript को समझना चाहते हैं, तो ये concept आपके लिए बहुत important है!.
Dawn Theme में Pub/Sub Event System क्या है?
Dawn theme के Pub/Sub Event System को समझने से पहले, हमे पहले ये समझना होगा की Pub/Sub होता क्या है!.
Pub/Sub (Publish–Subscribe) क्या होता है?
Pub/Sub (Publish–Subscribe) एक communication pattern है, जिसमे अलग-अलग parts जैसे:
- components
- JavaScript files
- modules
एक-दूसरे से directly connected हुए बिना आपस में communicate करते हैं!.
Simple language में:
Publisher सिर्फ इतना बताता है की “कुछ हुआ है”
Subscriber decide करता है की “जब ये होगा, मुझे क्या करना है”
Important बात ये है की:
Publisher और Subscriber एक-दूसरे को नहीं जानते दोनों के बीच एक common system होता है जो message pass करता है!
One-line definition यह है की:
Pub/Sub system एक ऐसा mechanism है जिसमे कोई event publish होता है और उस event को subscribe करने वाले components automatically react करते हैं, बिना direct connection के!.
Pub/Sub Event System का Common Middle Layer – Example के साथ समझिये
const events = {};
function publish(eventName, data) {
if (!events[eventName]) return;
events[eventName].forEach(callback => {
callback(data);
});
}
function subscribe(eventName, callback) {
if (!events[eventName]) {
events[eventName] = [];
}
events[eventName].push(callback);
}
Pub/Sub Event System को समझने के लिए सिर्फ definition पढ़ना काफी नहीं होता, बल्कि एक simple example देखना ज़रूरी होता है!. इस example में हम देखेंगे की कैसे एक event publish होता है, कैसे subscriber उस event को सुनता है, और कैसे बीच का common middle layer सब कुछ manage करता है!.
सबसे पहले हम एक common object बनाते हैं जो सभी events और उनके subscribers को store करेगा!.
const events = {};
इस events object को आप एक register की तरह समझ सकते हो. इसमें system ये याद रखता है की कौनसा event कौन-कौन सुन रहा है!. शुरू में ये object खाली होता है, क्यूंकि अभी तक किसी ने कोई event subscribe नहीं किया होता!.
अब हम subscribe() function बनाते हैं, जिसका काम होता है किसी event को सुन्ना.
function subscribe(eventName, callback) {
if (!events[eventName]) {
events[eventName] = [];
}
events[eventName].push(callback);
}
जब कोई component या file ये बोलना चाहती है की “मुझे किसी event की ज़रूरत है”, तो वो subscribe() का उसे करती है!. अगर पहली बार कोई event subscribe हो रहा होता है, तो system उस event के नाम से एक empty list बना देता है!. उसके बाद subscriber का callback function उस list में add कर दिया जाता है!. इस तरह से एक ही event के लिए multiple subscribers register हो सकते हैं!.
अब मान लीजिये product page पर तीन अलग-अलग चीज़ें variant change पर update होनी चाहिए — image, price और stock status. तो हम लिख सकते हैं:
subscribe('variantChanged', function (data) {
console.log('Product image update ho rahi hai');
});
subscribe('variantChanged', function (data) {
console.log('Product price update ho rahi hai');
});
subscribe('variantChanged', function (data) {
console.log('Stock availability check ho rahi hai');
});
यहाँ तीन अलग-अलग subscribers हैं, लेकिन सब एक ही event variantChanged को सुन रहे हैं. इस point पर system के events object के अंदर ये structure बन चूका होता है!:
events = {
variantChanged: [
callback1,
callback2,
callback3
]
};
अब बात करते हैं publisher की. जब user product का variant option change करता है, तब ek event publish किया जाता है!.
function publish(eventName, data) {
if (!events[eventName]) return;
events[eventName].forEach(callback => {
callback(data);
});
}
इस function का काम सिर्फ इतना होता है की वो check करे की जिस event को publish किया जा रहा है, क्या उसके लिए कोई subscriber registered है या नहीं. अगर कोई subscriber नहीं होता, तो function वही रुक जाता है. लेकिन अगर subscribers होते हैं, तो system उन सब पर एक-एक करके loop चलता है और हर subscriber के callback function को data के साथ call करता है!.
अब जब user variant change करता है, तो ये code चलता है!:
publish('variantChanged', {
variantId: 101,
price: 599,
inStock: true
});
इस moment पर publisher सिर्फ इतना बोलता hai की ” variantChanged event हो चूका है” और साथ में थोड़ा data भेज देता है. उसके बाद common middle layer का काम शुरू होता है. वो देखता है की variantChanged event को कौन-कौन सुन रहा है और उन सबके functions को automatically run कर देता है. Result ये होता है की बिना किसी direct function call के image update हो जाती है, price change हो जाता है और stock status भी check हो जाता है!.
इस पूरे process में सबसे important बात ये है की publisher को बिलकुल भी नहीं पता होता की कौन image update करेगा या कौन price change करेगा. इसी तरह subscriber को भी ये नहीं पता होता की event किस जगह से publish हुआ है!. दोनों के बीच का connection सिर्फ event name के through होता है!, और common middle layer सब कुछ smoothly handle करती है!.
इसी approach की वजह से Shopify के Dawn theme जैसे modern themes में Pub/Sub system उसे किया जाता है, क्यूंकि ये code को clean रखता है, tightly coupled logic से बचता है और future में नए features add करना बहुत easy बना देता है!.
Pub/Sub Event System के 3 Main Parts
Pub/Sub Event System को समझने के लिए सबसे पहले ये जानना ज़रूरी है की ये system तीन main parts पर काम करता है. ये तीन parts मिलकर एक ऐसा mechanism बनाते हैं जिसमे code clean रहता है और अलग-अलग components आपस में बिना directly जुड़े काम कर पते हैं!.
Pub/Sub system के 3 main parts होते हैं:
- Event
- Publisher
- Subscriber
अब इन तीनो को हम एक-एक करके detail में समझते हैं!.
Event क्या होता है?
Event का simple मतलब होता है किसी तरह का action या change होना. जब भी application/website में कुछ important होता है, उसे हम event के roop में treat कर सकते हैं!.
Shopify Dawn theme के context में कुछ common events होते हैं, जैसे product detail page पर variant option का change होना, product quantity का increase या decrease होना, या फिर add to cart button पर click होना. ये सब ऐसे actions हैं जो user करता है और जिनके बाद UI में कई जगह changes होते हैं!.
जब एक event होता है, तो उसके साथ सिर्फ एक चीज़ change नहीं होती. उदहारण के लिए, जब variant change होता है तो product की price update होती है, product images change होती हैं, add to cart button enable या disable होता है और inventory status भी update होता है. मतलब एक ही action से बहुत सारी information change हो सकती है!.
यहाँ problem क्या होती है?
Real projects में ये साड़ी चीज़ें अक्सर अलग-अलग JavaScript files में लिखी होती हैं. हर file का अपना logic होता है और सबको manually coordinate करना पड़ता है!. अगर हम direct function calls के through ये सब manage करने लगें, तो code tightly coupled हो जाता है और maintain करना मुश्किल हो जाता है!.
इसी problem को solve करने के लिए Pub/Sub Event System का उसे किया जाता है, जिसमे एक action को event बना दिया जाता है और बाकी चीज़ें उस event पर react करती हैं!.
Publisher क्या होता है?
Publisher वो part होता है जो event को announce या publish करता है. इसका काम सिर्फ इतना होता है की जब कोई important action या change हो, तो वो system को बता दे की ” कुछ हुआ है “.
Simple शब्दों में, publisher का role होता है कहना: “कुछ important change हुआ है, अब जो सुन्ना चाहता है सुन लो!”
Publisher सिर्फ दो चीज़ें करता है. पहली, वो event का naam बताता है. दूसरी, वो उस event से related data भेज देता है. इसके अलावा publisher को ये बिलकुल भी नहीं पता होता की कौन इस event को सुन रहा है और कौन कौनसा logic execute करेगा!.
जब user product का variant option change करता है, तो publisher तुरंत ये event publish कर देता है. जैसे ही variant change होता है, हम एक common event name के साथ event fire कर देते हैं!.
publish('variantChanged', data);
इस line का मतलब होता है की variantChanged नाम का event हो चूका है और उसका related data system को दे दिया गया है. इसके बाद publisher का काम यहीं ख़तम हो जाता है!.
Subscriber क्या होता है?
Subscriber वो part होता है जो किसी specific event को सुनना चाहता है और जब वो event होता है, तब अपना logic run करता है. Subscriber खुद से कोई event create नहीं करता, बल्कि publisher के द्वारा publish किये गए event का wait करता है!.
Subscriber system को पहले ही बता देता है की जब एक particular event होगा, तो मुझे notify करना. इसके लिए subscribe() function का उसे होता है!.
मान लीजिये की variant change होने पर हमे तीन अलग-अलग काम करने हैं image update, price update और inventory check. तो हम तीन subscribers लिख सकते हैं जो सब एक ही event को सुनते हैं!.
subscribe('variantChanged', (data) => {
console.log('Image update logic');
});
subscribe('variantChanged', (data) => {
console.log('Price update logic');
});
subscribe('variantChanged', (data) => {
console.log('Inventory check logic');
});
यहाँ तीनो subscribers variantChanged event को सुन रहे है, लेकिन हर subscriber अपना-अपना अलग logic execute करता है. किसी को image से मतलब है, किसी को price से और किसी को stock status से!.
Pub/Sub System का Complete Flow (Easy Language में)
अब अगर इस पूरे system को एक flow में समझें, तो process कुछ इस तरह होता है. User ने variant option change किया. जैसे ही ये action हुआ, publisher ने variantChanged event publish कर दिया. अब common middle layer ये check करती है की इस event को कौन-कौन सुन रहा है!. जितने भी subscribers इस event के लिए register होते हैं, उन सबका logic automatically execute हो जाता है!.
इस पूरे process में:
- Publisher को नहीं पता होता की कौन कौनसा logic चला रहा है!
- Subscriber को नहीं पता होता की event कहाँ से आया!
- Connection सिर्फ event name के through होता है!
इसी वजह से Pub/Sub system code को loosely coupled रखता है और large projects जैसे Shopify Dawn theme में ये approach बहुत useful होती है!.
Dawn Theme में Variant Change पर Pub/Sub System कैसे काम करता है?
Dawn theme में जब user product page पर variant option ( जैसे color या size) change करता है, तो उस change का effect sirf एक जगह पर नहीं होता. Variant change होने पर product की price, images, availability, URL, और add to cart state जैसे काफी चीज़ें update होती हैं. इन सब को sync में रखने के लिए Dawn theme Pub/Sub Event System का उसे करता है!.
इस पूरे flow को समझने के लिए हम दो main files को देखेंगे:
- global.js ( जहाँ event publish होता है)
- product-info.js ( जहाँ event subscribe होता है)
Variant option change होने पर क्या होता है? (Publisher side)
सबसे पहले global.js की VariantSelects class को समझते हैं!.
ये custom element product page पर variant dropdown और radio buttons को handle करता है. जैसे ही user कोई option change करता है, connectedCallback() के अंदर लगा हुआ change event trigger हो जाता है!.
this.addEventListener('change', (event) => {
const target = this.getInputForEventTarget(event.target);
this.updateSelectionMetadata(event);
publish(PUB_SUB_EVENTS.optionValueSelectionChange, {
data: {
event,
target,
selectedOptionValues: this.selectedOptionValues,
},
});
});
यहीं पर Publisher का real role start होता है!. जैसे ही option change होता है, Dawn theme पहले selected option की UI state update करता है, उसके बाद एक global event publish कर देता है!
इस event का naam होता है: PUB_SUB_EVENTS.optionValueSelectionChange और इसके साथ कुछ important data भेजा जाता है!
- original browser event
- कौनसा option select हुआ (target)
- selected option values का array
यहाँ ये समझना बहुत ज़रूरी है की: VariantSelects को बिलकुल भी ये नहीं पता होता की आगे kaunsa component react करेगा.
वो सिर्फ इतना कहता है: “Option value change हो चुकी है.” बस यहीं तक publisher का काम होता है!.
Event publish होने के बाद क्या होता है? (Common middle layer)
जैसे ही publish() call होता है, Dawn theme का Pub/Sub common middle layer activate हो जाता है. ये layer internally ये देखती है:
- क्या कोई component optionValueSelectionChange event को सुन रहा है?
- अगर हाँ, तो उन सबको notify कर दो
यहाँ ना तो VariantSelects को पता होता है कौन सुन रहा है, और ना ही subscribers को पता होता है event कहाँ से आया Connection सिर्फ event name के through होता है!.
product-info.js में Subscriber का role
अब आते hain product-info.js पर. ये file product की main information (price, media, form, availability) को handle करती है. जैसे ही product-info component DOM में load होता है, connectedCallback() run होता है:
this.onVariantChangeUnsubscriber = subscribe( PUB_SUB_EVENTS.optionValueSelectionChange, this.handleOptionValueChange.bind(this) );
इसका मतलब होता है: “अगर कभी optionValueSelectionChange event fire हो, तो handleOptionValueChange() function चलना.”
यहीं पर product-info component Subscriber बन जाता है.
Event receive होने पर subscriber क्या करता है?
जब भी user variant change करता है और event publish होता है, तो handleOptionValueChange() function automatically call होता है!.
handleOptionValueChange({ data: { event, target, selectedOptionValues } }) {
if (!this.contains(event.target)) return;
this.resetProductFormState();
const productUrl = target.dataset.productUrl || this.pendingRequestUrl || this.dataset.url;
this.pendingRequestUrl = productUrl;
const shouldSwapProduct = this.dataset.url !== productUrl;
const shouldFetchFullPage = this.dataset.updateUrl === 'true' && shouldSwapProduct;
this.renderProductInfo({
requestUrl: this.buildRequestUrlWithParams(
productUrl,
selectedOptionValues,
shouldFetchFullPage
),
targetId: target.id,
callback: shouldSwapProduct
? this.handleSwapProduct(productUrl, shouldFetchFullPage)
: this.handleUpdateProductInfo(productUrl),
});
}
यहाँ subscriber क्या कर रहा है, इसे simple language में समझें:
- पहले ये check करता है की event इसी product component से आया है या नहीं
- Product form को reset करता है
- Selected variant के हिसाब से correct product URL build करता है
- AJAX के through updated product information fetch करता है
- Price, images, availability wagairah को update करता है
और ये सब तब होता है जब सिर्फ एक event publish होता है!
Conclusion
Pub/Sub Event System में event एक action को represent करता है, publisher उस action को announce करता है और subscriber उस announcement पर react करता है. ये तीनों मिलकर एक ऐसा system बनाते हैं जिसमे एक single event से multiple changes easily manage किये जा सकते हैं, बिना code को complex बनाये!.
