🤽🏿 🖐️ 🎋 अपने खुद के जेएस एसडीके का निर्माण

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

उन लोगों के लिए स्लाइड्स जिन्हें बहु-अक्षर पढ़ना पसंद नहीं है।

और सबसे अधीर के लिए: हमें क्या मिला और हमारा सैंडबॉक्स ।

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

क्यों

ध्यान आकर्षित करने के लिए तस्वीर में दिखाए गए नए प्रकार के वाहन के साथ आने के लिए हमें अपने स्वयं के एसडीके की आवश्यकता नहीं थी।

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

समानताएं स्वचालन का एक स्पष्ट विचार प्राप्त करने के लिए , आपको यह समझने की आवश्यकता है कि ओएसएस क्या है । यह परिचालन समर्थन प्रणालियों का एक वर्ग है जो नेटवर्क के बुनियादी ढांचे, लेखांकन और संसाधनों के आवंटन का प्रबंधन करता है। मुख्य उपभोक्ता टेलीकॉम और बड़े होस्टर्स हैं। यह न केवल उनके लिए बुनियादी ढांचे का प्रबंधन करने के लिए महत्वपूर्ण है, बल्कि अपने ग्राहकों को भी सेवाएं बेचने के लिए महत्वपूर्ण है। सेवा की बिक्री से, दूरसंचार को अच्छी आय प्राप्त होती है। 10 मिलियन उपयोगकर्ताओं के साथ एक दूरसंचार की कल्पना करें। अगर 1% उपयोगकर्ता $ 1 की सेवा खरीदते हैं, तो भी इसका राजस्व $ 100,000 होगा।

ए पी एस

समानताएं द्वारा विकसित एक मानक जिसके साथ समानताएं स्वचालन पारिस्थितिकी तंत्र में सेवाओं को एकीकृत करना संभव है। मानक का नवीनतम संस्करण एपीएस 2 है , जो संस्करण 1.x की त्रुटियों को ठीक करता है।

एपीएस 1.x

APS 1.x ने पूर्णांक वस्तुओं के व्यापार मॉडल और घोषित रूप से UI को मेटा फ़ाइल में वर्णित करके अनुप्रयोगों को एकीकृत करने की अनुमति दी। इस प्रकार, यूआई स्वचालित रूप से व्यापार मॉडल से उत्पन्न हुआ था, जिसने यूएक्स को नकारात्मक रूप से प्रभावित किया था। एक स्क्रिप्ट-उन्मुख उपयोगकर्ता इंटरफ़ेस बस करना असंभव था। इसलिए, एपीएस 2.x बनाया गया था।

एपीएस 2.x

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

प्रतिबंध

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

एपीएस जेएस एसडीके

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

हमने प्रलेखन पर भी प्रारंभिक जोर दिया, जैसा कि जेएस एसडीके न केवल आंतरिक रूप से उपयोग किया जाता है।

कैसे

हमने अपना ढांचा कैसे बनाया और हमने किन नियमों का पालन किया?

मौजूदा चौखटे इस्तेमाल किया;
विचारशील एपीआई के बारे में मत भूलना;
परीक्षण प्रेरित विकास का पालन किया - शुरू में स्वचालित परीक्षण बनाए;
प्रलेखन पर काम किया
और सैंडबॉक्स के ऊपर जहां आप कार्रवाई में रूपरेखा का प्रयास कर सकते हैं।

मौजूदा चौखटे का उपयोग करना

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

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

विकल्प के रूप में, हमने माना:

ExtJS
JQuery यूआई
लोडर (आवश्यकताएँ / कॉमनज / ...) + एमवी * फ्रेमवर्क (नॉकआउट जेएस / एंगुलरजेएस / ...)
दोजो टूलकिट

ExtJS

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

jQueryUI

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

लोडर + एमवी * फ्रेमवर्क

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

दोजो टूलकिट

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

लेकिन हमने अभी भी Dojo का उपयोग करने का निर्णय लिया है:

सिस्टम की बारीकियों का मोबाइल उपकरणों पर सक्रिय उपयोग नहीं होता है (अब बहुत कुछ बदल गया है, लेकिन, दूसरी तरफ, हमने फ्रेमवर्क की संबंधित समस्याओं को हल कर दिया है);
हमने प्रवेश सीमा को कम करने की कोशिश की, जिसके बारे में हम नीचे चर्चा करेंगे।

Dojo के गुणों के बारे में अधिक जानने के लिए , डेविड वाल्श देखें । आप टिप्पणियों में Dojo और ExtJS की तुलना भी पढ़ सकते हैं।

विचारशील एपीआई

किसी भी ढांचे का आधार एक सुविचारित एपीआई है।

एएमडी

हमारे जेएस एसडीके की नींव एएमडी मॉड्यूल हैं जो दृश्य घटक हैं - विगेट्स, डेटा और विभिन्न सहायक उपयोगिताओं के साथ काम करने के लिए घटक। इसके अलावा, एएमडी प्रारूप आपको किसी भी तीसरे पक्ष के पुस्तकालयों को परियोजना में इस पैकेजिंग प्रारूप का समर्थन करने की अनुमति देता है। इस प्रकार, हम डेवलपर्स को उनकी प्राथमिकताओं तक सीमित नहीं करते हैं।

विजेट

विज़ुअल घटक - विजेट - HTML प्रतिनिधित्व से तार्किक रूप से अलग हैं। वे गतिशील रूप से अपने गुणों के मूल्यों को बदल सकते हैं और एक दूसरे से विरासत में प्राप्त कर सकते हैं। डेवलपर्स की सुविधा के लिए, विगेट्स का वर्णन करने के 3 तरीके हैं। इसके अलावा, एक स्क्रीन पर केवल एक का उपयोग करना बिल्कुल आवश्यक नहीं है, विधियों को स्वतंत्र रूप से जोड़ा जा सकता है।

विगेट्स को एक दूसरे में शामिल करें

विजेट्स टेम्पलेट स्तर पर एक दूसरे को शामिल कर सकते हैं। उदाहरण के लिए, aps / स्लाइडर विजेट में dijit / form / HoroscopeSlider क्षैतिज स्क्रॉल और aps / Textbox शामिल हैं:

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

घोषणा की घोषणा

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

उदाहरण कोड

require(["dojo/parser", "aps/ready!"], function(parser){ parser.parse(); });

 <fieldset data-dojo-type=”aps/FieldSet” title=“I am aps/FieldSet”> <input type=”checkbox” data-dojo-type="aps/CheckBox" data-dojo-props=" label: 'CheckBox', description: 'I am aps/CheckBox'" > </fieldset>

विजेट सॉफ्टवेयर घोषणा

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

उदाहरण कोड

 require([ "aps/FieldSet", "aps/CheckBox", "aps/ready!" ], function (FieldSet, CheckBox) { var fs = new FieldSet({ title : “I am aps / FieldSet” }, "idDiv"); fs.addChild(new CheckBox({ label : “CheckBox”, description : “I am aps / CheckBox” }); fs.startup(); });

बूटलोडर का उपयोग करना

स्क्रीन का वर्णन करने का तीसरा तरीका बूटलोडर के माध्यम से है। यह हमारे द्वारा विकसित किया गया था, और हम इसकी सलाह देते हैं। विजेट्स और उनके गुणों का स्थान JSON जैसी संरचना के रूप में सेट किया गया है। प्रत्येक विजेट को ट्रिपल: मॉड्यूल नाम, निर्माता मापदंडों और बाल तत्वों की एक सरणी द्वारा वर्णित किया गया है। दूसरा और तीसरा तत्व वैकल्पिक हैं। विजेट के अलावा, लोडर HTML टैग भी बना सकता है।

कोई समय बर्बाद नहीं किया गया HTML (पहली विधि);
कार्यक्रम की घोषणा (दूसरी विधि) में, तार्किक आदेश का उल्लंघन किया जाता है - पहले एक बच्चा विजेट बनाया जाता है, और उसके बाद ही माता-पिता (कंटेनर) बनाया जाता है, जो असुविधाजनक और खराब पठनीय है।

उदाहरण कोड

 require([ "aps/load", "aps/ready!" ], function (load) { load(["aps/FieldSet", { title : "I am aps / FieldSet" }, [ ["aps / CheckBox", { label : "CheckBox", description : "I am aps / CheckBox" } ]]]); });

डेटा स्रोत

विजेट के लिए डेटा स्रोत के रूप में दो मॉड्यूल का उपयोग किया जा सकता है: एक दूरस्थ स्रोत के लिए स्टोर और एक स्थानीय के लिए मेमोरी ।
सर्वर अनुरोधों के लिए, aps / Store RQL क्वेरी भाषा के एक विस्तारित संस्करण का उपयोग करता है, जो कि aps / Memory द्वारा भी समर्थित है।

उदाहरण कोड

 require([ "aps/Store", "aps/Grid", "aps/ready!" ], function (load) { var store = new Store({ target : "http://localhost/resources" }); var grid = new Grid({ columns: layoutSimpleGrid, store: store }, "gridDiv"); });

डेटा बाइंडिंग

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

उदाहरण कोड

 require([ "aps/TextBox", "dojox/mvc/getStateful", "dojox/mvc/at", "aps/ready!" ], function (TextBox, getStateful, at) { model = getStateful({val : "Hello, world!"}); new TextBox({value : at("model", "val")}, "divTB").startup(); });

सभी मॉड्यूल के लिए गुणों और विधियों के नामकरण के लिए समान नियम

नामकरण नियम सरल और मानक हैं:

निजी / संरक्षित संपत्तियों और विधियों के नाम अंडरस्कोर "_" से शुरू होते हैं;
विधियों, कार्यों और गुणों के नाम एक लोअरकेस अक्षर के साथ शुरू होते हैं, एक पूंजी पत्र के साथ वर्ग के नाम; यदि वर्ग एक मिश्रण है, तो एक अंडरस्कोर को कैपिटल लेटर के सामने रखा जाता है।

अपने और बाहरी दुनिया के बीच बातचीत के सभी मॉड्यूल के तरीकों के लिए सामान्य

डेटा और विगेट्स मॉडल और स्टोर मॉड्यूल के माध्यम से जुड़े हुए हैं;
विजेट की स्थिति की निगरानी घड़ी विधि का उपयोग करके की जाती है, विजेट कोई विशेष घटना उत्पन्न नहीं करते हैं, गुणों के साथ सभी काम केवल सेट के माध्यम से किया जाता है और तरीके प्राप्त करते हैं।

विजेट इंटरैक्शन उदाहरण

विगेट्स के साथ बातचीत के उदाहरण के रूप में, ग्रिड विजेट में पंक्तियों के चयन पर विचार करें।

सरलतम मामले में, पंक्तियों का चयन करने की क्षमता के साथ एक तालिका बनाने के लिए, यह स्तंभ संरचना, पंक्ति चयन मोड (चाहे एक ही समय में एक या कई पंक्तियों का चयन करना संभव हो) और डेटा स्रोत को निर्दिष्ट करने के लिए पर्याप्त है।

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

दोतरफा संवाद। इसलिए, किसी तालिका में एक पंक्ति को नेत्रहीन रूप से हाइलाइट करने के लिए, हमें सिर्फ अपनी आईडी को चयन करने की आवश्यकता है।

उदाहरण कोड

 var grid = new Grid({ //     columns : layoutSimpleGrid, selectionMode : "single", store : store }); grid.get("selectionArray") //    .watchElements(function (index, removals, adds) { alert(adds); }); //   grid.get("selectionArray").push("ea7865aa");

स्वचालित परीक्षण

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

सिस्टम बनाएं

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

स्वचालित परीक्षण

टेस्ट फ्रेमवर्क के पूरे भविष्य के भाग्य को निर्धारित कर सकते हैं, जैसा कि स्थिरता विकास की कुंजी है।

ऑटोटेस्ट बनाते समय हमने क्या किया:

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

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

कम से कम एक परीक्षण विफल होने पर विधानसभा रद्द कर दी जाती है। आप परीक्षण अक्षम नहीं कर सकते।

उपकरण चयन

हमने क्वनिट और अपना सिस्टम चुना जो वर्चुअल मशीनों में फैंटमज , IE, फायरफॉक्स और सफारी चलाता है। पहले, हमने जांच की:

TestSwarm;
Buster.js;
DOH रोबोट;
बाहरी फ़ार्म (ब्राउज़र, ब्राउज़र, आदि);
सेलेनियम।

क्यों चौकन्ना?

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

टेस्टस्वर्म क्यों नहीं

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

बस्टर क्यों नहीं। js

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

डोजोक्स रोबोट क्यों नहीं

Dojo टूलकिट में शामिल रूपरेखा। दुर्भाग्य से, इसके बावजूद, इसे छोड़ दिया गया और काफी पुराना है।

बाहरी खेत क्यों नहीं

मैं वास्तव में बाहरी प्रणालियों से बंधा नहीं होना चाहता, इसके अलावा, हमारी विधानसभा मशीनों के लिए वीपीएन एक्सेस के जटिल कॉन्फ़िगरेशन की आवश्यकता होगी। साथ ही, उनका उपयोग काफी महंगा है।

सेलेनियम क्यों नहीं

Bulky, को बुनियादी ढाँचे की आवश्यकता है।

कुल मिलाकर

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

टेस्ट इन्फ्रास्ट्रक्चर अवयव

आरेख परीक्षण के बुनियादी ढांचे के घटकों को दर्शाता है। बिल्ड सर्वर पर, phantom.js को समानांतर में लॉन्च किया जाता है (त्वरित परिणाम प्राप्त करने के लिए) और वर्चुअल मशीन पर विभिन्न ओएस में चल रहे विभिन्न ब्राउज़रों पर परीक्षण।

प्रलेखन

यहां तक कि सबसे परिष्कृत एपीआई के लिए सुविधाजनक प्रलेखन की आवश्यकता होती है। एपीएस जेएस एसडीके प्रलेखन में दो भाग होते हैं: एपीआई और संदर्भ गाइड ।

एपीआई

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

संदर्भ गाइड

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

उदाहरण

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

सैंडबॉक्स

लेकिन आप हमेशा इसे खुद आजमाना चाहते हैं। और, अधिमानतः, जल्दी और बस। ऐसा करने के लिए, अधिकांश उदाहरण एक विशेष सैंडबॉक्स में चलाए जा सकते हैं।

हमारे सैंडबॉक्स को बनाते समय, हम कुख्यात jsfiddle परियोजना से प्रेरित थे, इसलिए इसे अप्सफिल्ड कहा जाता है। इसमें, उपयोगकर्ता के पास 4 क्षेत्र उपलब्ध हैं: HTML संपादक, CSS संपादक, JS संपादक, और कोड निष्पादन का परिणाम (आप इसे स्क्रीन के निर्दिष्ट क्षेत्र में और एक नए टैब में देख सकते हैं)। कोड संपादक बनाने के लिए, हमने CodeMirror प्रोजेक्ट का उपयोग किया।

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

सहयोग के लिए, साथ में प्रयोग किया जाता है।

संपादकों का समर्थन

वाक्य रचना हाइलाइटिंग;
मक्खी पर दर्ज कोड का सत्यापन;
समापन कोष्ठक और टैग का स्वचालित प्रतिस्थापन;
तह कोड ब्लॉक;
सुंदर स्वरूपण;
स्मार्ट कोड पूरा हो रहा है।

ऑटो पूरा करना

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

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

 "MessageList":{ "!type":"fn(options: object)->!custom:MessageList_ctor", "prototype":{ "add":{ "!type": "fn(description: string, error: string)", "!doc": "added new message" }, ...

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

शॉर्टकट

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

प्रणाली
Ctrl + H - सहायता
Ctrl + O - डाउनलोड फ़ाइल
Ctrl + R - स्पष्ट फ़ील्ड
Ctrl + Enter - प्रारंभ करें
Ctrl + 1 - HTML संपादक पर ध्यान केंद्रित करें
Ctrl + 2 - CSS संपादक पर ध्यान केंद्रित करें
Ctrl + 3 - जावास्क्रिप्ट संपादक पर ध्यान केंद्रित करें
F11 - फुल स्क्रीन स्विचिंग
Esc - पूर्ण स्क्रीन मोड से बाहर निकलें

सामान्य
Ctrl + B - सुंदर स्वरूपण बनाते हैं
Ctrl + F - खोज
Ctrl + K - कम से कम कोड ब्लॉक
Ctrl + / - टिप्पणी कर रहा है
Ctrl + Space - कोड पूरा होना

एचटीएमएल
Ctrl + J - टैग द्वारा स्विच

जावास्क्रिप्ट
Ctrl + I - शो प्रकार
Alt +। - विज्ञापन पर जाएं
Alt +, - वापस कूदो

स्वत: सहेजना

आकस्मिक डेटा हानि से बचने के लिए, दर्ज किया गया कोड समय-समय पर स्थानीयस्टोरेज में संग्रहीत किया जाता है। अंतिम सहेजे गए कोड को संपादकों में प्रतिस्थापित किया जाता है जब apsfiddle को फिर से खोला जाता है ।

टिप्पणी

जब हमने अपना सैंडबॉक्स बनाया, तो हमने एक पूर्ण क्लाउड आईडीई विकसित करने के लिए कार्य निर्धारित नहीं किया। सबसे पहले, हमें एक मंच की आवश्यकता थी जहां हमारे उपयोगकर्ता आसानी से हमारे एसडीके की कोशिश कर सकते हैं और जल्दी से सीख सकते हैं कि हमारे द्वारा दिए गए उदाहरणों के आधार पर इसके साथ कैसे काम करें। इसलिए, हमने ऐसी बड़ी परियोजनाओं का कोड नहीं लिया, उदाहरण के लिए, Cloud9।

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

संक्षिप्त सारांश

अब एपीएस जेएस एसडीके

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

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

सामान्य तौर पर, लेख एक समीक्षा के रूप में निकला, यदि कोई कार्यान्वयन विवरण दिलचस्प है, तो टिप्पणियों में पूछें। यदि किसी चीज़ के बारे में कई सवाल हैं, तो हम इसे एक अलग लेख में कवर करने का प्रयास करेंगे।

लेख के लेखक तैमूर निज़ामेदिनोव और एवगेनी उस्पेंस्की, समानताएं हैं

अपने खुद के जेएस एसडीके का निर्माण - क्यों और कैसे?

क्यों

ए पी एस

एपीएस 1.x

एपीएस 2.x

प्रतिबंध

एपीएस जेएस एसडीके

कैसे

मौजूदा चौखटे का उपयोग करना

ExtJS

jQueryUI

लोडर + एमवी * फ्रेमवर्क

दोजो टूलकिट

विचारशील एपीआई

एएमडी

विजेट

विगेट्स को एक दूसरे में शामिल करें

घोषणा की घोषणा

विजेट सॉफ्टवेयर घोषणा

बूटलोडर का उपयोग करना

डेटा स्रोत

डेटा बाइंडिंग

सभी मॉड्यूल के लिए गुणों और विधियों के नामकरण के लिए समान नियम

अपने और बाहरी दुनिया के बीच बातचीत के सभी मॉड्यूल के तरीकों के लिए सामान्य

विजेट इंटरैक्शन उदाहरण

स्वचालित परीक्षण

सिस्टम बनाएं

स्वचालित परीक्षण

उपकरण चयन

क्यों चौकन्ना?

टेस्टस्वर्म क्यों नहीं

बस्टर क्यों नहीं। js

डोजोक्स रोबोट क्यों नहीं

बाहरी खेत क्यों नहीं

सेलेनियम क्यों नहीं

कुल मिलाकर

टेस्ट इन्फ्रास्ट्रक्चर अवयव

प्रलेखन

एपीआई

संदर्भ गाइड

उदाहरण

सैंडबॉक्स

ऑटो पूरा करना

शॉर्टकट

स्वत: सहेजना

टिप्पणी

संक्षिप्त सारांश

More articles: