फ्रंटएंड (बीएफएफ) पैटर्न के लिए बैकएंड को समझना: एक सरल मार्गदर्शिका

माइक्रोसर्विसेज आर्किटेक्चर में, हमारे सिस्टम दर्जनों छोटी, केंद्रित सेवाओं में विभाजित हैं - जैसे उपयोगकर्ता सेवा, ऑर्डर सेवा और उत्पाद सेवा।

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

यदि ये सभी फ़्रंटएंड बिल्कुल समान बैकएंड API पर क्वेरी करते हैं, तो किसी को समझौता करना होगा। या तो मोबाइल ऐप को भारी मात्रा में बेकार डेटा डाउनलोड करने के लिए मजबूर किया जाता है, या वेब ऐप को अपनी ज़रूरत की हर चीज़ लाने के लिए दर्जनों अलग-अलग नेटवर्क अनुरोध करने के लिए मजबूर किया जाता है।

यह सटीक समस्या है जिसे फ्रंटएंड के लिए बैकएंड (बीएफएफ) पैटर्न द्वारा हल किया गया है। इस गाइड में, हम इस पैटर्न को सरल शब्दों में समझाएंगे, वास्तविक दुनिया सादृश्य को देखेंगे, इसकी तुलना एक मानक एपीआई गेटवे से करेंगे, और एक व्यावहारिक कोड कार्यान्वयन के माध्यम से चलेंगे।

वास्तविक दुनिया सादृश्य: रेस्तरां मेनू

एक ऐसे रेस्तरां की कल्पना करें जो तीन अलग-अलग प्रकार के भोजन परोसता हो:

1. एक खाद्य समीक्षक जो विस्तृत सामग्री सूचियों के साथ पूरे 5-कोर्स चखने वाला मेनू चाहता है।
2. एक व्यस्त यात्री जो ट्रेन में खाने के लिए झटपट, पहले से पैक किया हुआ नाश्ता चाहता है।
3. एक बच्चा जो बच्चों जैसा साधारण भोजन चाहता है जिसमें छोटे-छोटे हिस्से हों और कोई मसालेदार सामग्री न हो।

यदि रेस्तरां में केवल एक एकल मेनू होता जिसमें सभी तीन विकल्पों को पूर्ण विवरण में सूचीबद्ध किया जाता, तो यह जबरदस्त होता। यात्री को 5-कोर्स व्यंजनों को पढ़ने में समय बर्बाद करना होगा, और बच्चे के माता-पिता को सरल भोजन विकल्प खोजने के लिए संघर्ष करना होगा।

इसके बजाय, रेस्तरां तीन कस्टम मेनू प्रिंट करता है: एक टेस्टिंग मेनू, एक एक्सप्रेस टू-गो मेनू और एक बच्चों का मेनू।

प्रत्येक मेनू एक ही रसोई (माइक्रोसर्विसेज) से आता है, लेकिन विशेष रूप से उस ग्राहक (क्लाइंट) के लिए विकल्पों को प्रारूपित और आकार देता है।

इस परिदृश्य में:

• रसोईघर आपके माइक्रोसर्विसेज (उपयोगकर्ता, कैटलॉग, भुगतान) का प्रतिनिधित्व करता है।
• कस्टम मेनू आपके BFFs (वेब ​​BFF, मोबाइल BFF, वॉच BFF) हैं।
• भोजनकर्ता आपके फ्रंटएंड (डेस्कटॉप ब्राउज़र, मोबाइल ऐप, स्मार्टवॉच) हैं।

समस्या: “एक आकार-सभी के लिए फिट” एपीआई

जब माइक्रोसर्विसेज पहली बार लोकप्रिय हुई, तो कई टीमों ने सभी फ्रंटएंड क्लाइंट्स को संभालने के लिए एक एकल, साझा एपीआई गेटवे बनाया:

जबकि एक एकल प्रवेश बिंदु बढ़िया है, एक साझा एपीआई कई स्केलिंग बाधाओं का परिचय देता है:

• मोबाइल के लिए पेलोड ब्लोट: डेस्कटॉप वेब ऐप को उपयोगकर्ता के ऑर्डर इतिहास, बिलिंग पता, प्रोफ़ाइल चित्र और लॉयल्टी पॉइंट की आवश्यकता होती है। मोबाइल ऐप को केवल “अंतिम ऑर्डर: भेज दिया गया” दिखाना होगा। एक साझा एपीआई के साथ, मोबाइल ऐप संपूर्ण प्रोफ़ाइल पेलोड डाउनलोड करता है, जिससे कीमती डेटा बर्बाद होता है और लोड समय धीमा हो जाता है।
• एपीआई बाधाएं: एक एकल टीम साझा गेटवे के लिए बाधा बन जाती है। यदि iOS टीम एक छोटे लेआउट फ़ील्ड को बदलना चाहती है, तो उन्हें विकास चक्र को धीमा करते हुए, एक नया संस्करण तैनात करने के लिए साझा गेटवे टीम की प्रतीक्षा करनी होगी।
• विभिन्न सुरक्षा आवश्यकताएँ: एक वेब ब्राउज़र को क्रॉस-साइट स्क्रिप्टिंग (XSS) को रोकने के लिए कुकी-आधारित सत्रों की आवश्यकता हो सकती है, जबकि एक मोबाइल ऐप टोकन-आधारित OAuth हेडर को प्राथमिकता देता है। एक ही सर्वर में दोनों को संभालने से जटिल, गन्दा कोड बनता है।

समाधान: बीएफएफ पैटर्न

सभी उपकरणों के लिए एक विशाल गेटवे बनाने के बजाय, बीएफएफ पैटर्न प्रत्येक फ्रंटएंड एप्लिकेशन के लिए एक समर्पित बैकएंड सर्वर बनाने की वकालत करता है।

आपके पास होगा:

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

एपीआई गेटवे बनाम बीएफएफ: क्या अंतर है?

इन दोनों पैटर्न को भ्रमित करना आम बात है क्योंकि ये दोनों क्लाइंट और माइक्रोसर्विसेज के बीच में हैं। यहाँ भेद है:

एक व्यावहारिक कार्यान्वयन (Node.js/Express)

यह समझने के लिए कि यह व्यवहार में कैसे काम करता है, आइए एक सरल Node.js उदाहरण लिखें।

कल्पना कीजिए कि हमारे पास आंतरिक रूप से दो माइक्रोसर्विसेज चल रही हैं:

• उपयोगकर्ता सेवा (बुनियादी उपयोगकर्ता प्रोफ़ाइल जानकारी लौटाता है)
• ऑर्डर सेवा (पूरे विवरण के साथ ऑर्डर की सूची लौटाता है)

हम अपनी डेस्कटॉप साइट और मोबाइल ऐप को अलग ढंग से सेवा प्रदान करने के लिए एक वेब बीएफएफ और एक मोबाइल बीएफएफ बनाना चाहते हैं।

1. साझा माइक्रोसर्विसेज मॉक

सबसे पहले, यहां हमारे दो अंतर्निहित माइक्रोसर्विसेज के लिए नकली डेटा है:

// Internal User Service Response
const userProfile = {
    id: 42,
    username: "dev_coder",
    email: "coder@ghaznix.com",
    avatarUrl: "https://ghaznix.com/avatars/42.png",
    preferences: { theme: "light", newsletter: true }
};

// Internal Order Service Response
const orderHistory = [
    { id: "ORD-99", date: "2026-06-25", items: ["Laptop", "Mouse"], status: "Shipped", tax: 15.00, total: 1215.00 },
    { id: "ORD-88", date: "2026-05-12", items: ["Keyboard"], status: "Delivered", tax: 5.00, total: 105.00 }
];

2. वेब बीएफएफ (पूरा विस्तृत पेलोड लौटाता है)

वेब बीएफएफ सभी फ़ील्ड को एकत्रित करता है क्योंकि डेस्कटॉप स्क्रीन में उन्हें दिखाने के लिए पर्याप्त जगह होती है:

const express = require('express');
const webBff = express();

webBff.get('/dashboard', (req, res) => {
    // Web needs everything: profile + full order details + settings
    const responsePayload = {
        user: {
            username: userProfile.username,
            email: userProfile.email,
            avatar: userProfile.avatarUrl,
            theme: userProfile.preferences.theme
        },
        orders: orderHistory // Send all order details, taxes, and items
    };
    
    res.json(responsePayload);
});

webBff.listen(3001, () => console.log('Web BFF running on port 3001'));

3. मोबाइल बीएफएफ (न्यूनतम रिटर्न, एकत्रित पेलोड)

मोबाइल बीएफएफ अनावश्यक फ़ील्ड (जैसे ईमेल, सेटिंग्स और कर) को फ़िल्टर करता है और बैंडविड्थ को बचाने के लिए ऑर्डर आइटम को एकत्रित करता है:

const express = require('express');
const mobileBff = express();

mobileBff.get('/dashboard', (req, res) => {
    // Mobile only wants: username, avatar, and summary of the latest order
    const latestOrder = orderHistory[0];
    
    const responsePayload = {
        user: {
            username: userProfile.username,
            avatar: userProfile.avatarUrl
        },
        latestOrderStatus: {
            orderId: latestOrder.id,
            status: latestOrder.status,
            date: latestOrder.date,
            itemCount: latestOrder.items.length // Send count instead of array list
        }
    };
    
    res.json(responsePayload);
});

mobileBff.listen(3002, () => console.log('Mobile BFF running on port 3002'));

पेलोड आकार की तुलना

• वेब बीएफएफ प्रतिक्रिया आकार: इसमें नेस्टेड कॉन्फ़िगरेशन, प्राथमिकताएं, पूर्ण ऑर्डर सूची, कर, आइटम आदि शामिल हैं (लगभग 400 बाइट्स)।
• मोबाइल बीएफएफ रिस्पांस साइज: इसमें केवल 6 कुंजी-मूल्य जोड़े शामिल हैं जो आवश्यक चीजों का प्रतिनिधित्व करते हैं। (लगभग 120 बाइट्स-70% कमी नेटवर्क आकार में!)।

बीएफएफ पैटर्न के फायदे और नुकसान

अत्यधिक प्रभावी होते हुए भी, BFF पैटर्न में ट्रेड-ऑफ़ हैं:

निष्कर्ष

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

यदि आपके सिस्टम में केवल एक ही वेब एप्लिकेशन है, तो एक साझा एपीआई गेटवे पर्याप्त है। लेकिन जैसे ही आप अपने वेब एप्लिकेशन के साथ-साथ मोबाइल ऐप या विशेष डिवाइस अनुभव बनाना शुरू करते हैं, तो बीएफएफ लागू करना आपके फ्रंटएंड और बैकएंड आर्किटेक्चर को साफ, अनुकूलित और स्वतंत्र रखने का सबसे अच्छा तरीका है।

ग़ज़निक्स ब्लॉग पर अधिक सॉफ़्टवेयर विकास और बैकएंड इंजीनियरिंग अंतर्दृष्टि का अन्वेषण करें →