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



सालों तक, स्प्राउट इंजीनियरिंग टीम कस्टम स्थानीयकरण समाधान के साथ काम करती रही, क्योंकि ओपन सोर्स समाधान अभी भी परिपक्व हो रहे थे। इसने हमें अपने सबसे बड़े ग्राहकों को हमारी समर्थित भाषाओं में समायोजित करने की अनुमति दी, लेकिन कुछ उपयोगी सुविधाओं का अभाव था। इस लेख में, मैं हमारी नई स्थानीयकरण प्रणाली की रूपरेखा तैयार करूँगा, कि यह सबसे जटिल स्थानीयकरण परिदृश्यों से कैसे निपटता है, और कैसे हमने वेब इंजीनियरिंग संगठन में उन परिवर्तनों को क्रमिक रूप से पेश किया।



हमारी पुरानी व्यवस्था

हमारी नई स्थानीयकरण प्रणाली को समझने के लिए, आपको सबसे पहले यह समझने की आवश्यकता है कि हमारी पुरानी प्रणाली कैसे काम करती है और किन क्षेत्रों में हम इसे सुधार सकते हैं।

संदेश सिंटैक्स

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

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

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

उदाहरण: स्प्राउट एप्लिकेशन में, हमें 'आपके पास एक्स पोस्ट हैं' को प्रस्तुत करने का एक तरीका चाहिए जहां एक्स एक गतिशील संख्यात्मक मान है।



बहुवचन मामले पर विचार करें, 'आपके पास 5 है पदों ”। एकवचन मामले पर विचार करें, 'आपके पास 1 डाक ”। '0' मामले पर विचार करें। उन भाषाओं पर विचार करें जिनमें चीनी और जापानी जैसे '1' मामले के लिए व्याकरण हो सकता है। उन भाषाओं पर विचार करें जिनके मामले में व्याकरण है जब X अरबी, पोलिश और रूसी जैसी 'बड़ी संख्या' है।

संदेश प्रबंधन

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

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



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

जावास्क्रिप्ट का स्क्रीनशॉट पहले स्प्राउट में संदेशों और अनुवाद को मैन्युअल रूप से प्रबंधित करने के लिए उपयोग किया जाता था's codebase.

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

40 . का आध्यात्मिक अर्थ

हमारा नया समाधान

इन कमियों को जानने के बाद, उत्पाद संगठन के वेब इंजीनियरों ने समाधान विकसित करने के लिए एक स्थानीयकरण कार्य समूह बनाया। हम मंथन के लिए नियमित रूप से मिलते थे। एक गहन शोध प्रक्रिया के बाद, हमने FormatJS's का उपयोग करने के लिए अपने होममेड लोकलाइजेशन सिस्टम से स्प्राउट एप्लिकेशन को माइग्रेट करने का निर्णय लिया। प्रतिक्रिया-intl पुस्तकालय और हमारे संदेशों के प्रबंधन के लिए इसके चारों ओर आधारभूत संरचना का निर्माण करें। रिएक्ट-इंटेल जावास्क्रिप्ट पारिस्थितिकी तंत्र में सबसे सुविधा संपन्न और लोकप्रिय ओपन सोर्स लोकलाइजेशन लाइब्रेरी थी और हमारे कोडबेस में अच्छी तरह से एकीकृत थी।

संदेश सिंटैक्स

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

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

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

अनगिनत भाषाओं में कई अनुप्रयोगों द्वारा ICU संदेश सिंटैक्स का युद्ध-परीक्षण किया गया है। हम भरोसा कर सकते हैं कि यह हमारी परिष्कृत ग्राहकों की ज़रूरतों को पूरा कर सकता है, और यह कि स्थानीयकरण से संबंधित किसी भी प्रश्न के लिए कई समाधान और/या शैक्षणिक संसाधन मौजूद हैं।

संदेश प्रबंधन

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

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

जावास्क्रिप्ट का स्क्रीनशॉट पहले स्प्राउट में संदेशों और अनुवाद को स्वचालित रूप से प्रबंधित करने के लिए उपयोग किया जाता था's codebase.

यह परिवर्तन संदेशों को UI कोड के साथ सहस्थापित करता है और इसके कई लाभ हैं:

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

हम कैसे माइग्रेट हुए?

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

नई व्यवस्था का संचालन

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

शिक्षा

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

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

इसने हमें शिक्षा की जिम्मेदारियों को सौंपने और अलग-अलग टीमों के लिए विशिष्ट मुद्दों की पहचान करने की अनुमति दी।

पुरानी व्यवस्था की निंदा

डेवलपर अनुभव, साझा ज्ञान और नई प्रणाली की व्यापक क्षमता में विश्वास महसूस करने के बाद, हमने पुरानी प्रणाली को बहिष्कृत कर दिया। हमने कुछ कस्टम एस्लिंट नियम बनाए और लाइनिंग टूल का इस्तेमाल किया, splint , मौजूदा उपयोगों की अनुमति देते हुए पुरानी प्रणाली के उपयोग को अवरुद्ध करने के लिए। इस बिंदु से, वेब इंजीनियरों से अपेक्षा की गई थी कि वे नया कोड लिखते समय नई प्रणाली का उपयोग करें।

हमारे नए सिस्टम में माइग्रेट करना

अपनी नई प्रणाली और निश्चित संख्या में पुराने उपयोगों में विश्वास के साथ, हमने पलायन करना शुरू किया।

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

रोल आउट

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

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

सीख और takeaways

पूरे वेब इंजीनियरिंग संगठन में हमारी स्थानीयकरण प्रणाली की फिर से कल्पना करना एक बड़ा उपक्रम था। इसी तरह की परियोजनाओं या चुनौतियों का सामना करने वाले अन्य लोगों को मेरी सलाह होगी:

  • व्यापक रूप से अपनाए गए मानकों का उपयोग करें: एक कस्टम संदेश सिंटैक्स क्यों बनाएं जब इंजीनियरों ने इस समस्या स्थान पर सोचने में वर्षों बिताए हैं ICU संदेश सिंटैक्स विकसित किया है?
  • संबंधित वस्तुओं को व्यवस्थित करने पर विचार करें: यह उन्हें जोड़ना, बदलना और हटाना बहुत आसान बना देगा।
  • पुनरावृत्त रोलआउट को अपनाएं: अपने परिवर्तन के रोलआउट को इस तरह से डिज़ाइन करें जिससे आप आगे बढ़ते हुए सीख सकें। आप हर चीज का अनुमान नहीं लगा सकते हैं, इसलिए अपनी योजना में सहारा लेने के लिए जगह बनाएं।
  • अपनी सीख साझा करें: शिक्षा एक रोलआउट का आधा है। इससे कोई फर्क नहीं पड़ता कि आपका नया सिस्टम कितना अच्छा है अगर लोग नहीं जानते कि इसका उपयोग कैसे करना है या यह बेहतर क्यों है।

स्प्राउट की इंजीनियरिंग संस्कृति के बारे में अधिक जानकारी के लिए, हमारा देखें करियर पेज आज।

अपने दोस्तों के साथ साझा करें: