design businessMay 10, 202613 min read

डिजाइनरों के लिए देव स्टेजिंग प्रोडक्शन: 2026 गाइड

डेवलपमेंट, स्टेजिंग, प्रोडक्शन। ये तीन ऐसे वातावरण हैं जिनमें हर डिज़ाइनर काम करता है, लेकिन कुछ ही लोग इन्हें समझते हैं। सरल शब्दों में, वास्तविक उपकरणों के साथ और बचने योग्य गलतियों के बारे में बताया गया है।

By Boone
XLinkedIn
dev staging prod for designers

ज़्यादातर डिज़ाइनर गलत एनवायरनमेंट में कुछ गड़बड़ करके ही देव, स्टेजिंग और प्रोडक्शन के बारे में सीखते हैं। एक लूम भेजा जाता है। एक इंजीनियर परेशान हो जाता है। Slack थ्रेड "रुको, यह कौन सा यूआरएल है?" से शुरू होता है। यही पूरी ऑनबोर्डिंग है।

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

अगर आपने कभी गलत टैब देखते हुए पूछा है "क्या यह लाइव हो गया है?", तो यह लेख आपके लिए है।

तीन एनवायरनमेंट क्यों ज़रूरी हैं

सॉफ़्टवेयर में एक ऐसी समस्या है जो भौतिक उत्पादों में नहीं होती। एक बार शिप होने के बाद, यह तुरंत, एक ही समय में सभी तक पहुँच जाता है। कोई फ़ैक्टरी फ़्लोर नहीं, कोई टेस्ट मार्केट नहीं, कोई धीमा रोलआउट नहीं। एक गलत बदलाव पेज को रीफ़्रेश करने में लगने वाले समय में लाखों उपयोगकर्ताओं को प्रभावित कर सकता है।

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

आप इसे एक ही लेख के तीन संपादकीय दौरों से गुजरने के रूप में समझ सकते हैं। पहला ड्राफ्ट कच्चा होता है, गैली कॉपी लगभग साफ होती है, और छपी हुई पत्रिका को दस लोग पढ़ चुके होते हैं। कोई भी पहला ड्राफ्ट प्रकाशित नहीं करता और इसी कारण से कोई भी सीधे प्रोडक्शन में डिज़ाइन नहीं करता।

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

तीन-पर्यावरण चीट शीट

इससे पहले कि हम और गहराई में जाएँ, यहाँ वह चीट शीट है जिसका आप स्क्रीनशॉट ले सकते हैं और फिर कभी इसके बारे में पूछने की ज़रूरत नहीं पड़ेगी।

| पर्यावरण | उद्देश्य | दर्शक | डेटा | यूआरएल पैटर्न | परिनियोजन ट्रिगर | समीक्षा शैली |

|---|---|---|---|---|---|---| | देव | स्वतंत्र रूप से निर्माण और त्रुटियाँ | एक इंजीनियर, कभी-कभी आप | नकली या कृत्रिम, अक्सर त्रुटिपूर्ण | localhost:3000 या yourname.dev.app | स्थानीय कोड परिवर्तन | पेयरिंग, स्क्रीन शेयरिंग |

स्टेजिंग | उपयोगकर्ताओं से पहले अंतिम जाँच | आंतरिक टीम, डिज़ाइनर, QA | वास्तविक, अनाम, ताज़ा | staging.app.com या pr-123.app.com | PR मर्ज या मैन्युअल पुश | एसिंक्रोनस समीक्षा, लूम, Figma तुलना |

उत्पादन | वास्तविक | ग्राहक, दुनिया | वास्तविक, संवेदनशील, अपरिवर्तनीय | app.com | टैग किया गया रिलीज़ या मुख्य शाखा मर्ज | निगरानी, ​​लॉन्च के बाद QA |

यदि आपको केवल एक पंक्ति याद रखनी है, तो डेटा वाली पंक्ति याद रखें। देव के पास नकली डेटा है, स्टेजिंग के पास वास्तविक डेटा है, और उत्पादन के पास वह डेटा है जिसके साथ छेड़छाड़ करने पर आप पर मुकदमा हो सकता है। तीनों के साथ तदनुसार व्यवहार करें।

देव: वह जगह जहाँ इंजीनियर रहते हैं, जहाँ जानबूझकर चीज़ें खराब की जाती हैं

देव वह सब कुछ है जो एक इंजीनियर अपने लैपटॉप पर या अपने निजी क्लाउड सैंडबॉक्स में चला रहा होता है। इसे आमतौर पर लोकलहोस्ट कहा जाता है। यह उनकी मशीन पर चलता है, एक नकली डेटाबेस से संचार करता है, और एक समय में केवल एक ही व्यक्ति के लिए मौजूद होता है। आप इस वातावरण को लगभग कभी नहीं देखते, और यह सही है।

जब कोई इंजीनियर कहता है "यह मेरी मशीन पर काम करता है," तो वे देव की बात कर रहे होते हैं। आधे समय यह वहाँ काम करता है क्योंकि डेटा नकली होता है, नेटवर्क तेज़ होता है, और कुछ और नहीं चल रहा होता है। बाकी आधे समय यह वहाँ काम करता है क्योंकि उन्होंने इसे पाँच मिनट पहले ही पूरा किया है और इसकी वास्तविक स्थिति से कोई तुलना नहीं की गई है।

देव वह जगह भी है जहाँ नए घटक पहली बार दिखाई देते हैं। यदि आपने Figma में एक कार्ड पैटर्न दिया है, तो वास्तविक कोड में इसका पहला अस्तित्व किसी इंजीनियर के देव वातावरण में होता है। वे संभवतः आपको लोकलहोस्ट से एक स्क्रीनशॉट या लूम भेजेंगे। यह वे आपको अंतिम संस्करण नहीं, बल्कि कच्चा संस्करण दिखा रहे हैं।

आप पिक्सेल पॉलिश के लिए देव की समीक्षा नहीं करते हैं। आप संरचना, व्यवहार और उद्देश्य की पुष्टि करने के लिए डेवलपमेंट की समीक्षा करते हैं। पिक्सेल संबंधी नोट्स को स्टेजिंग के लिए सुरक्षित रखें।

वोक्सेल फ्रेमवर्क तीन लेबल वाले प्लेटफॉर्म DEV STAGING PROD को अलग-अलग रंगों और अनुभव के साथ दिखाता है: DEV अव्यवस्थित और छोटा, STAGING चेकलिस्ट के साथ मध्यम गुणवत्ता वाला, और PROD परिष्कृत और संरक्षित, हल्के पेस्टल रंगों वाला।
वोक्सेल फ्रेमवर्क तीन लेबल वाले प्लेटफॉर्म DEV STAGING PROD को अलग-अलग रंगों और अनुभव के साथ दिखाता है: DEV अव्यवस्थित और छोटा, STAGING चेकलिस्ट के साथ मध्यम गुणवत्ता वाला, और PROD परिष्कृत और संरक्षित, हल्के पेस्टल रंगों वाला।

स्टेजिंग: पूर्वाभ्यास

स्टेजिंग वह चरण है जहाँ टीम ग्राहकों के सामने आने से पहले स्वयं की जाँच करती है।

यह वास्तविक बुनियादी ढांचे पर, वास्तविक डेटा के साथ, एक ऐसे URL पर चलता है जो आमतौर पर आपके सामान्य डोमेन के आगे 'स्टेजिंग' शब्द से शुरू होता है।

टीम का कोई भी सदस्य इसे देख सकता है। ग्राहक इसे नहीं देख सकते।

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

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

स्टेजिंग ही वह जगह है जहां आपको पता चलता है कि इंजीनियर ने आपके डिज़ाइन को उसी तरह समझा है जैसा आप चाहते थे। आधे मामलों में वे ऐसा ही करते हैं। बाकी आधे मामलों में ही असल बातचीत शुरू होती है।

प्रोडक्शन: जहां असली लोग रहते हैं

प्रोडक्शन लाइव साइट है। यही वह साइट है जिसे आपके ग्राहक ब्राउज़र में आपका URL टाइप करने पर देखते हैं। यह असली इंफ्रास्ट्रक्चर पर चलती है, जिसमें असली डेटा, असली पैसा और हर बदलाव के असली परिणाम होते हैं। जब आप इस पर क्लिक करते हैं, तो आप उसी सिस्टम के साथ इंटरैक्ट कर रहे होते हैं जिससे आपके उपयोगकर्ता इंटरैक्ट कर रहे होते हैं।

यह वह माहौल है जहां आप डिज़ाइनर की भूमिका छोड़कर एक आम नागरिक बन जाते हैं। आप प्रोडक्शन में विचारों को परखने के लिए इधर-उधर क्लिक नहीं करते। आप चीजों को आज़मा नहीं सकते। आप नकली उपयोगकर्ता के रूप में लॉग इन करके यह नहीं देखते कि क्या होता है, क्योंकि प्रोडक्शन में कोई नकली उपयोगकर्ता नहीं होता, केवल असली उपयोगकर्ता होते हैं जिनके असली रिकॉर्ड होते हैं जिन्हें आप गलती से खराब कर सकते हैं।

प्रोडक्शन का इस्तेमाल मॉनिटरिंग, डिप्लॉयमेंट के बाद स्पॉट चेक करने और लाइव हो चुकी चीज़ों के स्क्रीनशॉट लेने के लिए किया जाता है। अगर आपको कुछ टेस्ट करना है, तो आप स्टेजिंग पर वापस जाते हैं। अगर स्टेजिंग पर वह चीज़ नहीं दिखती, तो आप प्रीव्यू मांगते हैं। आप प्रोडक्शन को नहीं छेड़ते।

किसी भी टीम की परिपक्वता की कसौटी यह है कि वे इस नियम का कितना सख्ती से पालन करते हैं। जूनियर टीमें लगातार प्रोडक्शन पर क्लिक करती रहती हैं। सीनियर टीमें इसे एक साफ-सुथरे कमरे की तरह संभालती हैं।

एक बदलाव का जीवनचक्र

एक डिज़ाइन बदलाव उपयोगकर्ता द्वारा देखे जाने से पहले हर एनवायरनमेंट से होकर गुजरता है। इस जीवनचक्र को जानना ही उन डिज़ाइनरों को अलग करता है जो इंजीनियरों को परेशान करते हैं और जो उन्हें खुश करते हैं।

यहां बताया गया है कि कोई बदलाव वास्तव में कैसे आगे बढ़ता है:

  1. आप Figma में एनोटेशन, स्टेट्स और एज केस के साथ डिज़ाइन सौंपते हैं।

  2. एक इंजीनियर बदलाव को अपने डेवलपमेंट एनवायरनमेंट में पुल करता है और उसे स्थानीय रूप से बिल्ड करता है।

फिर काम टीम के लिए सार्वजनिक हो जाता है:

  1. वे एक पुल रिक्वेस्ट खोलते हैं, जो एक अद्वितीय URL के साथ एक प्रीव्यू डिप्लॉयमेंट शुरू करता है।

  2. आप पूर्वावलोकन की समीक्षा करते हैं, टिप्पणियाँ छोड़ते हैं, परिवर्तन का अनुरोध करते हैं, और अनुमोदन करते हैं।

और अंत में यह उपयोगकर्ताओं तक पहुँचता है:

  1. पीआर मर्ज हो जाता है और परिवर्तन अंतिम टीम समीक्षा के लिए स्टेजिंग में भेज दिया जाता है।

  2. स्टेजिंग द्वारा अनुमोदन प्राप्त होने के बाद, परिवर्तन प्रोडक्शन में भेज दिया जाता है और उपयोगकर्ता इसे देख पाते हैं।

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

यदि आपकी टीम में पूर्वावलोकन परिनियोजन नहीं है, तो यह सबसे महत्वपूर्ण बदलाव है जिसे वे जोड़ सकते हैं। इसे जोड़ने के लिए जोर दें।

वोक्सेल आरेख एक छोटे परिवर्तन घन को दर्शाता है जो स्थानीय लैपटॉप से ​​पीआर पूर्वावलोकन, फिर स्टेजिंग और अंत में प्रोडक्शन तक यात्रा करता है, प्रत्येक पड़ाव को चिह्नित किया गया है, शाखाओं वाले तीरों का उपयोग किया गया है, और इसे हल्के पेस्टल रंगों में रंगा गया है।
वोक्सेल आरेख एक छोटे परिवर्तन घन को दर्शाता है जो स्थानीय लैपटॉप से ​​पीआर पूर्वावलोकन, फिर स्टेजिंग और अंत में प्रोडक्शन तक यात्रा करता है, प्रत्येक पड़ाव को चिह्नित किया गया है, शाखाओं वाले तीरों का उपयोग किया गया है, और इसे हल्के पेस्टल रंगों में रंगा गया है।

पूर्वावलोकन परिनियोजन ने सब कुछ बदल दिया

दस साल पहले, डिज़ाइन समीक्षा का मतलब या तो इंजीनियर के डेस्क पर जाना होता था या अगले मंगलवार के स्टेजिंग पुश तक इंतजार करना होता था। आज, प्रत्येक आधुनिक होस्टिंग प्लेटफ़ॉर्म प्रत्येक पुल अनुरोध को अपना यूआरएल देता है। Vercel इन्हें प्रीव्यू डिप्लॉयमेंट कहते हैं, Netlify इन्हें डिप्लॉय प्रीव्यू कहते हैं, Render, Cloudflare और AWS Amplify सभी इसी तरह के काम करते हैं।

इसका व्यावहारिक अर्थ यह है: हर ब्रांच, हर PR, और हर चल रहे बदलाव का एक लाइव, क्लिक करने योग्य URL होता है जिसे आप बिना किसी प्रतीक्षा के देख सकते हैं। इंजीनियर अपनी ब्रांच पुश करता है, प्रीव्यू दो मिनट में बिल्ड हो जाता है, और एक बॉट आपके लिए URL को PR में डाल देता है। आप उस पर क्लिक करते हैं, समीक्षा करते हैं, टिप्पणी करते हैं, और आगे बढ़ते हैं।

प्रीव्यू डिप्लॉयमेंट डिज़ाइन समीक्षा प्रक्रिया को दिनों से घटाकर मिनटों में कर देते हैं। इससे Loom वीडियो की आवश्यकता भी काफी कम हो जाती है, क्योंकि प्रीव्यू URL एक Loom वीडियो होता है जिससे आप इंटरैक्ट कर सकते हैं। यदि आप इनका उपयोग नहीं कर रहे हैं, तो अपने इंजीनियर से किसी भी खुले PR पर बॉट की टिप्पणी का लिंक दिखाने के लिए कहें। लिंक वहीं मौजूद होता है।

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

पर्यावरण चर, कॉन्फ़िगरेशन और "टेस्ट मोड" क्यों दिखाई देता है

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

टीमें इन सभी को व्यवस्थित रखने के लिए पर्यावरण चर का उपयोग करती हैं, जिन्हें कॉन्फ़िगरेशन या सीक्रेट भी कहा जाता है। ये DATABASE_URL या STRIPE_KEY जैसे छोटे नाम वाले मान होते हैं जो प्रत्येक वातावरण के लिए बदलते रहते हैं। डॉप्लर, Vercel पर्यावरण चर, AWS सीक्रेट्स मैनेजर या 1Password Connect जैसे टूल इन्हें प्रबंधित करते हैं।

एक डिज़ाइनर के तौर पर आपके लिए यह क्यों महत्वपूर्ण है: जब आप स्टेजिंग में Stripe को टेस्ट कार्ड नंबर दिखाते हुए देखते हैं, तो इसका मतलब है कि स्टेजिंग की Stripe कुंजी काम कर रही है। जब आप अपनी डेवलपर प्रोफ़ाइल तस्वीर देखते हैं लेकिन डेवलपर में पूरी तरह से नकली क्रेडिट कार्ड देखते हैं, तो इसका मतलब है कि डेवलपर नकली डेटाबेस से डेटा ले रहा है लेकिन क्लर्क का प्रमाणीकरण असली है। जब कोई चीज़ स्टेजिंग में काम करती है लेकिन प्रोडक्शन में टूट जाती है, तो 90% मामलों में यह किसी अनुपस्थित या भिन्न एनवायरनमेंट वैरिएबल के कारण होता है।

आपको इन्हें प्रबंधित करने की आवश्यकता नहीं है। आपको बस यह जानना है कि ये मौजूद हैं ताकि जब कोई इंजीनियर कहे, "रुको, यह प्रोडक्शन की Stripe कुंजी का उपयोग कर रहा है, उस बटन पर क्लिक न करें," तो आप समझ सकें कि उनका क्या मतलब है।

तीन ओपन पीआर के बगल में तैरते हुए तीन प्रीव्यू यूआरएल का वोक्सेल दृश्य, प्रत्येक में अपनी छोटी, आत्मनिर्भर ऐप सतह है, जो अस्थायी समानांतर दुनिया की तरह दिखती है, हल्के पेस्टल रंगों में।
तीन ओपन पीआर के बगल में तैरते हुए तीन प्रीव्यू यूआरएल का वोक्सेल दृश्य, प्रत्येक में अपनी छोटी, आत्मनिर्भर ऐप सतह है, जो अस्थायी समानांतर दुनिया की तरह दिखती है, हल्के पेस्टल रंगों में।

डेटा समानता: आप वास्तव में क्या देखेंगे

प्रत्येक एनवायरनमेंट के अंदर का डेटा यह निर्धारित करता है कि आप क्या टेस्ट कर सकते हैं और क्या नहीं। डिज़ाइनर अक्सर इस बात को नज़रअंदाज़ कर देते हैं।

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

स्टेजिंग में आमतौर पर या तो गुमनाम प्रोडक्शन डेटा होता है या फिर एक सुव्यवस्थित यथार्थवादी डेटासेट। वास्तविक आकार, वास्तविक लंबाई, वास्तविक जटिल मामले, लेकिन नाम और ईमेल हटा दिए जाते हैं। यहीं पर आप वास्तव में देख सकते हैं कि क्रिस्टोफर हसन-विलियमसन द थर्ड नाम के ग्राहक या 63 लाइन आइटम वाले ऑर्डर के साथ आपके डिज़ाइन कैसे दिखते हैं। यही एकमात्र जगह है जहाँ आप वास्तविक डिज़ाइन QA कर सकते हैं।

प्रोडक्शन में वास्तविक डेटा होता है, और यही कारण है कि आपको इसमें छेड़छाड़ नहीं करनी चाहिए। आप स्नैपशॉट और डैशबोर्ड देख सकते हैं, लेकिन आपको कभी भी प्रोडक्शन को अपने परीक्षण क्षेत्र के रूप में उपयोग नहीं करना चाहिए।

प्रत्येक वातावरण में डिज़ाइनर की भूमिका

प्रत्येक वातावरण में अपने काम को समझने का सबसे आसान तरीका यह है कि आप प्रत्येक में अपने लिए एक अलग भूमिका निर्धारित करें।

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

स्टेजिंग मोड में, आप डिज़ाइन QA (क्वालिटी एश्योरेंस) हैं। आप Figma फ़ाइल से तुलना करते हैं, स्थिति की जाँच करते हैं, और पंच लिस्ट लिखते हैं। यहीं पर आप गंभीर समीक्षा करते हैं, व्यवस्थित टिप्पणियाँ देते हैं, और परिवर्तन को स्वीकृत या अस्वीकृत करते हैं। स्टेजिंग मोड आपका कार्यक्षेत्र है।

प्रोडक्शन मोड में, आप एक अतिथि हैं। आप यह सत्यापित करते हैं कि परिवर्तन शिप हो गया है, स्क्रीनशॉट लेते हैं, और यदि यह आपका काम है तो एनालिटिक्स देखते हैं। प्रोडक्शन मोड में आप इधर-उधर क्लिक करके परीक्षण नहीं करते या "बस एक चीज़ जल्दी से आज़माकर नहीं देखते"।

इन तीन भूमिकाओं को ध्यान में रखें और आप अपनी इंजीनियरिंग टीम के साथ काम करने वाले सबसे आसान डिज़ाइनरों में से एक होंगे।

डिज़ाइनर द्वारा लगातार की जाने वाली गलतियाँ

मैंने डिज़ाइनरों को ये सभी गलतियाँ करते देखा है। मैंने खुद भी इनमें से कुछ गलतियाँ की हैं। इनमें से कोई भी गलती दुनिया का अंत नहीं है, लेकिन ये सभी आपकी टीम की गति धीमी कर देती हैं और इंजीनियरिंग टीम के अच्छे संबंधों को खराब करती हैं।

आम गलतियाँ:

  • किसी क्लाइंट को डेवलपर URL भेजना। डेवलपर किसी के लैपटॉप पर काम कर रहा होता है, इसलिए क्लाइंट लिंक पर क्लिक करता है, कनेक्शन त्रुटि आती है, और पूछता है कि क्या आप लोग कुछ रिलीज़ भी कर रहे हैं।

  • पुराने CDN कैश से "लाइव बग" की रिपोर्ट करना। आप छह घंटे पहले कैश किए गए वर्शन को देख रहे हैं, और हार्ड रिफ्रेश करने से यह ठीक हो जाता है।

अगली गलतियाँ इस बात को लेकर भ्रम से आती हैं कि कौन सा वर्शन कहाँ लाइव है:

  • स्टेजिंग में पहले से ठीक हो चुकी चीज़ के लिए बग रिपोर्ट करना। आपने प्रोडक्शन देखा, पुराना वर्शन देखा, और घबराकर Slack रिपोर्ट कर दी। जबकि फिक्स एक हफ्ते से स्टेजिंग पर मौजूद है।

  • प्रीव्यू लिंक न मांगना। आप तीन दिन तक स्टेजिंग पर आने का इंतज़ार करते हैं, जबकि इंजीनियर पुश करते ही प्रीव्यू यूआरएल शेयर कर सकते थे।

आखिरी दो गलतियाँ स्टेजिंग और प्रोडक्शन के बीच की सीमा का सम्मान करने से संबंधित हैं:

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

डिप्लॉय लॉग देखने के बजाय "क्या यह लाइव हो गया है?" पूछना। अधिकांश टीमों के पास Slack नाम का एक चैनल होता है जो हर डिप्लॉयमेंट की जानकारी देता है, इसलिए इसे बुकमार्क कर लें।

इनमें से प्रत्येक गलती का पता चलने पर एक लाइन में समाधान किया जा सकता है। इनमें से कोई भी गलती मूर्खतापूर्ण नहीं है। ये बस वो बातें हैं जो आपको किसी ने नहीं बताईं।

चार लेबल वाले कार्डों का वोक्सेल दृश्य (STALE CDN ​​DEV URL TO CLIENT FIXED IN STAGING NO PREVIEW LINK), सॉफ्ट पेस्टल
चार लेबल वाले कार्डों का वोक्सेल दृश्य (STALE CDN ​​DEV URL TO CLIENT FIXED IN STAGING NO PREVIEW LINK), सॉफ्ट पेस्टल

अपनी ज़रूरत की चीज़ें कैसे मांगें

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

खराब अनुरोध: "क्या आप नया कार्ड डिज़ाइन कहीं अपलोड कर सकते हैं जहाँ मैं उसे देख सकूँ?"

अच्छा अनुरोध: "क्या आप अपने कार्ड डिज़ाइन की ब्रांच अपलोड कर सकते हैं और तैयार होने पर मुझे उसका प्रीव्यू URL भेज सकते हैं?"

खराब अनुरोध: "क्या होमपेज अपडेट लाइव हो गया है?"

अच्छा अनुरोध: "क्या PR 412 प्रोडक्शन में है या अभी भी स्टेजिंग पर है?"

खराब अनुरोध: "लाइव साइट पर कुछ गड़बड़ लग रही है।"

अच्छा अनुरोध: "प्रोडक्शन पर, /pricing पर प्राइसिंग कार्ड में नीचे का बॉर्डर गायब है। हार्ड रिफ्रेश करने के बाद भी समस्या बनी हुई है। स्क्रीनशॉट संलग्न है।"

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

फ़ीचर फ़्लैग: प्रोडक्शन के अंदर स्टेजिंग

एक चौथा कॉन्सेप्ट है जो dev/staging/prod मॉडल को उपयोगी तरीके से तोड़ता है: फ़ीचर फ़्लैग। फ़ीचर फ़्लैग कोड में एक स्विच होता है जो कहता है, "यह नया फ़ीचर उपयोगकर्ता X को दिखाएँ, लेकिन उपयोगकर्ता Y को नहीं।" टीमें इनका उपयोग प्रोडक्शन में कोड भेजने के लिए करती हैं, जबकि नए फ़ीचर को केवल कुछ ही उपयोगकर्ताओं, अक्सर आंतरिक कर्मचारियों, के लिए ही उपलब्ध कराती हैं।

LaunchDarkly, Statsig, ConfigCat और Vercel के अपने फ़्लैग जैसे टूल यही करते हैं। नया डिज़ाइन तकनीकी रूप से प्रोडक्शन में लाइव है, लेकिन इसे केवल आंतरिक फ़्लैग वाले लोग ही देख पाते हैं। बाकी सभी को पुराना वर्शन दिखाई देता है।

यह आपके लिए महत्वपूर्ण है क्योंकि "क्या यह लाइव है?" का उत्तर अस्पष्ट हो जाता है। कोड लाइव हो सकता है, लेकिन फ़ीचर नहीं, इसलिए आपको इंजीनियर से अपने खाते के लिए फ़्लैग को बदलने के लिए कहना पड़ सकता है। या वे कह सकते हैं, "यह भेज दिया गया है, बस एक फ़्लैग के पीछे है, हम इसे मंगलवार को सभी के लिए चालू कर देंगे।"

फ़ीचर फ़्लैग ही वह तरीका है जिससे अनुभवी टीमें बिना किसी समस्या के लगातार कोड भेजती रहती हैं। ये वह तरीका भी है जिससे आप वास्तविक प्रोडक्शन डेटा पर, वास्तविक उपयोगकर्ताओं के साथ, कम जोखिम पर स्टेजिंग रिव्यू कर सकते हैं।

प्रत्येक वातावरण आपको टीम के बारे में क्या सिखाता है

कोई टीम इन तीन वातावरणों को कैसे संभालती है, इससे आपको उसकी इंजीनियरिंग परिपक्वता के बारे में लगभग सब कुछ पता चल जाता है। किसी भी नए क्लाइंट या भूमिका के लिए इसे एक त्वरित संदर्भ के रूप में उपयोग करें।

स्टेजिंग के बिना कोई टीम तेजी से आगे बढ़ रही है और उम्मीद कर रही है कि उन्हें कोई बग मिल जाएगा, और फिर वे स्टेजिंग बनाएंगे।

स्टेजिंग के साथ कोई टीम, लेकिन कोई पूर्वावलोकन परिनियोजन नहीं, बीच में है। समीक्षाएँ धीमी हैं, "पूरा हो गया" से "डिजाइनर इसे देख सकता है" तक का चक्र दिनों में मापा जाता है, आपको प्रतीक्षा में बहुत समय बिताना पड़ेगा।

पूर्वावलोकन परिनियोजन, एक वास्तविक स्टेजिंग, निगरानी की गई उत्पादन प्रणाली और फीचर फ्लैग के साथ कोई टीम उस स्तर पर काम कर रही है जो आप चाहते हैं। फीडबैक लूप छोटे होते हैं, गलतियाँ जल्दी पकड़ी जाती हैं, लॉन्च के दिन कोई घबराता नहीं है। एक बार जब आप इस स्तर पर काम कर लेते हैं, तो अन्य स्तर थकाऊ लगते हैं।

तीन वातावरण, तीन दर्शक, डेटा के तीन सेट, एक जीवनचक्र जो उन्हें जोड़ता है। यही पूरी अवधारणा है। बाकी सब इसके ऊपर उपकरण हैं।

आपको कोड डिप्लॉय करना या Vercel अकाउंट मैनेज करना जानने की ज़रूरत नहीं है। आपको बस यह जानना है कि आप किस एनवायरनमेंट को देख रहे हैं, वहां आपको क्या करने की अनुमति है, और सही URL कैसे प्राप्त करें। बस इतना कर लें, और आप वह डिज़ाइनर बन जाएंगे जिसके साथ आपके इंजीनियर वास्तव में काम करना चाहेंगे।

डिप्लॉय लॉग को बुकमार्क करें, प्रीव्यू लिंक मांगें, और प्रोडक्शन को बिल्कुल भी न छुएं।

Need a design partner who already speaks engineering? We ship into your stack.

Get Started

More from Brainy Papers

Keep reading