🕹️ ▪️ 👌🏽 Warp9 एक और प्रतिक्रियाशील js लाइब्रेरी है। इस बार लिंक करने योग्य और लीक मुक्त है ✍🏾 🏰 🕓

अनुच्छेद पुराना है, Warp9 की वेबसाइट पर अद्यतित जानकारी देखें

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

	AngularJS	पीटना	प्रतिक्रिया	एल्म	आरएक्सजेएस, बेकन	ReactiveCoffee	Warp9
टेम्पलेट आधारित है	हां / नहीं [1]	हां	नहीं	नहीं		नहीं	नहीं
संयोजकता को नियंत्रित करता है	नहीं [2] [३]	नहीं [2]	हां	हां		हां	हां
नियंत्रणों का संशोधन	हां / नहीं [4]	नहीं	हां	शायद		हां	हां
2 तरह से बाध्यकारी	हाँ / नहीं [५]	हां	नहीं	हां	हां	हां	हां
आकस्मिक स्मृति लीक	नहीं	हां	नहीं	नहीं	नहीं	हां	नहीं
todomvc	हां	हां	हां	नहीं	शायद	हाँ / नहीं [६]	हां
नेतृत्वहीन	नहीं	हां	नहीं	नहीं	हां	हां	हां
शुद्ध जेएस	हां	हां	हाँ [7]	नहीं	हां	नहीं	हां
मिक्सअप मार्कअप और लॉजिक	हां / नहीं [8]	नहीं	हां	हां		हां	हां
सादगी	नहीं	हां	हां	हां	हां	हां	हां
समृद्ध प्रतिक्रियाशील सूची	नहीं	नहीं		हां	नहीं	नहीं	हां

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

किंवदंती और टिप्पणी

टेम्पलेट आधारित है
क्या इंटरफेस निर्माण के लिए मुख्य तकनीक है?

[१] कई ट्यूटोरियल और उदाहरणों में, इंटरफ़ेस वास्तव में केवल टेम्पलेट्स के आधार पर बनाया गया है, इसके बावजूद एंगुलरजेएस कस्टम निर्देशों के माध्यम से इंटरफेस के निर्माण का समर्थन करता है।

संयोजकता को नियंत्रित करता है
क्या पुस्तकालय मौजूदा लोगों की संरचना (विभाजन और जीत के सिद्धांत) के माध्यम से नियंत्रण की चेतना के लिए एक तंत्र प्रदान करता है।

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

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

"React टेम्प्लेट का उपयोग नहीं करता है ..." रिएक्ट कंपोज़ेबल यूजर इंटरफेस बनाने के लिए एक लाइब्रेरी है। "

यदि आप अभी भी संदेह में हैं, तो इस बारे में सोचें कि डेस्कटॉप, आईओएस या एंड्रॉइड एप्लिकेशन बनाने के लिए बहुत कम टेम्पलेट इंजन क्यों हैं।

[३] यदि आप केवल (!) कस्टम निर्देशों का उपयोग करते हुए एप्लिकेशन बनाते हैं, तो AngularJS नियंत्रण की संयोजकता और मॉडर्लाइज़ेशन दोनों का समर्थन करता है।

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

[४] केवल अगर कोणीयजेएस नियंत्रण को कस्टम निर्देश के रूप में कॉन्फ़िगर किया गया है।

2 तरह से बाध्यकारी
क्या दो चर या एक चर और नियंत्रण को जोड़ना संभव है ताकि जब चर बदलता है, तो दूसरा (या नियंत्रण) भी बदलता है, और इसके विपरीत।

[५] एंगुलरजेएस में, नियंत्रण और एक चर के बीच बंधन संभव है, लेकिन एक चर और एक चर के बीच असंभव है।

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

मैंने नॉकआउट और रिएक्टिव कॉफ़ी पर एक साधारण आवेदन लिखा, यह प्रदर्शित करने के लिए कि लीक को रोकने के लिए कितना आसान है, वास्तव में, नॉकआउट पर आवेदन और रिएक्टिव कॉफ़ी पर आवेदन । और, ज़ाहिर है, Warp9 पर लीक पर नियंत्रण आवेदन ।

todomvc
TodoMVC, js में विभिन्न gui पुस्तकालयों के लिए मानक हैलो वर्ल्ड है, उदाहरणों के शस्त्रागार में अपने स्वयं के अनुप्रयोग कार्यान्वयन के लिए अच्छा अभ्यास माना जाता है।

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

नेतृत्वहीन
क्या घटनाओं के साथ काम करने के लिए सर्वर साइड पर इंटरफेस के निर्माण के संदर्भ के बिना पुस्तकालय का उपयोग करना संभव है।

शुद्ध जेएस
क्या पुस्तकालय के लेखक ने यह मान लिया है कि पुस्तकालय द्वारा उपयोग की जाने वाली मुख्य भाषा js है।

[[] रिएक्ट के निर्माता अंतर्निहित एचटीएमएल-मार्कअप (स्कैला में xml समर्थन के समान) के समर्थन के साथ एक जावास्क्रिप्ट बोली का उपयोग करने का सुझाव देते हैं और इसे js में संकलित करते हैं। शुद्ध जेएस का उपयोग करना संभव है।

मिक्सअप मार्कअप और लॉजिक
क्या आपको आवेदन लिखने के लिए मार्कअप और कोड को मिलाना चाहिए?

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

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

जटिलता से निपटने का एक और तरीका है - हम नियंत्रण (अमूर्त) में स्वतंत्र व्यवहार (मार्कअप + तर्क) का चयन करते हैं और, रचना उपकरण का उपयोग करते हुए, हम मौजूदा नियंत्रण से सभी अधिक जटिल लोगों को इकट्ठा करते हैं, हमारे आवेदन तक। एल्गोरिदम की जटिलता का आकलन करने के साथ एक सादृश्यता आकर्षित करना, तर्क और मार्कअप में अलगाव आधे से जटिलता को कम कर देता है (n -> n / 2), जबकि अमूर्त / रचना इसे n से ln (n) तक कम कर देता है।

यह मज़ेदार है कि यदि आप तालिका को फिर से देखते हैं, तो आप देख सकते हैं कि वे पुस्तकालय जो मिश्रण को प्रोत्साहित करते हैं, रचना और प्रतिरूपकता प्रदान करते हैं।

[ Direct ] जब एंगुलरजेएस में निर्देशन विकसित कर रहे हों, तो आपको तर्क और प्रस्तुति को मिलाना होगा।

सादगी
लायब्रेरी का परिचय देने वाली संस्थाओं की संख्या आप कभी नहीं जान सकते।

यह एक बहुत ही व्यक्तिपरक राय है, लेकिन यह मुझे लगता है कि एंगुलरजेएस में संस्थाओं की संख्या बहुत बड़ी है। रिएक्टर डेवलपर्स इस दृश्य को साझा करें:

सीखने के लिए अवधारणाओं की संख्या
प्रतिक्रिया: 2 (सब कुछ एक घटक है, कुछ घटकों की स्थिति है)। जैसे-जैसे आपका ऐप बढ़ता है, सीखने के लिए और कुछ नहीं है; बस अधिक मॉड्यूलर घटकों का निर्माण करें।
AngularJS: 6 (मॉड्यूल, नियंत्रक, निर्देश, स्कोप, टेम्प्लेट, लिंकिंग फ़ंक्शन)। जैसे-जैसे आपका ऐप बढ़ता जाएगा, आपको और अवधारणाओं को सीखना होगा।

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

var a = ko.observable(0); var b = ko.compute(function() { return a() + 2 });

और इस तरह ताना 9 में:

 var a = new Cell(0); var b = a.lift(function(a) { return a+2; });

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

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

 var list = new List([new Cell(0), new Cell(1), new Cell(2)]); var sum = list.reduce(0, function(a,b) { return a + b; });

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

Warp9

Warp9 एक बहुत ही सरल विचार पर आधारित है: चलो प्रतिक्रियाशील मॉडल लेते हैं, उस पर परिवर्तन लागू करते हैं, और मॉडल के साथ जुड़े प्रतिक्रियाशील DOM प्राप्त करते हैं। यदि रूपांतरण एक साधारण js फ़ंक्शन है, तो हमें बॉक्स से रचना (कार्यों की संरचना) और वितरण (अपेक्षित) के सामान्य साधन मिलते हैं।

प्रतिक्रियाशील DOM में एक प्रतिक्रियाशील मॉडल को मैप करने का एक उदाहरण - एप्लिकेशन ( स्रोत ):

 //    (   ) var model = new List(); //     DOM var dom = TRANSFORM(model); //   DOM warp9.ui.renderer.render(placeholder, dom); //   //      model.add("React.js"); model.add("Warp9"); function TRANSFORM(model) { var hasItems = model.count().when(function(count) { return count>0 }, true); return hasItems.when(true, ["div", ["div", "Reactive libraries:"], ["div", {"css/margin-left": "10px"}, model.lift(function(item){ return ["div", item] })] ]); }

प्रतिक्रियाशील आदिम

चलो हमारे परिचित को प्रतिक्रियाशील प्राथमिकताओं के साथ warp9 के साथ शुरू करते हैं, जिसके आधार पर लाइब्रेरी का GUI भाग बनाया गया था। प्रस्तुति में उनका काफी विस्तृत वर्णन है।

सभी स्लाइड उदाहरण जीथब पर उपलब्ध हैं।

सदस्यताएँ और लीक्स

प्रतिक्रियाशील मॉडल (पर्यवेक्षक पैटर्न, प्रकाशित-सदस्यता) स्थानों में बहुत सुविधाजनक है, लेकिन आपको यह नहीं सोचना चाहिए कि कुछ समस्याओं को हल करना दूसरों का परिचय नहीं देता है। प्रतिक्रिया की ऊँची एड़ी के जूते में से एक मेमोरी लीक है। यदि हम मेमोरी लीक के बारे में पढ़ने के लिए विकी पर जाते हैं, तो अन्य चीजों के बीच हम देखेंगे:

इसे ( मेमोरी लीक ) को रोकने के लिए, डेवलपर उपयोग के बाद संदर्भों को साफ करने के लिए जिम्मेदार है ... और, यदि आवश्यक हो, तो किसी भी घटना को सुनने वाले को ऑब्जेक्ट के लिए मजबूत संदर्भ बनाए रखने वाले श्रोताओं द्वारा

यह समस्या कई पर्यवेक्षक कार्यान्वयनों पर लागू होती है। उनका उल्लेख मार्टिन फाउलर द्वारा किया गया है , लेख उनके लिए समर्पित हैं ।

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

आइए देखें कि यह सिद्धांत व्यवहार में कैसे लागू किया जाता है। निम्नलिखित कोड पर एक नज़र डालें:

 var cell = new Cell(0); var lifted = cell.lift(function(x) { return x+1; });

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

 var cell = ko.observable(0); var lifted = ko.computed(function(){ return cell() + 1; });

यहां सेल में उठाने के लिए एक लिंक होगा, जो कि काउंटरिंटिव है। कोड को और अधिक जटिल मानें

 var cell = new Cell(); var lifted = cell.lift(function(x) { return x+1; }); var dispose = lifted.onEvent(Cell.handler({ set: function(value) { console.info(“set: ” + value); }, unset: function() { console.info(“unset”); } })); cell.set(3); cell.set(5); cell.unset(); dispose(); cell.set(1);

उससे उम्मीद करना स्वाभाविक होगा

  unset > set: 4 > set: 6 > unset

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

काम करने के लिए ऊपर दिए गए कोड के लिए, आपको पाठक को "संकेत" डालना होगा कि वह प्रवाहित हो सकता है:

 var cell = new Cell(); var lifted = cell.lift(function(x) { return x+1; }); var dispose = lifted.onEvent(Cell.handler({ set: function(value) { console.info(“set: ” + value); }, unset: function() { console.info(“unset”); } })); lifted.leak(); cell.set(3); cell.set(5); cell.unset(); dispose(); lifted.seal(); cell.set(1);

हमने lifted.leak() और lifted.seal() , कोड संदिग्ध lifted.seal() लगा और, जादुई रूप से, यह काम किया। वास्तव में, leak करने के लिए कॉल जादू नहीं है, लेकिन एक प्रतिक्रियाशील चर की सक्रियता है। सक्रिय होने पर, वे अपनी निर्भरता और उनकी सक्रियता की सदस्यता लेते हैं। इस प्रकार, एक वस्तु (चर या सूची) पर रिसाव के कारण, हम अपने सभी निर्भरता को सक्रिय रूप से सक्रिय करते हैं। हमारे द्वारा सक्रिय की गई वस्तु के साथ काम करने के बाद, हमें इसे उस स्थिति में छोड़ना चाहिए, जिसमें हमें मिला था - seal विधि को कॉल करें।

याद करते हुए leak फिर से नहीं होता है, लेकिन केवल आंतरिक काउंटर को खत्म कर देता है। यदि leak को n बार कहा जाता था, तो seal को भी n समय कहा जाना चाहिए; seal करने के लिए प्रत्येक कॉल आंतरिक काउंटर को कम कर देगा और जब यह 0 तक पहुंच जाएगा, तो वास्तविक निष्क्रियता हो जाएगी। ऐसा इसलिए किया गया ताकि आप यह न सोचें कि वस्तु किस स्थिति में आपके पास स्थानांतरित हो रही है - जोड़ियों seal कॉल leak और seal और सब कुछ ठीक हो जाएगा।

आप पहले से ही अनुमान लगा सकते हैं कि चक्रीय निर्भरता की अनुमति नहीं है - हम डीएजी द्वारा सीमित हैं।

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

 var list = new List(); list.leak(); list.onEvent(List.handler({ data: function(items) { //     ,  items -   //      ;   , //  " ,  ,    " // items -   { key: key, value: value }  value - //    ,  key -  (id),   //       }, add: function(item) { // ,     , item   // {key: key, value:value}, value -  , key -   }, remove: function(key) { //    , key -   } }));

अंकन

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

लाइव आवेदन लिंक (इसके स्रोत ) पर उपलब्ध है।

 //<html> //<body> // <div id="placeholder"></div> //</body> //<script src="../../../lib/warp9/warp9.js"></script> //<script language="javascript" type="text/javascript"> var Cell = warp9.reactive.Cell; warp9.ui.renderer.render(placeholder, NAME(new Cell("Denis"))); function NAME(name) { var hello = name.when( function(name) { return name.length > 0; }, function(name) { return "Hello, " + name + "!"; } ); return ["div", ["div", ["input-text", { "css/background": hello.isSet().when(false, "red") }, name], ["button", {"!click": function() { name.unset(); }}, "clear"]], hello.lift(function(hello) { return ["div", hello]; }) ]; } //</script> //</html>

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

Z- अभिव्यक्ति व्याकरण कुछ इस प्रकार है:

 ClearChildren = '' ['' TAG_NAME '' '' (',' ATTR)?  (',' बच्चा) * ']'
 implicitChildren = '' ['' TAG_NAME '' '' (',' ATTR)?  (नोड की प्रतिक्रियाशील-सूची) "]
 बच्चा = नोड |  '' '' STRING '' '' |  INT |
                    (प्रतिक्रियाशील-चर-नोड का) |
                    (प्रतिक्रियाशील-चर-STRING की) |
                    (INT के प्रतिक्रियाशील-चर)
 नोड = स्पष्टवादी |  implicitChildren

जहां TAG_NAME "html" टैग का नाम है (उद्धरण चिह्नों में, चूंकि आप अपने स्वयं के टैग को परिभाषित कर सकते हैं), STRING किसी भी स्ट्रिंग है, INT कोई पूर्णांक है, ATTR टैग, सीएसएस और घटनाओं की विशेषताओं का वर्णन करने वाली एक वस्तु है।

ATTR ऑब्जेक्ट के गुणों को DOM द्वारा निर्मित किए जा रहे तत्व की विशेषताओं में मैप किया जाता है, मूल्य प्रतिक्रियाशील चर हो सकता है (छोड़कर, निश्चित रूप से, विशेषता आईडी - यह एक स्थिर होना चाहिए)। एक और अपवाद गुणों से शुरू होता है "!" - वे कार्य होने चाहिए और तत्व घटनाओं के लिए मैप किए गए हैं। इसके अलावा, सीएसएस गुणों के लिए एक विशेष संबंध की आवश्यकता होती है, उन्हें दो तरीकों से लिखा जा सकता है - जैसा कि ऊपर दिए गए उदाहरण में है:

 ["input-text", { "css/background": name.isSet().when(false, "red") }, name]

या एक अलग वस्तु के निर्माण के माध्यम से:

 ["input-text", { "css": { "background": name.isSet().when(false, "red") } }, name]

इन अपवादों के अलावा, एक और चीज है - कस्टम विशेषताएँ और कस्टम इवेंट, वे नाम में ":" हैं। आप अनुमान लगा सकते हैं कि वे कुछ कस्टम कर रहे हैं और डिफ़ॉल्ट रूप से वे DOM तत्व की विशेषताओं या घटनाओं से संबद्ध नहीं हैं।

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

 function NAMES(names){ return ["div", names.lift(NAME)]; }

और प्रतिस्थापित करें

 warp9.ui.renderer.render(placeholder, NAME(new Cell("Denis")));

पर

 var names = new List(); warp9.ui.renderer.render(placeholder, NAMES(names)); names.add(new Cell("Denis")); names.add(new Cell("Lisa"));

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

कस्टम विशेषताएँ

जबकि कस्टम विशेषताओं का तंत्र पूरी तरह से सोचा नहीं गया है और ताना 9 कई हार्डकोड प्रदान करता है।

कुंजी: दर्ज करें
उपयोगकर्ता द्वारा दर्ज किए जाने पर संबंधित इनपुट-टेक्स्ट टैग के लिए एक तत्व घटना होती है।

warp9: भूमिका और ! warp9: बदल गया
तत्व के अनुरूप इनपुट-जांच टैग के लिए। Warp9: परिवर्तित घटना तब होती है जब चेकबॉक्स की स्थिति बदल जाती है, तर्क में वर्तमान मूल्य (सही / गलत) पारित हो जाता है। यदि warp9: भूमिका "दृश्य" है, तो जब चेकबॉक्स स्थिति बदलता है, तो तत्व संचारित प्रतिक्रियाशील चर को बदलने की कोशिश नहीं करता है (लेकिन राज्य स्वयं चर के बाद बदलता है)।

warp9: ड्रा
प्रत्येक तत्व में एक घटना होती है; इसे तब कहा जाता है जब तत्व स्क्रीन पर खींचा जाता है।

TodoMVC

यदि आप सब कुछ समझते हैं जो मैंने ऊपर लिखा है, तो आपके पास पहले से ही ताना-बाना पर टूडो वीवीसी स्रोतों को समझने के लिए पर्याप्त ज्ञान है, वैसे, एक लाइव एप्लिकेशन के लिए एक लिंक।

निष्कर्ष

अब Warp9 का कोई संस्करण नहीं है, यह एक कार्यशील अवधारणा है जो प्रदर्शित करती है:

यूआई के निर्माण के मूल सिद्धांत के रूप में संगतता
आवश्यकताएँ के माध्यम से वितरण के लिए मॉड्यूलरिटी
लीक मेमोरी लीक्स

यह सेट मुझे काफी अनोखा लगता है। इस अवधारणा को ध्यान में लाने के लिए विभिन्न राय सुनना अच्छा होगा।

Warp9 एक और प्रतिक्रियाशील js लाइब्रेरी है। इस बार लिंक करने योग्य और लीक मुक्त है