प्रतिक्रिया आवेदन का स्थानीयकरण

सभी को नमस्कार!

नया साल आने में कुछ ही दिन बचे हैं। मुझे अपने मामलों की सूची आई, जो मैं 2019 में करने जा रहा था, उनमें से यह हबर पर एक लेख लिखने के लिए निकला था। यह आउटगोइंग कार में गिरने का समय है)।

मैं तुरंत आरक्षण कर दूंगा, मेरी बाइक का पीआर, अगर आप इस तरह से नहीं करते हैं, तो आप सुरक्षित रूप से लेख को छोड़ सकते हैं।

स्थानीयकरण क्या है?

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

प्रेरणा

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

मैं स्थानीयकरण पुस्तकालय से क्या चाहता था

1. ICU व्याकरण समर्थन
2. दिनांक स्वरूपण
3. संख्या स्वरूपण

क्या हुआ?

GitHub से लिंक करें ।

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

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

इस प्रकार, पैकेज @ ईओ-लोकेल / कोर था, जो आमतौर पर किसी भी ढांचे या पुस्तकालय से बंधा नहीं होता है और इसका उपयोग काफी लचीले ढंग से किया जा सकता है।

प्रतिक्रिया

प्रतिक्रिया संस्करण घटकों और हुक का एक संग्रह है।

eo-locale का उपयोग शुरू करने के लिए eo-locale एप्लिकेशन को प्रदाता में लपेटें।

 import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider> 

नंबर स्वरूपण मानक Intl.NumberFormat गुणों के माध्यम से उपलब्ध है

 import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00 

तारीखों का प्रारूपण समान रूप से लागू किया जाता है:

 import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019 

उपरोक्त सभी घटकों के माध्यम से भी नहीं किया जा सकता है, लेकिन उपयोग के लिए useTranslator हुक:

 import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; } 

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

 import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00 

बहुवचन मूल्यों को प्रदर्शित करने की क्षमता भी है। यह Intl.PluralRules का उपयोग करके कार्यान्वित किया Intl.PluralRules ।

 import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items 

Preact

सभी समान सुविधाओं को इसी पैकेज में प्रीक्ट के लिए कार्यान्वित किया जाता है।

कुछ विशेषताएं

लाइब्रेरी पूरी तरह से टाइपस्क्रिप्ट में लिखी गई है, इसलिए बॉक्सिंग से बाहर आकर टैपिंग हो जाती है।

बहुत पहले नहीं, हमने इस समस्या का सामना किया कि सर्वर द्वारा भेजे जाने वाले त्रुटि कोड को स्थानीय करते समय, क्लाइंट पर कोई अनुवाद नहीं किया गया था। ऐसा करने के लिए, प्रदाता को onIdMissing हैंडलर फेंकने की क्षमता जोड़ी गई है, जिसके साथ आप इस तरह की त्रुटि लॉग कर सकते हैं।

निष्कर्ष

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