Bacon.js पर FRP (कार्यात्मक प्रतिक्रियाशील प्रोग्रामिंग)

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

एफआरपी और इसके लागू अर्थों के बारे में कुछ शब्द।
यदि आप कार्यात्मक प्रोग्रामिंग के ताओ में नहीं जाते हैं, तो आप कुछ एफआरपी बिंदुओं को उजागर कर सकते हैं जो विशेष रूप से वेब विकास के लिए आकर्षक हैं। यह है:

• स्पष्ट स्थिति
• परिवर्तनों का प्रसार
• डेटा के साथ नहीं, बल्कि डेटा स्रोतों के साथ काम करें।

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

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

अब मैं आवेदन भाग में जाना चाहता हूँ, अर्थात्, सामान्य रूप से एफआरपी के लाभों को प्रदर्शित करने के लिए और विशेष रूप से जेएस में अनिवार्य प्रोग्रामिंग पर एक उदाहरण का उपयोग करके। एक उदाहरण के रूप में, मैं प्रसिद्ध सोकोबन खेल को ले जाऊंगा, जिसे मैंने मतभेदों को प्रदर्शित करने के लिए Bacon.js के साथ और उसके बिना लिखा था।

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

व्यावहारिक अनुप्रयोग
और अब सबसे महत्वपूर्ण बात के लिए। आमतौर पर, हम केवल उन घटनाओं को सुनते हैं जो ब्राउज़र उपयोगकर्ता की कार्रवाई के जवाब में उत्पन्न करता है ताकि यह पता लगाया जा सके कि आगे क्या करना है।

$(document).on("keydown", function(e){ //     }); 

खेल 4 कुंजी द्वारा नियंत्रित किया जाता है। और फिर सशर्त जाँच की समस्या तुरंत उत्पन्न होती है, जो कि वाक्यात्मक रूप से इस तरह दिखती है।

 if(e.keyCode >= 37 && e.keyCode <= 40){ //  ,    } 

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

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

 var keyDowns = $(document).asEventStream("keydown"); //  keydown  $(document) var arrowDowns = keyDowns.filter(isArrows); // , ,    isArrows function isArrows(e){ // asEventStream     jQuery.Event return e.keyCode >= 37 && e.keyCode <= 40 } 

या नक्शे का उपयोग कर:

 var changeDirection = $(document).asEventStream("keydown") .filter(isArrows) // filter  true,    ,    .map(selectDirection) //map   selectDirection(event) .onValue(function(x){ //   ,    //     }); function selectDirection(e){ return { x : e.keyCode % 2 ? e.keyCode - 38 : 0, y : !(e.keyCode % 2) ? e.keyCode - 39 : 0 } } 

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

 var playerMove = $(document).asEventStream("keydown") // keydown  $(document) .filter(isArrows) //     .map(player) //  .map(nextCell); //,   . // , ,        var playerNextEmpty = playerMove.filter(isEmpty).onValue(function(nov){ //  . }); // , ,       -   var goalMove = playerMove.map(isGoal).filter(function(x){return x}); // , ,     ,     -  var goalNextEmpty = goalMove.map(nextCell).filter(isEmpty).onValue(function(x){ //   }); 

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

मैं बेकन.जे के बिना पूरी कार्यक्षमता नहीं दे सकता, लेकिन कॉलबैक जो किडाउन इवेंट के दौरान खेल के यांत्रिकी को संसाधित करता है, इसके साथ समाप्त होता है:


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

 // , ,   ,    -  var playerNextMine = playerMove.filter(isMine); // , ,   ,     -  var goalNextMine = goalMove.map(nextCell).filter(isMine); //   playerNextMine  goalNextMine. var mineAlert = goalNextMine.merge(playerNextMine).onValue(function(x){ //  }); 

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

पेशेवरों और विपक्ष

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

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

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

विकल्प
जेएस पुस्तकालयों में से, Microsoft RxJS है । एल्म जैसी कोई चीज होती है। क्लोजुरस्क्रिप्ट जैसी एक दिलचस्प बात है। इस मुद्दे का अध्ययन करने के लिए थोड़ा समय देना, आप एक सुविधाजनक विकल्प चुन सकते हैं।

सामग्री :
गिटहब : बेकन.जेएस , वेब-साइट
कुछ अच्छे एफआरपी सामान: एक , दो , तीन ।