MeteorJS यूनिवर्स के लिए पहला कदम

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

स्थापना

तो, शुरुआत के लिए, हमें उल्का स्वयं स्थापित करना होगा। लिनक्स जैसे OS और OSX के लिए, आपको टर्मिनल में कमांड चलाना होगा

$ curl https://install.meteor.com/ | sh 

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

एक प्रोजेक्ट बनाएं

एक परियोजना बनाना सरल से अधिक सरल है, रूपरेखा में उल्का उपयोगिता शामिल है, जिसके साथ हम एक परियोजना बनाएंगे। यह टर्मिनल में निष्पादित करने के लिए पर्याप्त है

 $ meteor create projectName 

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

 projectName.css projectName.html projectName.js smart.json smart.lock 

इन तीनों फाइलों में पूरा आवेदन लिखा जा सकता है। बेशक, हम ऐसा नहीं करेंगे।

उल्का आपको यह तय करने की अनुमति देता है कि अपनी परियोजना में फ़ाइलों को कैसे व्यवस्थित किया जाए। यह नियम लागू नहीं करता है, जैसे कि रूबी ऑन रेल्स, आप फ़ाइलों और फ़ोल्डरों को पसंद कर सकते हैं।
अब आप सर्वर शुरू कर सकते हैं। यहां सब कुछ सरल भी है। प्रोजेक्ट डायरेक्टरी में, $ meteor कमांड निष्पादित करें। अब हमारा आवेदन 3000 पोर्ट पर उपलब्ध है। अब तक, इसमें कुछ भी अलौकिक नहीं है, लेकिन यह जादुई अंतर्निहित डेटा प्रतिक्रिया के साथ पहले से ही एक व्यावहारिक उल्का अनुप्रयोग है। यदि आप यह नहीं जानते हैं कि यह अभी तक क्या है, तो चिंता न करें, आप बाद में इसके बारे में अधिक जानेंगे।
अब आप थोड़ा प्रयोग कर सकते हैं।
सबसे पहले, उल्का द्वारा बनाई गई तीन फ़ाइलों को हटा दें, हमें उनकी आवश्यकता नहीं होगी।
अगला, आपको दो फ़ोल्डर बनाने की आवश्यकता है - क्लाइंट और सर्वर। यह कुछ फ़ाइल होस्टिंग सम्मेलनों में से एक है। सर्वर फ़ोल्डर के अंदर जो कुछ भी है वह केवल सर्वर पर निष्पादित किया जाएगा और तदनुसार, क्लाइंट फ़ोल्डर में केवल क्लाइंट पर। अन्य सभी फाइलें, चाहे वे कहीं भी हों, दोनों वातावरण में निष्पादित की जाएंगी। तुरंत एक जोड़े को और अधिक विवरण - lib निर्देशिका से फाइलें दूसरों की तुलना में पहले से जुड़ी होंगी, और main.* सभी के बाद फाइलें।

फ़ाइलों को जोड़ने के बारे में थोड़ा सा

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

उल्कापिंड और वायुमंडल

दरअसल प्लगइन्स के बारे में। जैसा कि आप पहले से ही जानते हैं, उल्का अपने पैकेट प्रणाली का उपयोग करता है। पैकेज कई प्रकार के होते हैं।

कोर पैकेज

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

उल्का स्मार्ट पैकेज

लगभग 40 प्लगइन्स का एक समूह जो उल्का उपयोगिता का उपयोग करके स्थापित किया गया है। आप टर्मिनल में कमांड निष्पादित करके उनकी सूची देख सकते हैं

 $ meteor list 

आप कमांड के साथ प्लगइन स्थापित कर सकते हैं

 $ meteor add packageName 

सर्वर को बंद किए बिना भी।
लेकिन आखिरकार, यहां तक ​​कि 40 प्लगइन्स - यह नगण्य है जो आप कह सकते हैं, और आप बिल्कुल सही होंगे।

स्मार्ट पैकेज वातावरण

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

 $ sudo npm install -g meteorite 

स्थापना के बाद, आप उल्का कमांड के उपयोग को mrt के साथ बदल सकते हैं, जो या तो पूरी तरह से मानक कार्यक्षमता को दोहराता है (उदाहरण के लिए, बस सर्वर को $ mrt जाने पर शुरू होता $ mrt ), या विशिष्ट कार्यक्षमता को जोड़ता है, कहते हैं, जब कहा जाता है

 $ mrt add foundation-5 

इस स्थिति में वातावरण सूची से नींव -5 प्लगइन को जोड़ता है।
यह एक बहुत अच्छा प्लग-इन इंस्टॉलेशन सिस्टम को चालू करता है।

एनपीएम - पैकेज

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

व्यापार के लिए

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

 $ mrt add bootstrap 

चलो टेम्पलेट के साथ शुरू करते हैं। टेंपरिंग के लिए उल्का हैंडलबार्स इंजन का इस्तेमाल करता है। क्लाइंट फ़ोल्डर में मुख्य टेम्पलेट बनाएँ - main.html

 <head> <title>Simple To-Do list</title> </head> <body> <div class="container"> <header class="navbar"> <div class="navbar-inner"> <a class="brand" href="/">To-Do</a> </div> </header> <div id="main" class="row-fluid"> {{> todosList}} </div> </div> </body> 

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

 /client/views/todosList.html: <template name="todosList"> <div class="todos"> {{#each todos}} {{> todo}} {{/each}} </div> </template> 

 /client/views/todo.html: <template name="todo"> <div class="todo"> <h3>{{task}}</h3> </div> </template> 

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

 /collections/todos.js: Todos = new Meteor.Collection('todos'); 

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

 /client/views/todosList.js: Template.todosList.helpers({ todos: Todos.find() }); 

याद रखें, सूची टेम्पलेट में, हमने {{#each todos}} का उपयोग किया है? .. अब हम केवल इस "चर" के लिए स्रोत सेट करते हैं।
अब आप ब्राउज़र कंसोल खोल सकते हैं और संग्रह में कार्य जोड़ सकते हैं।

 Todos.insert({task: '  meteorJS'}); 

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

अंत में, मैं कुछ उपयोगी लिंक छोड़ दूंगा:

वास्तव में साइट उल्का - यहाँ हम फ्रेमवर्क के बारे में कुछ परिचयात्मक वीडियो देखते हैं, और प्रलेखन पढ़ते हैं।
उपयोगी सामग्रियों के लिंक का एक पूरा संग्रह

पढ़ने के लिए धन्यवाद, मुझे उम्मीद है कि आप कम से कम इस में रुचि रखते हैं, ज़ाहिर है, दिलचस्प रूपरेखा।