आपका स्वागत है! हम Ninjamock.com प्रोजेक्ट के निंजाम डेवलपर्स की एक टीम है। Ninjamock.com एक और ऑनलाइन स्केच और प्रोटोटाइप डिजाइनर है। परियोजना पूरी तरह से जावास्क्रिप्ट और HTML5 में लिखी गई है, सर्वर का हिस्सा ASP.NET MVC में है।

परियोजना पर काम के वर्ष के दौरान, हमने बड़ी संख्या में रेक पर कदम रखा और बड़े जावास्क्रिप्ट अनुप्रयोगों को विकसित करने में अमूल्य अनुभव प्राप्त किया, जिसे हम साझा करना चाहते हैं। इस लेख में हम बताएंगे कि कैसे एक index.html फ़ाइल से एक प्रोटोटाइप 250 से अधिक वर्गों और कोड की 60,000 लाइनों (तीसरे पक्ष के पुस्तकालयों की गिनती नहीं) के साथ एक पूर्ण परियोजना में विकसित हो गया है। इसके अलावा, सामान्य शब्दों में, हम अपनी वास्तुकला का वर्णन करेंगे और ग्राहक पर प्रतिपादन के कार्यान्वयन के बारे में विस्तार से वर्णन करेंगे।


UPD: हमारे ट्विटर या fb पेज पर अपडेट का पालन करें

शुरुआत

हम सभी एक बड़ी कंपनी में काम करते हैं (अभी भी काम करते हैं), और किसी तरह यह संयोग हुआ कि हम एक पल में थक गए थे और हमने एक परियोजना शुरू करने के लिए दुनिया पर कब्जा करने का फैसला किया जो हमें अपने लिए काम करने की अनुमति देगा। इसलिए, एक शरद ऋतु के दिन, हम "चाय" का एक मग पीने के लिए एक बार में इकट्ठा हुए और चर्चा की कि इसे कैसे किया जाए। एन-वें सर्कल के बाद, हमारी शानदार योजना तैयार थी:

• हम सबसे अच्छा स्केच डिजाइनर लिखते हैं
• ???
• हम एक लाभ कमाते हैं

बाद में यह पता चला कि हम मूल नहीं थे और हम इस योजना को हमारे सामने लेकर आए थे - बौनों की व्यावसायिक योजना ।

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

मुख्य प्रतियोगी, हमने प्रसिद्ध balsamiq.com पर विचार किया, जिनके वित्तीय वक्तव्यों ने हमें इस क्षेत्र में काम करना शुरू करने के लिए प्रेरित किया। लेकिन ऐसा लगता है कि हम अकेले नहीं थे जिन्होंने ऐसा सोचा था, और वर्ष के दौरान कई समान परियोजनाएं दिखाई दीं।

बेलसामीक के विपरीत, जो फ्लैश में लिखा गया है, हमने सब कुछ "सही ढंग से" करने और एचटीएमएल 5 में लिखने का फैसला किया ताकि हम सभी प्लेटफार्मों पर काम कर सकें (और क्योंकि यह उस समय एक फैशनेबल प्रवृत्ति थी)।

बेलसामी से हमारा अन्य अंतर यह है कि हम विशिष्ट प्लेटफार्मों (iPhone, iPad, Windows Phone, आदि) पर ध्यान केंद्रित करते हैं। यही है, किसी भी चीज़ को चित्रित करने के लिए बाल्समिक एक सार्वभौमिक मंच है, इसलिए उनके पास विशिष्ट प्लेटफार्मों के लिए शब्दार्थ नहीं हैं। ऐसा शब्दार्थ क्यों आवश्यक है? उदाहरण के लिए, एक तैयार डिज़ाइन के लिए कोड उत्पन्न करना। हमारे साथ, सभी नियंत्रण वास्तविक लोगों की तरह कम या ज्यादा व्यवहार करते हैं।

फिलहाल प्रोजेक्ट आर्किटेक्चर

सर्वर पक्ष काफी सरल है और ASP.NET MVC पर लागू किया गया है; शायद बात करने के लिए बहुत कुछ नहीं है। हमारे पास अधिकांश कोड क्लाइंट पर है और जावास्क्रिप्ट में लिखा है। जब हमने परियोजना शुरू की, तो हमने कॉफीस्क्रिप्ट की ओर देखा, लेकिन माना कि उस समय इसके लिए बुनियादी ढांचा काफी कच्चा था, इसलिए हमने शुद्ध जावास्क्रिप्ट में सब कुछ लिखने का फैसला किया।

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

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

ग्राहक कोड में शामिल हैं:

• डिजाइन तत्वों का ऑब्जेक्ट मॉडल, अर्थात, हमारे नियंत्रण के लिए आधार कक्षाएं।
• प्रतिपादन का मूल। इसमें माउस और कीबोर्ड इवेंट हैंडलिंग क्लासेस शामिल हैं। ये कक्षाएं निर्देशांक द्वारा तत्वों को खोजने और आगे बढ़ने के लिए जिम्मेदार हैं, ड्राइंग तत्वों के क्रम को चित्रित करती हैं, और साथ ही, प्रत्येक तत्व के लिए ड्राइंग को कॉल करती हैं।
• विशिष्ट प्लेटफार्मों के लिए डिज़ाइन तत्व (नियंत्रण) (अभी के लिए, केवल iPhone के लिए)। प्रत्येक नियंत्रण यह तय करता है कि दिए गए निर्देशांक में खुद को कैसे आकर्षित किया जाए। वर्तमान नियंत्रणों के लिए, "नियंत्रण" कोड में "हार्डकोड" प्रस्तुत किया जाता है - उदाहरण के लिए, "बटन" के कोड में हम एक आयत खींचते हैं, इसे रंग से रंगते हैं, फिर शीर्ष पर पाठ आकर्षित करते हैं, इसे बीच में संरेखित करते हैं, आदि। हालांकि, नए नियंत्रण (जो अभी तक जारी नहीं किए गए हैं) को खींचने के लिए, हमने अन्यथा करने का फैसला किया - पूर्ण नियंत्रण आकर्षित करने के लिए अपने खुद के डिजाइनर का उपयोग करें। यह काफी दिलचस्प निकला और हम इसके बारे में निम्नलिखित लेखों में से एक में और अधिक विस्तार से बात करेंगे। आंशिक रूप से यह कार्यक्षमता पहले से ही उपलब्ध है, आप एक या अधिक तत्वों का चयन कर सकते हैं, फिर राइट-क्लिक करें और संपत्ति का चयन करें -> संपत्ति में कनवर्ट करें। उसके बाद, बाईं ओर पैनल में एक नया तत्व दिखाई देता है। और एक तत्व पर डबल-क्लिक करके, आप इसके टेम्पलेट को संपादित कर सकते हैं।
• पृष्ठ और संवादों के लिए प्रस्तुति मॉडल (ViewModel)। ये प्लेटफ़ॉर्म-इंडिपेंडेंट क्लासेस हैं जो नॉकआउट.जैस टेम्प्लेट से जुड़ी हैं।
• जिस प्लेटफॉर्म पर हमारा एप्लिकेशन चल रहा है, उसके लिए कर्नेल को बाध्य करने की कक्षाएं। यहां हमारे पास माउस और कीबोर्ड इवेंट की सदस्यता के लिए कोड है; यह कोड बाद की प्रक्रिया के लिए ईवेंट को कर्नेल पर पुनर्निर्देशित करता है। उदाहरण के लिए, एक कंप्यूटर पर, एक iPad पर या एक iPhone पर, घटनाओं की सदस्यता अलग तरीके से की जाती है; मैक और पीसी में कीबोर्ड शॉर्टकट आदि होते हैं।
• एक्सटेंशन। हमारे कोड को डिजाइन करते समय, हम खुलेपन / निकटता के सिद्धांत पर भरोसा करते थे, इसलिए, एक्सटेंशन उस कार्यक्षमता को लागू करते हैं, जिसे सिद्धांत रूप से तिरस्कृत किया जा सकता है: उदाहरण के लिए, तत्वों को तड़काना, तत्व को गिराने पर कंटेनर को उजागर करना, स्थानीयस्टोर में परियोजना को ऑटो-सेव करना। हमारे पास कुल 17 एक्सटेंशन हैं।

लेकिन यह सब बहुत आसान शुरू हुआ ...

पहला प्रोटोटाइप

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

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

यह वास्तुकला कई महीनों तक चली। लेकिन हमारी परियोजना विकसित हुई और विकसित हुई, और जैसे-जैसे नई सुविधाएँ जुड़ती गईं, हमने महसूस किया कि यह हमें शोभा नहीं देता।

पहला ठोकर ब्लॉक बैंल जूम था, जिसे हम अभी भी ठीक से लागू नहीं कर सके। वास्तव में, हमारे पास दो विकल्प थे:

• सीएसएस सीएसएस संपत्ति - महान काम करता है यदि आपको तत्व को कम करने की आवश्यकता है। वृद्धि के साथ एक समस्या है: हमारे सभी तत्व वेक्टर हैं, उनमें से अधिकांश कैनवास पर खींचे गए थे। जब कैनवास को सीएसएस के माध्यम से बढ़ाते हैं, तो इसकी सामग्री को बिटमैप से जोड़ा जाता है, जबकि हमें वेक्टर ज़ूम की आवश्यकता होती है। यह कैसे काम नहीं करता है इसका एक उदाहरण यहां देखा जा सकता है: jsfiddle.net/MzGpe/3
• "मैनुअल" ज़ूम, जब आपको सभी तत्वों के माध्यम से जाने और उनकी स्थिति और आकार बदलने की आवश्यकता होती है, साथ ही साथ सभी कैनवास की पूरी सामग्री को एक नए पैमाने पर फिर से तैयार करना है। लेकिन हम एक चिकनी प्रतिपादन प्राप्त करने में सक्षम नहीं थे - स्केलिंग के क्षण में सभी तत्व बहुत (क्रमिक रूप से) कूद गए।

हैरानी की बात है, प्रतिस्पर्धी HTML अनुप्रयोगों (fluidui.com, gomockingbird.com, moqups.com) में से कोई भी नहीं बढ़ा है।

दूसरा प्रोटोटाइप

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

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

15x स्केलिंग के साथ हमारे आवेदन का कार्यक्षेत्र:



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



हालांकि, फिर से ऐसी समस्याएं थीं जिन्होंने इस दृष्टिकोण की अपूर्णता को दिखाया। स्केलिंग करते समय, छवि का आकार और, तदनुसार, कैनवास का आकार बढ़ जाता है। डिफ़ॉल्ट रूप से, हमारे डिजाइन पेज का आकार 1024x768 है। 4 गुना वृद्धि के साथ, कैनवास का आकार 4096x3072 है, और हर मशीन रेंडरिंग (स्वीकार्य गति से) का सामना नहीं कर सकती है। इसके अलावा, इस वृद्धि के साथ कई मशीनों पर, धारियों और रंगीन डॉट्स के रूप में अजीब कलाकृतियां दिखाई देने लगीं। लेकिन 4 गुना वृद्धि सीमा से दूर है।

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

इस दृष्टिकोण के साथ, सब कुछ ठीक काम करता है, एक छोटे माइनस के अपवाद के साथ - पिछले विकल्पों की तुलना में स्क्रॉलिंग की गति थोड़ी कम हो गई।

लेख की शुरुआत में स्क्रीनशॉट में आप देख सकते हैं कि हमारी परियोजना अब कैसी दिखती है। आप इसे यहां लाइव देख सकते हैं: ninjamock.com

उपसंहार

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

नौजामॉक प्रोजेक्ट टीम में पास्टरग्लुक , डेनिस और हेडविथोउटब्रिंस हैं ।