2013 में जावास्क्रिप्ट और वेब प्रौद्योगिकियों के विकास के दिलचस्प पहलू

सभी को शुभ दिन!

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

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

यह हैबर पर मेरा "कलम का पहला परीक्षण" है, मैं आपको एक संगीतकार को शूट नहीं करने के लिए कहता हूं - वह सबसे अच्छा खेलता है। इसलिए ...

क्लाइंट और सर्वर के लिए एक भाषा

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

सबसे प्रसिद्ध में से NodeJS, AngularJS (Google द्वारा प्रचारित और सक्रिय रूप से उपयोग किया जाने वाला), नॉकआउटJS, BackBone.js, Meteor, PhantomJS हैं। मैं ध्यान देता हूं कि उनमें से सभी सक्रिय रूप से विकसित हो रहे हैं, और हर दिन उत्साही लोगों द्वारा उनमें से प्रत्येक के लिए बहुत सारे मॉड्यूल जारी किए जाते हैं। स्वाभाविक रूप से, यह सब OpenSource है।

"सिंथेटिक चीनी"

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

CoffeeScript

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

• http://coffeescript.org/
• http://ru.wikipedia.org/wiki/CoffeeScript

टाइपप्रति

Microsoft द्वारा 2012 में शुरू की गई एक प्रोग्रामिंग भाषा और एक वेब एप्लिकेशन डेवलपमेंट टूल के रूप में तैनात है जो जावास्क्रिप्ट का विस्तार करता है। जावास्क्रिप्ट में भी संकलित है, जो पिछड़े संगत है। ओपनसोर्स के तहत जारी किया गया।

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

• http://en.wikipedia.org/wiki/TypeScript

तीव्र गति

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

• http://www.dartlang.org/

एचटीएमएल 5 कैनवस टैग

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

WebGL

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

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

Three.js

तीन-आयामी ग्राफिक्स में काम करने के लिए लाइटवेट और क्रॉस-ब्राउज़र लाइब्रेरी। यह "जहां हेडिंग है" वेब को समझने के लिए देखा जाना चाहिए:

1. मोटर चालकों के लिए, देखना होगा:
   http://threejs.org/examples/webgl_materials_cars.html (FireFox, Chrome)
2. एक ब्राउज़र में एक व्यक्ति का प्रतिपादन? कोई समस्या नहीं:
   http://threejs.org/examples/webgl_materials_normalmap2.html
   http://threejs.org/examples/webgl_loader_json_objconverter.html
   http://threejs.org/examples/webgl_loader_ctm.html
   
3. प्रक्रियात्मक बनावट पीढ़ी:
   http://threejs.org/examples/webgl_terrain_dynamic.html
   
4. एक कला परियोजना जो किसी विशेष प्रकार की कला (या तो एक संवादात्मक फिल्म, या एक पागल व्यक्ति के प्रलाप, या एक नए प्रकार की कला) के लिए भी मुश्किल है:
   http://www.ro.me/ (केवल Chrome)
   

asm.js (मोज़िला से) + एम्सस्क्रिप्टन

एक अलग लाइन जावास्क्रिप्ट को ब्राउज़र के लिए "कोडांतरक" के रूप में उपयोग करने का विचार है। जावास्क्रिप्ट स्वयं एक भाषा है, इसे हल्के ढंग से रखने के लिए, तेजी से नहीं (कम से कम यह ऐसा ही था जब तक कि Google क्रोम से वी 8 के डेवलपर्स ने नहीं लिया)।

Asm.js डेवलपर्स ने भाषा का एक सबसेट बनाया जिसमें से उन्होंने विभिन्न "निरोधात्मक" घटकों को जोड़ा, मजबूत टाइपिंग को जोड़ा, आदि। परिणामी बोली नियमित जावास्क्रिप्ट की तुलना में कई गुना तेजी से काम करती है, और ब्राउज़र निर्माता इसके लिए अलग संकलक विकसित करने लगे हैं। पहले से ही अब, asm.js का उपयोग हमें एक नियमित C अनुप्रयोग की गति का 50% देता है। और यह वास्तव में बहुत अच्छा है।

लेकिन asm.js का अर्थ केवल उतना नहीं है जितना कि Emscripten संकलक के साथ संयोजन के रूप में, जो आपको asm.js. में "ओवरटेक" C / C ++ कोड की अनुमति देता है। स्वाभाविक रूप से, परिणामी जावास्क्रिप्ट अपठनीय है, लेकिन इससे इसकी आवश्यकता नहीं है।

एक उदाहरण के रूप में, केवल 4 दिनों में, अवास्तविक इंजन 3 के रूप में इस तरह की एक परियोजना को वेब पर स्थानांतरित कर दिया गया था। यह कैसे दिखता है - यह डेमो देखने लायक है: http://www.unrealengine.com/html5/ (यह आकर्षक है, खासकर जब आप समझते हैं कि आईटी ब्राउज़र में काम करता है )।

कोड गुणवत्ता नियंत्रण

ग्राफिक भाग से थोड़ा हटकर, मैं JSHint, JSLint जैसे पुस्तकालयों के डेवलपर्स द्वारा व्यापक उपयोग पर ध्यान आकर्षित करना चाहता हूं।

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

"कोड को लागू करने से पहले, आप जिन त्रुटियों को अनदेखा कर सकते हैं, उनकी जांच के लिए इसे JSLint के माध्यम से चलाएं।"

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

• http://www.jslint.com/
• http://www.jshint.com/

वेब कार्यकर्ता

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

कोड प्रलेखन

मैं JS Doc 3 लाइब्रेरी का उल्लेख करना चाहूंगा। प्रोजेक्ट कोड में टिप्पणियों से एपीआई प्रलेखन उत्पन्न करता है।

• http://usejsdoc.org/ - प्रलेखन
• https://github.com/jsdoc3/jsdoc

परीक्षण

अपने एप्लिकेशन का परीक्षण करना एक अच्छा अभ्यास है, न केवल जावास्क्रिप्ट में। लेकिन अभी भी इसमें पहले से ही हर स्वाद और रंग के लिए चौखटे का एक विस्तृत चयन है:

• मोचा: http://visionmedia.github.com/mocha/
• qUnit: http://qunitjs.com - jQuery इकाई परीक्षण ढांचा
• चमेली: http://pivotal.imtqy.com/jasmine/
• Google JS Test: http://code.google.com/p/google-js-test/
• कर्म: http://karma-runner.imtqy.com/0.8/index.html

ग्रंट: जावास्क्रिप्ट टास्क रनर

"ग्रन्ट जावास्क्रिप्ट परियोजनाओं के लिए एक कार्य-आधारित कमांड लाइन बिल्ड टूल है।"

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

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

जेएस के गोले

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

• http://jsbin.com
• http://jsfiddle.net/
• http://codepen.io/
• http://jsperf.com - कोड प्रदर्शन के मूल्यांकन में विशेष

जेएस वीडियो कोडेक

"मोज़िला नए जावास्क्रिप्ट वीडियो कोडेक के लिए टीम बनाता है जो प्लग-इन (ORBX.js) की आवश्यकता को समाप्त करता है।" जावास्क्रिप्ट और WebGL वीडियो कोडेक। और यह वास्तव में अच्छा है। शुद्ध जेएस पर एक कोडेक, ब्राउज़र के बिना एचडी वीडियो देखें। कोई प्लगइन्स की आवश्यकता नहीं, कोई प्रारूप समस्याएँ नहीं। अनुकूली बिटरेट, H.264 की तुलना में 25% बेहतर संपीड़न और प्लसस की एक लंबी सूची।

• ब्रेंडन ईच - "आज मैंने भविष्य को देखा"

जेएस ऑडियो कोडेक

ऑडियो कोडेक। यह आपको उन प्रारूपों में भी एमपी 3, ऐप्पल लॉसलेस, एफएलएसी और एएसी को चलाने की अनुमति देता है जो इन प्रारूपों का समर्थन नहीं करते हैं।

• http://audiocogs.org/codecs/

हेड ट्रैकिंग

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

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

एक और दिलचस्प उदाहरण आपके सिर को मोड़ने, परिप्रेक्ष्य को देखने और अग्रभूमि वस्तुओं को देखने की क्षमता है - http://auduno.imtqy.com/headtrackr/examples/targets.html । इस अवतार में, यह कम उपयोग का है, लेकिन स्टोर के लिए एक विचार के रूप में - पूरी तरह से।

Google स्ट्रीट व्यू के साथ संयोजन में इस तकनीक का उपयोग कैसे किया जा सकता है, इसका एक उदाहरण: http://alexhancock.imtqy.com/street-facing/ है ।

मॉड्यूल को "हेडट्रैक" कहा जाता है: https://github.com/auduno/headtrackr ।

प्रौद्योगिकी का आगे विकास आभासी वस्तुओं का प्रबंधन है। Badassjs.com/post/44786596458/an-iron-man-like-3d-hologram-controlled-by-leap-motion पर एक उदाहरण दिखाता है कि आप जावास्क्रिप्ट का उपयोग करके अपनी उंगली से आभासी पृथ्वी के एक होलोग्राम को कैसे मोड़ सकते हैं और $ 80 LeapMotion डिवाइस का उपयोग कर सकते हैं। बिल्कुल टोनी स्टार्क की तरह।

निष्कर्ष

यहीं पर मैं अपना ओपस समाप्त करता हूं, मुझे आशा है कि मैं बहुत थका नहीं हूं। मैं लेख के बारे में एक राय और छूटे हुए क्षणों, या अशुद्धियों के बारे में भी सुनना चाहूंगा। ठीक है, अगर कोई वास्तव में चाहता है, तो आप एक टमाटर भी पीस सकते हैं - यदि केवल यह मामले को छू गया ...);