मैंने यह लेख बर्लिन की जेएस बैठक में की गई प्रस्तुति के आधार पर लिखा था। हाल ही में, इसके बजाय लोकप्रिय और स्थिर ढांचे के बारे में कुछ रूसी-भाषा की सामग्रियां हैं, और मैंने इस स्थिति को थोड़ा ठीक करने का फैसला किया।

आप एक बार Ember.js सीखते हैं, और फिर इस ज्ञान को सभी Ember.js परियोजनाओं पर लागू करते हैं। मैं इस थीसिस को कट के नीचे प्रकट करने की कोशिश करूंगा।

मैं और एम्बर। जे.एस.

मेरे अनुभव के बारे में संक्षेप में। मैंने पहली बार एक फ्रंट-एंड डेवलपर के रूप में अपनी पहली नौकरी 2014 में Ember.js की कोशिश की थी। तब MVC प्रतिमान में ढांचा तब भी बनाया गया था और उसने CLI का उपयोग नहीं किया था। अधिक अनुभव की कमी के कारण, ताकत और कमजोरियों का न्याय करना मुश्किल था। सामान्य तौर पर, मेरे इंप्रेशन को इस 2013 लाइव लड़ाई से Ember.js और Angular.js के बीच अच्छी तरह से अवगत कराया जाता है। हां, Google फ्रेमवर्क में बहुत सारे आउट ऑफ बॉक्स थे, लेकिन Ember में थर्ड-पार्टी लाइब्रेरी को एकीकृत करना आसान है, जैसे datatables.net जैसे क्षण.js या jQuery प्लगइन्स, जिसने इसे और अधिक लचीला बना दिया।

फिर मैं दूसरी कंपनी में चला गया और Can.js और React.js के साथ एक साल तक काम किया, लेकिन 2016 में मुझे चुनने का अवसर मिला, और मैंने अपने पुराने दोस्त को मौका दिया। उस समय तक, प्रतिमान डेटा डाउन एक्ट्स अप में बदल गया था, सेवाएं और घटक दिखाई दिए। हालांकि, सामान्य तौर पर, सब कुछ परिचित और समझ में आता है, इसलिए अनुकूलन के साथ कोई विशेष समस्या नहीं थी।

Ember.js तब से मेरा मुख्य उपकरण है। और मेरी राय में, यह ढांचा मुख्य विकल्प के रूप में विचार करने योग्य है यदि आप एसपीए विकसित कर रहे हैं।

एम्बर क्यों?

Npm 2018 सर्वेक्षण में विकास में आवश्यक कई उपकरणों से js समुदाय की कुछ थकान दर्ज की गई:

हमारे सभी सर्वेक्षण उत्तरदाताओं को कम टूलींग, आरंभ करने के लिए आवश्यक कम कॉन्फ़िगरेशन, और मौजूद होने वाले औजारों के बेहतर प्रलेखन को देखना पसंद करेंगे

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

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

तो, प्रिय पाठकों, मेरे पास आपके लिए अच्छी खबर है। एम्बर समुदाय रूपरेखा के "डिजाइन सुविधाओं" के कारण पसंद के दर्द से बहुत कम प्रभावित होता है। जैसा कि एम्बर समुदाय के नवीनतम सर्वेक्षण में उत्तरदाताओं में से एक ने लिखा है:

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

क्या अनुवाद करता है

आप एक बार Ember.js सीखते हैं, और फिर इस ज्ञान को सभी Ember.js परियोजनाओं पर लागू करते हैं। ... Ember के साथ आपको पूरा अनुभव मिलता है, क्योंकि सभी ऐड-ऑन बनाए जा सकते हैं और एक ही उपकरण के सेट के साथ एकीकृत किए जा सकते हैं। विकासशील उपकरणों के लिए मानसिक ऊर्जा की बचत करना, एक परीक्षण वातावरण को तैनात करना या सत्यापन योग्य कोड लिखना एक अच्छी बात है।

आगे मैं समझाऊंगा कि एम्बर के साथ आपको यह पूरा अनुभव क्यों मिलता है, लेकिन पहले हम एक प्रश्न का उत्तर देंगे।

क्या वह जीवित भी है?

आजकल, आप शायद ही कभी एक लाइव जेएस-फ्रेमवर्क देखते हैं, जिसका विकास पिछले 5 वर्षों में नहीं रुका है। लेकिन एम्बर उनमें से एक है।

सक्रिय विकास कभी नहीं रुका, लेकिन अनुकूलन 2016 में स्थिर हो गया। यदि हम उसी Npm 2018 सर्वेक्षण की ओर मुड़ते हैं, तो निम्नलिखित चार्ट का उल्लेख किया गया है:

जैसा कि हम देखते हैं, 2017 में उलटा हुआ, और एम्बर फिर से बढ़ने लगा, औसत गति से आगे। इस घटना के लिए एक सरल व्याख्या है। 2017 में, लिंक्डइन ने अपने मुख्य साइट के दोनों (डेस्कटॉप और मोबाइल) संस्करणों को लागू करने के लिए Ember.js को फिर से डिज़ाइन करने और चुनने का फैसला किया। इस घटना ने विकास के लिए ऊर्जा प्रदान की और वर्तमान प्रवृत्ति बनाई।

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

सामान्य तौर पर, रूपरेखा जीवित और अच्छी तरह से होती है)।

अन्य जेएस फ्रेमवर्क के परिदृश्य में एम्बर

नीचे आप फ्रंट-एंड डेवलपमेंट के विभिन्न पहलुओं की एक गैर-दावा, अधूरी और व्यक्तिपरक सूची देख सकते हैं, जिसका उद्देश्य केवल अन्य पुस्तकालयों के बीच Ember.js की अनुमानित स्थिति दिखाना है। नीली और हरी रेखाएँ React.js और Vue.js, ग्रे और नारंगी रेखाओं को कोणीय और Ember.js को संदर्भित करती हैं:

Ember.js कोणीय के करीब "बॉक्सिंग" है, जब हम एक नया एसपीए बनाना चाहते हैं तो सभी कार्यों के लिए डिफ़ॉल्ट कार्यान्वयन और उपकरण प्रदान करने की कोशिश कर रहे हैं। यदि कुछ आपको सूट नहीं करता है या कुछ गायब है, तो आप इसके लिए उपयुक्त एडऑन की तलाश कर रहे हैं (अच्छी तरह से, या इसे स्वयं लिखें)। Addons के बारे में थोड़ा कम।

क्या परिचित होगा?

React.js

यदि आप React.js की दुनिया से आते हैं, तो आप पृष्ठ के टूटने से घटकों के पदानुक्रम में परिचित होंगे। एम्बर में, आप यह भी सोचेंगे कि आपके पेज को घटकों में तोड़ने और उनमें स्थानीय राज्यों को कैसे अलग करना सबसे अच्छा है।
यदि आप रिएक्ट-राउटर से परिचित हैं, तो एम्बर में राउटर भी आपको परिचित लगेगा। प्रारंभ में, रिएक्टर राउटर को इमर्स से कॉपी किया गया था, हालांकि अब यह परियोजना लंबे समय से अपना जीवन जी रही है।
अंत में, यदि आप Redux और / या ग्राफकॉल के साथ काम करने में सहज महसूस करते हैं, तो आप उन्हें Ember.js ( यहां और यहां देखें ) के साथ भी उपयोग कर सकते हैं ।

इसके अलावा नवीनतम EmberConf पर प्रतिक्रिया और एम्बर के लिए पैटर्न पर एक प्रस्तुति थी।

Vue.js

स्वाभाविक रूप से, आप, साथ ही रिएक्ट के लोग, एक इंटरफ़ेस को घटकों में विभाजित करने के प्रतिमान से परिचित होंगे। इसके अलावा, आप टेम्प्लेट और गणना किए गए गुणों की अवधारणाओं से परिचित होंगे।

Angular.js

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

क्या अपरिचित होगा?

अब हम उन भागों की ओर बढ़ते हैं, जो अपरिचित प्रतीत होते हैं और जिनसे प्रश्न उठने की संभावना है।

एम्बर-क्लि, वेबपैक नहीं

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

यह बहुत से असामान्य लग सकता है कि उपकरण वेबपैक का उपयोग नहीं करता है। इसके बजाय, ब्रोकोली.जेएस का उपयोग किया जाता है। सामान्य तौर पर, इससे, आवेदन के विकास के दौरान, आप या तो गर्म या ठंडा नहीं होंगे।

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

हार्ड फ़ाइल संरचना

यह क्षण अक्सर रूपरेखा से अपरिचित लोगों को सदमे में फेंक देता है। मानक एम्बर एप्लिकेशन की फ़ाइल संरचना को देखें:

जब आप जानते हैं कि इसे बदला नहीं जा सकता है तो आप क्या कहते हैं? आप फ़ाइलों को अन्य फ़ोल्डरों में स्थानांतरित नहीं कर सकते हैं और उन्हें अपने तरीके से नाम दे सकते हैं। एक बार, इस वजह से, मैंने फ्रेमवर्क के संबंध में एपिथेट "फासीवादी" भी सुना।

हालांकि, इस तरह के प्रतिबंध को विशेष रूप से पेश किया गया था। यहाँ सबूत है:

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

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

ऐड-ऑन (ऐड-ऑन)

समय ने दिखाया है कि कठोर फ़ोल्डर संरचना के निर्णय का एक और फायदा है। मैं इसे एक सरल उदाहरण पर प्रकट करने का प्रयास करूंगा।

मान लें कि आपको कई अनुप्रयोगों में एक ही घटक का उपयोग करने की आवश्यकता है (ठीक है, अचानक)। फिर, यदि आप जानते हैं कि घटक हमेशा app/components/ फ़ोल्डर में झूठ बोलते हैं, तो आप इस घटक को एक अलग npm पैकेज में चुन सकते हैं, इसके आधार पर जोड़ सकते हैं और स्मार्ट Ember-cli इस घटक को संकलन चरण में अनुप्रयोग में खींच लेगा। और आप इसे अपने अनुप्रयोगों में पुन: उपयोग कर सकते हैं।

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

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

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

बीई के साथ संचार

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

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

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

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

डिफ़ॉल्ट रूप से, एम्बर-डेटा JSON: API विनिर्देशन का पालन करता है ( यहाँ ग्राफकैल और रीस्ट के साथ तुलना के बारे में)। अपने स्वयं के अनुभव से मैं कह सकता हूं कि JSON: API का उपयोग करने से आपके और आपके बैकेंड डेवलपर्स के लिए बहुत समय और नैतिक ताकत बचती है। आप चर्चा नहीं कर रहे हैं कि URL क्या होना चाहिए, ऊंट में या कबाब मामले में विशेषताएँ और पैरामीटर होने चाहिए, एम्बेडेड संसाधनों के लिए अनुरोध और प्रतिक्रिया में JSON संरचना क्या होनी चाहिए, इसे बदलने के लिए PATCH या PUT का उपयोग किया जाना चाहिए। आप केवल मॉडल, उनके संबंधों और विशेषताओं के लिए व्यावसायिक नियमों पर चर्चा करते हैं। यह एक और मामला है जहां पसंद को सीमित करने से उत्पादकता पर सकारात्मक प्रभाव पड़ता है।

कहाँ से शुरू करें?

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

वह धीरे-धीरे आपको सभी मुख्य बिंदुओं से परिचित कराएगा:

• एम्बर-क्ली का उपयोग करके एप्लिकेशन कैसे बनाएं
• कैसे घटक, पथ, मॉडल, आदि बनाने के लिए
• एम्बर-डेटा का उपयोग कैसे करें
• एक जटिल घटक कैसे लिखें
• तृतीय-पक्ष लायब्रेरी को एम्बेड कैसे करें
• कैसे तैनात करें

कहां से मांगे?

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

अन्य संचार चैनल वेबसाइट पर देखे जा सकते हैं।

अद्यतन: रूसी में, आप टेलीग्राम चैनल ember_js में एम्बर के बारे में पूछ सकते हैं

अंतभाषण

फाइनल में, मैं एक बार फिर मुख्य थीसिस पर जोर देना चाहूंगा। आप एक बार Ember.js सीखते हैं, और फिर सभी परियोजनाओं के लिए इस ज्ञान को लागू करते हैं ।

आपका ध्यान के लिए धन्यवाद!