एम्बर ऑक्टेन, एम्बर.जेएस फ्रेमवर्क का नया संस्करण है, साथ ही साथ महत्वाकांक्षी वेब एप्लिकेशन बनाने के लिए टीमों के लिए सबसे अच्छा तरीका है।
20 दिसंबर को, एम्बर 3.15 का एक नया संस्करण जारी किया गया था। और यह ओकटाइन है! जिज्ञासु यह वेब विकास के लिए क्या मतलब है? यह पोस्ट आपको अपना रास्ता खोजने में मदद करेगी।
Googlotranslite और मैंने अनुवाद (विशेषकर googlotranslate) पर कड़ी मेहनत की। बिल्ली के लिए आपका स्वागत है!
तकनीकी विवरण (अपग्रेड स्ट्रेटेजी, लीगेसी फीचर्स, एम्बर डेटा की नई सुविधाएँ) के लिए, एम्बर 3.15 रिलीज़ ब्लॉग देखें।
एम्बर ऑक्टेन क्या है?
एम्बर ने हमेशा एक बेहतर वातावरण बनाने पर ध्यान केंद्रित किया है जो विभिन्न कौशल स्तरों वाले लोग वेब एप्लिकेशन बनाने के लिए एक साथ उपयोग कर सकते हैं। ऑक्टेन एम्बर के घटकों और प्रतिक्रिया प्रणाली को अद्यतन करता है ताकि उन्हें अधिक आधुनिक और उपयोग में आसान बनाया जा सके। अब एम्बर का उपयोग करना अधिक मजेदार होगा!
संस्करण 3.15 के साथ शुरू, एम्बर डेवलपर्स नए अनुप्रयोगों और ऐड-ऑन के लिए ओकटाइन की सिफारिश करते हैं। यदि आप 3.15 संस्करण या बाद के संस्करण के साथ ember new का उपयोग करके एक नया एप्लिकेशन बनाते हैं, तो आपको एक नया ऑक्टेन एप्लिकेशन मिलेगा।
ओकटाइन मजेदार है
ऑक्टेन के संवर्द्धन के मूल में एम्बर कोर के दो प्रमुख बदलाव हैं: एक नया घटक मॉडल और एक नई प्रतिक्रिया प्रणाली।
एम्बर पर मौजूदा अनुप्रयोगों के लिए, दोनों परिवर्तन मौजूदा कोड के साथ पूरी तरह से संगत हैं। Ember 3.15 एप्लिकेशन को Ember 3.15 में अपडेट करना एक संगत परिवर्तन है, जैसा कि संस्करण संख्या बताती है।
झिलमिल घटक
एम्बर ऑक्टेन में पहला बड़ा सुधार ग्लिमर घटक है। एम्बर 1.0 के साथ शुरू, एम्बर में जावास्क्रिप्ट सिंटैक्स पर आधारित एक-घटक प्रणाली है जो उस समय उपलब्ध थी।
पहले: क्लासिक एम्बर घटक
जब आप क्लासिक घटकों को देखते हैं, तो आपकी आंख को पकड़ने वाली पहली चीज यह है कि आप जावास्क्रिप्ट सिंटैक्स का उपयोग करके "मूल तत्व" को कॉन्फ़िगर करते हैं।
import Component from '@ember/component'; export default Component.extend({ tagName: 'p', classNames: ["tooltip"], classNameBindings: ["isEnabled:enabled", "isActive:active"], })
के बाद: टिमटिमाना घटकों
दूसरी ओर, चमकदार घटक, मूल तत्व को किसी अन्य तत्व की तरह व्यवहार करने की अनुमति देते हैं। यह घटक मॉडल को सरल करता है, केवल घटक के मूल तत्व के साथ काम करने के लिए दूसरे एपीआई की उपस्थिति से जुड़े विशेष मामलों को छोड़कर।
इसका मतलब यह भी है कि आप एक मूल तत्व के बिना एक घटक बना सकते हैं, और यह काम करेगा।
DOM व्यवहार का पुन: उपयोग करने के लिए संशोधक का उपयोग करना
एम्बर घटक मॉडल में दूसरा प्रमुख सुधार तत्व संशोधक है, एक ऐसी सुविधा जो आपको पुन: प्रयोज्य डोम व्यवहार बनाने की अनुमति देती है जो किसी विशेष घटक के साथ संबद्ध नहीं है।
To: मिक्सिंस
क्लासिक एम्बर में, यदि आप DOM व्यवहार के एक हिस्से को परिभाषित करना चाहते हैं जिसे आप अपने अनुप्रयोग में पुन: उपयोग कर सकते हैं, तो आपको एक घटक मिक्सिन को परिभाषित करना होगा जो संबंधित जीवनचक्र के हुक को लागू करता है।
उदाहरण के लिए, हमारे पास एक तृतीय-पक्ष पुस्तकालय है जो सक्रियता प्रदान करता है और कार्य को निष्क्रिय करता है, जिनमें से प्रत्येक एक तत्व लेता है। क्लासिक एम्बर में, आप इस तरह एक मिश्रण लिख सकते हैं:
import Mixin from '@ember/object/mixin'; export default Mixin.create({ didInsertElement() { this._super(); activateTabs(this.element); } willDestroyElement() { this._super(); deactivateTabs(this.element); } })
और फिर आप इसे इस तरह के एक घटक में उपयोग करेंगे:
import Component from '@ember/component'; export default Component.extend(Tabs, {
उपयोगकर्ता इंटरफ़ेस संरचना के लिए मिक्सिंस का उपयोग करने के नुकसान को अच्छी तरह से जावास्क्रिप्ट पारिस्थितिकी तंत्र ( मिक्सडिन माना जाता है हानिकारक , हुक) Vue.js संस्करण 3.0 , svelte के लिए अस्वीकृत मिश्रण प्रस्ताव , एम्बर पीएफसी: डीरेक्सेट मिक्सिन ) के लिए अच्छी तरह से प्रलेखित किया गया है। सबसे बड़ी समस्या नाम संघर्ष है। मिक्सी में कोई भी विधि किसी भी अन्य मिक्सिन में एक विधि के साथ संघर्ष कर सकती है, बिना संघर्षों को हल करने के लिए एक अच्छा तरीका है।
एम्बर के संदर्भ में, डोम व्यवहार का पुन: उपयोग करने के लिए एम्बर घटक मिश्रणों का उपयोग करने के साथ एक और समस्या है। यदि आप एक तत्व के लिए Tabs का उपयोग करना चाहते हैं, तो आपको इस तत्व को जावास्क्रिप्ट वर्ग के साथ एक घटक में बदलना होगा, जो कि असुविधाजनक है।
यद्यपि हम मिश्रण से बचने की सलाह देते हैं, आप उन्हें Ember 3.15 में उपयोग कर सकते हैं। ऐड-ऑन आपको अभी भी मिश्रण प्रदान कर सकते हैं।
के बाद: तत्व संशोधक
एम्बर ऑक्टेन डोम व्यवहार का पुन: उपयोग करने के लिए एक नया तरीका प्रदान करता है: तत्व संशोधक। एक तत्व संशोधक लिखने का सबसे आसान तरीका एक फ़ंक्शन लिखना है जो एक तत्व लेता है और इसके साथ कुछ करता है। फ़ंक्शन वैकल्पिक रूप से एक विनाशकारी फ़ंक्शन वापस कर सकता है, जिसे एम्बर तत्व को नष्ट करने पर चलाया जाना चाहिए।
यह तब होता है जब हमारे Tabs एक संशोधक के रूप में ओवरराइड होने पर दिखते हैं।
import { modifier } from 'ember-modifier'; export default modifier(element => { activateTabs(element); return () => deactivateTabs(element); });
सहमत हूँ, सरल!
आप तत्व संशोधक सिंटैक्स का उपयोग करके किसी भी तत्व के लिए एक संशोधक का उपयोग कर सकते हैं।
तत्व संशोधक किसी भी तत्व के साथ काम करते हैं, जिसका अर्थ है कि आपको पुन: प्रयोज्य डोम व्यवहार बनाने के लिए संपूर्ण घटक बनाने की आवश्यकता नहीं है।
संशोधक लिखने का यह तरीका मानता है कि जब संशोधक तर्क बदलते हैं, तो आप विध्वंसक शुरू कर सकते हैं और संशोधक को खरोंच से शुरू कर सकते हैं। यदि आपको अधिक दानेदार नियंत्रण की आवश्यकता है, तो ember-modifier पैकेज भी अधिक उन्नत एपीआई प्रदान करता है।
Glimmer से रिएक्टिविटी उधार ली गई
आधुनिक बाहरी इंटरफ़ेस की एक विशिष्ट विशेषता इसका "प्रतिक्रियात्मक मॉडल" है। प्रतिक्रियात्मक मॉडल आपको बताता है कि अपने कार्यक्रम में डेटा की पहचान और हेरफेर कैसे करें ताकि बदलाव किए जाने पर आउटपुट DOM को सही ढंग से अपडेट किया जाए।
एम्बर ऑक्टेन एक बहुत सरल प्रतिक्रियाशील मॉडल का पता लगाता है जिसे ट्रैक किए गए गुण कहा जाता है।
ट्रैसेबिलिटी रिएक्टिविटी मॉडल क्लासिक रिएक्टिविटी मॉडल के साथ संगत है। यह इस तथ्य के कारण है कि दोनों एपीआई लिंक और मान्यताओं के आधार पर एम्बर आंतरिक प्रतिक्रियात्मकता मॉडल के हिस्से के रूप में कार्यान्वित किए जाते हैं।
पहले: गणना किए गए गुण और उनकी सीमाएं
क्लासिक एम्बर में, आप set का उपयोग करके प्रतिक्रियाशील गुणों को संशोधित करते set , और किसी भी गणना को गणना वाले फ़ील्ड के रूप में वर्णित किया जाना चाहिए जो पूरी तरह से सभी निर्भरताओं को सूचीबद्ध करना चाहिए।
यहां एम्बर 3.14 मैनुअल से परिकलित फ़ील्ड का एक उदाहरण दिया गया है:
import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = Person.create({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
यह डिजाइन छोटे कार्यों में गणना की गई संपत्ति के टूटने को जटिल बनाता है, क्योंकि यह अभी भी उपयोग किए जाने वाले सभी गुणों को सूचीबद्ध करने की आवश्यकता है, चाहे वे जहां भी उपयोग किए जाएं। व्यवहार में, इसका मतलब है कि क्लासिक एम्बर में आप दूसरों पर कुछ गणना किए गए गुणों को ढेर करते हैं, जो काम करता है, लेकिन बल्कि बोझ है।
के बाद: ट्रैक किए गए गुण
ऑक्टेन रिएक्टिविटी मॉडल में, ट्रैक किए गए गुण बहुत अधिक संक्षिप्त हैं।
class Person { @tracked firstName; @tracked lastName; @tracked age; @tracked country; constructor({ firstName, lastName, age, country }) { this.firstName = firstName; this.lastName = lastName; this.age = age; this.country = country; } get fullName() { return `${this.firstName} ${this.lastName}`; }), get description() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) } let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); captainAmerica.description;
आप नियमित जावास्क्रिप्ट वर्ग से शुरू करते हैं और किसी भी फ़ील्ड को एनोटेट कर सकते हैं जो @tracked साथ DOM को प्रभावित कर सकता है। आपको गेटर्स या फ़ंक्शंस को एनोटेट करने की आवश्यकता नहीं है, इसलिए आप अपना कोड अपने इच्छित तरीके से तोड़ सकते हैं।
मॉनिटर किए गए गुणों की प्रतिक्रियात्मकता मॉडल की एक विशेषता यह है कि यदि आप @tracked एनोटेशन को @tracked हैं, तो कोड बिल्कुल उसी तरह से काम करेगा। जब आप @tracked जोड़ते हैं, तो केवल एक चीज यह है कि यदि संपत्ति में परिवर्तन होता है, तो DOM का कोई भी हिस्सा जो इस संपत्ति को अपनी गणना के भाग के रूप में उपयोग करता है, उसे सही ढंग से अपडेट किया जाएगा।
प्रलेखन पर ध्यान दें
ऑक्टेन सिर्फ नई सुविधाओं से अधिक है। इसके अलावा, हमने उपयोगकर्ताओं को यह दिखाने के लिए दस्तावेज़ीकरण को अपडेट करने के लिए बहुत ध्यान दिया कि ऑक्टेन-शैली के एप्लिकेशन कैसे बनाएं।
ट्यूटोरियल पहला तरीका है जिससे लोग एम्बर एप्लिकेशन बनाना सीखते हैं। एम्बर 3.15 ने सुपर किराये ट्यूटोरियल को पूरी तरह से अपडेट किया, इसे ओकटाइन शैली में फिर से लिखा। पाठ संरचना को भी अद्यतन और अद्यतन किया गया है।
गाइड को भी काफी अपडेट किया गया है। अब हम पहले भ्रमित संगठन को खत्म करके घटकों के बारे में बात करते हैं (उदाहरण के लिए, टेम्पलेट और घटकों के बीच अलगाव)। नया मैनुअल उन नियंत्रकों से जोर हटाता है जो ऑक्टेन में कम महत्वपूर्ण हैं। क्लासिक ऑब्जेक्ट मॉडल अब ऑक्टेन माइग्रेशन अनुभाग में शामिल है।
एम्बर इंस्पेक्टर बस बेहतर हो गया
एम्बर इंस्पेक्टर एक बहुत महत्वपूर्ण हिस्सा है कि एम्बर डेवलपर्स एम्बर एप्लिकेशन कैसे बनाते हैं।
हमें बहुत गर्व है कि वर्षों से हमने क्रोम वेब स्टोर पर पांच सितारा रेटिंग बनाए रखी है।
ऑक्टेन के लिए, एम्बर निरीक्षक को ऑक्टेन की प्रथम श्रेणी की सुविधाओं का समर्थन करने के लिए अद्यतन किया गया है, जिसमें ट्रैक किए गए गुण और ग्लिमर घटक शामिल हैं।
अपडेट किया गया इंस्पेक्टर नकली अवधारणाओं और एक पुरानी भाषा (उदाहरण के लिए, "व्यू ट्री") को समाप्त करता है। इसमें कई दृश्य संवर्द्धन भी शामिल हैं, जिसमें एक नया घटक टूलटिप शामिल है जो ऑक्टेन के मुहावरों को बेहतर ढंग से दर्शाता है। एक घटक के लिए टूलटिप को भी अद्यतन किया जाता है, जो छोटे घटकों के साथ एक पुरानी समस्या को ठीक करता है।
काम शुरू
भले ही आप एक नए एम्बर डेवलपर हों, जो कई साल बाद एम्बर में लौट आए हैं, या पहले से ही एक सक्रिय एम्बर डेवलपर है, ऑक्टेन का उपयोग करके एप्लिकेशन बनाने का तरीका जानने का सबसे तेज़ और आसान तरीका एक अद्यतन गाइड के माध्यम से जाना है। (अनुवादक से: सक्रिय डेवलपर्स के लिए तुलनात्मक धोखा पत्र का अध्ययन करना उपयोगी होगा)
एम्बर ऐड-ऑन इकोसिस्टम, एम्बर का एक बड़ा हिस्सा है, इसलिए आप अपनी परियोजना बनाने की प्रक्रिया को गति देने के लिए ऐड-ऑन का उपयोग करना चाहते हैं।
एम्बर ऑब्जर्वर एम्बर ऐड-ओन्स पारिस्थितिकी तंत्र के लिए एक सूची है। प्रत्येक Addon औपचारिक मानदंड के विश्लेषण के आधार पर एक गुणवत्ता मूल्यांकन प्राप्त करता है, जैसे कि एक महत्वपूर्ण README की उपस्थिति, चाहे एडऑन में स्वचालित असेंबली हो, और क्या Addon एक से अधिक लोगों द्वारा समर्थित है। इस सप्ताह से, यह भी संकेत दिया जाएगा कि क्या ऐडऑन रेडी है।
अधिकांश ऐड-ऑन को किसी भी बदलाव के बिना ऑक्टेन रेडी होना चाहिए। एम्बर ऑब्जर्वर समुदाय को पहले से समर्थित पैकेजों में ओकटाइन मुद्दों को पहचानने और हल करने में मदद करता है।
सहज अंतर के बारे में थोड़ा और
गणना की गई संपत्तियों को बाहर करने के अलावा, ग्लिमर रिएक्टिविटी मॉडल में एम्बर प्रॉक्सी या ऑब्जर्वर भी शामिल नहीं हैं। ऑक्टेन रिएक्टिविटी मॉडल क्लासिक की तुलना में अधिक शक्तिशाली है, लेकिन इसका उपयोग करना बहुत आसान है।
ऑक्टेन प्रतिक्रियात्मकता मॉडल मौजूदा एम्बर उपयोगकर्ताओं के लिए उपयोगी नहीं होगा यदि ऑक्टेन मॉडल का उपयोग करके कार्यान्वित वस्तुओं से क्लासिक प्रतिक्रियात्मक मॉडल का उपयोग करके लागू वस्तुओं का उपयोग करना मुश्किल होगा। इसलिए, हमने यह सुनिश्चित करने के लिए कड़ी मेहनत की कि मौजूदा एम्बर एप्लिकेशन स्वतंत्र रूप से ट्रैक की गई संपत्तियों का उपयोग करके बनाई गई कक्षाओं में क्लासिक वस्तुओं का उपयोग कर सकते हैं।
class Contact { @tracked person; constructor(person) { this.person = person; } get description() { return this.person.description; } } import EmberObject, { computed } from '@ember/object'; const Person = EmberObject.extend({ firstName: null, lastName: null, age: null, country: null, fullName: computed('firstName', 'lastName', function() { return `${this.firstName} ${this.lastName}`; }), description: computed('fullName', 'age', 'country', function() { return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`; }) }); let captainAmerica = new Person({ firstName: 'Steve', lastName: 'Rogers', age: 80, country: 'USA' }); let contact = new Contact(captainAmerica); contact.description;
चूंकि दो प्रणालियां संगत हैं, पुस्तकालयों में एपीआई में बड़े बदलाव के बिना ओक्टेन रिएक्टिविटी सिस्टम का उपयोग किया जा सकता है।
यह आपको मॉड्यूल द्वारा ऑक्टेन मॉड्यूल का उपयोग करके मौजूदा एम्बर अनुप्रयोगों को फिर से लिखने की अनुमति देता है।
एम्बर ओकटाइन में आपकी रुचि के लिए धन्यवाद।
ओकटाइन एक ऐसी परियोजना है जिसे एम्बर समुदाय डेवलपर्स के साथ साझा करने के लिए खुश है, दोनों नए और अनुभवी। ऑक्टेन वेब अनुप्रयोगों को बनाने का एक आधुनिक, उत्पादक तरीका है जो आपको हमारे काम में आनंद और स्थिरता प्रदान करने की अनुमति देता है।
एम्बर एपीआई और प्रलेखन का पूर्ण अद्यतन समुदाय और एम्बर कोर टीमों के प्रत्येक सदस्य के प्रयासों के बिना हासिल नहीं किया जा सकता था। इसका हिस्सा बनने, इस परियोजना में योगदान देने और एम्बर को वेब विकास के लिए एक शानदार विकल्प बनने में मदद करने के लिए धन्यवाद।
अनुवादक से:
एम्बर के बारे में रूसी में, आप टेलीग्राम चैनल ember_js में पूछ सकते हैं