हमने Vue.js (और प्रतिक्रिया नहीं) क्यों चुना?

हाल ही में, Qwintry टीम ने हमारी सभी पुरानी और नई परियोजनाओं में Vue.js के लिए एक सक्रिय प्रवास शुरू किया:

• एक विरासत Drupal- आधारित प्रणाली (qwintry.com) पर
• हमारे नए में, पूरी तरह से लिखित qwintry.com थ्रेड (Yii2 / Node.js पर बैकएंड)
• हमारे B2B सिस्टम (Yii2 द्वारा संचालित) (रसद.qwintry.com) में
• हमारी सभी छोटी आंतरिक और सार्वजनिक परियोजनाओं में (मुख्य रूप से बैकएंड पर PHP और Node.js का उपयोग करते हुए)

क्यों हमारे प्रोग्रामर Vue.js के लिए चुना, Qwintry LLC में विकास के प्रमुख कहते हैं । एंटोन सिदाशिन ➔

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


से - ग्राहक के द्वार पर हमारा पैकेज

क्विंट्री का एक बड़ा कोड आधार है, जिसमें मुख्य रूप से PHP और JS (मोबाइल एप्लिकेशन के लिए स्विफ्ट और जावा) शामिल हैं।

हमारे - हम Vue.js उपयोग करने के लिए एक बार में जांच एप्लिकेशन समान कार्यक्षमता सी का निर्माण का निर्णय लिया कैलकुलेटर - प्रतिक्रिया करने के लिए Vue.js और Angular2।
 

React.js

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

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

मेरे लिए नुकसान की प्रतिक्रिया:

अक्सर, स्वच्छता, प्रतिरक्षा और विचारधारा व्यावहारिक दृष्टिकोण पर हावी होती है।

मुझे गलत मत समझो। मैं प्रस्तुतिकरण की पवित्रता और सरलता की सराहना करता हूं () दृष्टिकोण - इसमें कोई संदेह नहीं है कि यह एक महान विचार है जो वास्तविक विकास में काम करता है। मैं अन्य चीजों के बारे में बात कर रहा हूं।

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

JSX बेकार है

एक सेकंड रुको! मुझे पता है! यह "विशेष वाक्य रचना के साथ सिर्फ शुद्ध जावास्क्रिप्ट है"। हमारे लोग जो एक स्केच और फ़ोटोशॉप में एक डिज़ाइन बनाते हैं और फिर उसे HTML में परिवर्तित करते हैं, जिनके पास कठिन समय सीमा होती है और जो अब इसे कई डिवीजनों में लपेटकर इस फ़ॉर्म को बनाते हैं - अभी - ड्रम साफ और "सरल" है ES6। कुछ डिज़ाइनों को रिएक्ट घटकों पर लागू करना एक फव्वारा नहीं है, क्योंकि JSX में पठनीयता का अभाव है। HTML कोड के कुछ ब्लॉक में अच्छे पुराने IF को डालने में असमर्थता खराब है, और कृपया रिएक्ट करने वाले प्रशंसकों पर विश्वास न करें, जो कहते हैं कि "यदि () अंतिम शताब्दी है, और अब सभी सामान्य प्रोग्रामर टर्नरी ऑपरेटरों का उपयोग करते हैं"। मुझे आपको विश्वास दिलाता हूं: जेएसएक्स अभी भी HTML और जेएस की एक गड़बड़ी है जिसे आप पढ़ते हैं और इसे संपादित करते हैं, भले ही इसे बाद में शुद्ध जेएस में संकलित किया गया हो।

<ul>
       {items.map(item =>
         <li key={item.id}>{item.name}</li>
       )}
</ul>

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

stackoverflow.com/a/38231866/1132016

JSX आपको घटकों को 15-लाइनों-एचटीएमएल को 3 घटकों में तोड़ने के लिए मजबूर करता है, 5-लाइनें-एचटीएमएल-इन-प्रत्येक। ऐसा मत सोचो कि यह दृष्टिकोण आपको एक बेहतर डेवलपर बनाता है।

ये रही बात:

जब आप एक अपेक्षाकृत जटिल घटक लिखते हैं - जिसे आप शायद हैकटरन्यूज़ पर प्रदर्शित करने के लिए गिटहब पर एक सार्वजनिक प्रतिनिधि पर कल पोस्ट नहीं करने जा रहे हैं - जेएसएक्स प्रतिबंधों के कारण घटकों को सुपर गूंगा घटकों में तोड़ने का यह तरीका हमेशा आपको धारा से बाहर खींचता है, जो आप एक वास्तविक व्यापार समस्या को हल करते हैं। नहीं, मैं यह नहीं कह रहा हूं कि आंशिक घटकों का विचार बुरा है या काम नहीं कर रहा है। आपको स्पष्ट रूप से पता होना चाहिए कि आपको अपने कोड को नियंत्रित स्थिति में रखने के लिए कार्यक्षमता को इसके घटकों में विभाजित करना होगा। लेकिन आपको यह केवल तभी करना चाहिए जब आपको लगता है कि आपके कोड में यह विशेष तार्किक इकाई अपने स्वयं के रंगमंच की सामग्री के साथ एक अलग घटक बनना बेहतर है - और नहींहर दो या तीन शर्तों के लिए जो टर्नरी ऑपरेटर का उपयोग करके लिखी गई थीं! हर बार जब आप यहां और वहां एक नया घटक बनाते हैं, तो यह आपके लिए एक बहुत ही विशिष्ट प्रयास होता है और आपके प्रवाह को बाधित करता है।, क्योंकि आपको वास्तुकार की सोच से स्विच करने की आवश्यकता है (जब आप पहले से ही घटक मॉडल की वर्तमान स्थिति को याद करते हैं और आपको प्रबंधक की सोच के लिए बस काम करने के लिए HTML को यहां और वहां जोड़ना होगा): आपको घटक के लिए एक अलग फाइल बनाने की आवश्यकता है, इस नए घटक के सहारा के बारे में सोचें वे राज्य का नक्शा कैसे बनाते हैं, आप कॉलबैक को कैसे आगे बढ़ाते हैं, आदि। नतीजतन, कोड लिखने की गति कम हो जाती है, क्योंकि आपको उन घटकों के समय से पहले के प्रयासों पर खर्च करना पड़ता है जहां आपको शायद इसकी आवश्यकता नहीं होगी, अगर JSX सिंटैक्स अधिक लचीला था। मेरी राय में, समयपूर्व अनुकूलन समयपूर्व अनुकूलन के समान है। मेरे और हमारी टीम के लिए, कोड पठनीयता महत्वपूर्ण है, लेकिन लेखन कोड का आनंद लेना अभी भी बहुत महत्वपूर्ण है। यह शांत नहीं हैजब कैलकुलेटर के एक सरल रूप में 6 घटकों को बनाने की आवश्यकता होती है, प्रत्येक अपने स्वयं के प्रॉप्स के साथ।

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

फिर, मैं मोनोलिथ लिखने का प्रस्ताव नहीं करता। मैं दैनिक प्रोग्रामिंग के लिए माइक्रो कंप्यूटर के बजाय घटकों का उपयोग करने का सुझाव देता हूं। यह संतुलन और सामान्य ज्ञान के बारे में है।

रूपों और Redux के साथ काम करना आपको पूरे दिन प्रिंट करेगा

प्रतिक्रिया - यह स्वच्छता और एक तरफ़ा प्रवाह के बारे में है, याद है? यही कारण है कि LinkedStateMixin एक व्यक्ति गैर ग्राम बन गया।, और अब आपको 10 फॉर्म फ़ील्ड से इनपुट प्राप्त करने के लिए 10 फ़ंक्शन लिखना होगा। नहीं, आप निश्चित रूप से, एक फ़ंक्शन लिख सकते हैं जो e.target की जांच करेगा, लेकिन अंत में शर्तों का एक ऐसा पेड़ होगा, जो उस प्रपत्र से आने वाले डेटा के सामान्यीकरण के साथ होगा जिसे आप रोना चाहते हैं; इसलिए कोई ऐसा नहीं करता है। इन कार्यों के 80% में इस के साथ एक लाइन होगी ।सेटस्टैट () या Redux कार्रवाई के लिए एक कॉल। (तब आपको संभवतः 10 और स्थिरांक बनाने होंगे - प्रत्येक क्रिया के लिए)। मुझे लगता है कि यह दृष्टिकोण स्वीकार्य होगा यदि आप इसके बारे में सोचकर यह सब कोड उत्पन्न कर सकते हैं ... लेकिन मुझे कोई आईडीई संपादक नहीं पता है जो इस तरह के बॉयलरप्लेट के लेखन को सरल बना सके। आपको इतना क्यों छापना चाहिए? क्योंकि बड़े लोगों ने फैसला किया कि बड़े उद्यम अनुप्रयोगों में दो-तरफा बाध्यकारी खतरनाक है।मैं इस बात की पुष्टि कर सकता हूं कि दो-तरफ़ा बंधन कभी-कभी इतना सरल नहीं होता है और इतना पठनीय नहीं होता है, लेकिन इन आशंकाओं में से अधिकांश अंगुलर के पहले संस्करण से लोगों की सामान्य पीड़ा से संबंधित हैं, जहाँ दो-तरफ़ा बंधन सर्वोत्तम नहीं हो सकता है। और फिर भी ... यह शायद कोणीय में भी सबसे बड़ा गलत नहीं था। मेरे त्वरित संपादक को देखें, जिसे मैंने हाल ही में हमारे ड्रुपल प्लेटफ़ॉर्म के लिए Vue.js से तंग किया था (मैं डिजाइन के लिए अग्रिम रूप से माफी चाहता हूं, यह हमारे ऑपरेटरों के लिए यूआई बैकएंड है, और डिजाइनर हमारे ग्राहकों के लिए इंटरफेस बनाने में व्यस्त हैं, इसलिए कार्यक्षमता का यह टुकड़ा इसकी प्रतीक्षा कर रहा है। सुंदर बनने के लिए घंटे):शायद एंगुलर में भी सबसे बड़ा मिसकॉल नहीं था। मेरे त्वरित संपादक को देखें, जिसे मैंने हाल ही में अपने ड्रुपल प्लेटफॉर्म के लिए Vue.js से तंग किया था (मैं डिजाइन के लिए अग्रिम रूप से माफी चाहता हूं, यह हमारे ऑपरेटरों के लिए यूआई बैकएंड है, और डिजाइनर हमारे ग्राहकों के लिए इंटरफेस बनाने में व्यस्त हैं, इसलिए कार्यक्षमता का यह टुकड़ा इसकी प्रतीक्षा कर रहा है। सुंदर बनने के लिए घंटे):शायद एंगुलर में भी सबसे बड़ा मिसकॉल नहीं था। मेरे त्वरित संपादक को देखें, जिसे मैंने हाल ही में अपने ड्रुपल प्लेटफॉर्म के लिए Vue.js से तंग किया था (मैं डिजाइन के लिए अग्रिम रूप से माफी चाहता हूं, यह हमारे ऑपरेटरों के लिए यूआई बैकएंड है, और डिजाइनर हमारे ग्राहकों के लिए इंटरफेस बनाने में व्यस्त हैं, इसलिए कार्यक्षमता का यह टुकड़ा इसकी प्रतीक्षा कर रहा है। सुंदर बनने के लिए घंटे):



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

Redux भी क्रियात्मक है और इसके लिए बहुत अधिक लेखन की आवश्यकता होती है । और इंटरनेट पर, डेवलपर्स द्वारा बयान खोजना आसान है जो Mobx पर प्रतिक्रिया को Angular में बदलने का आरोप लगाते हैं, क्योंकि Mobx दो तरफ़ा डेटा बाइंडिंग का उपयोग करता है ("स्वच्छता" पर खंड # 1 देखें)। ऐसा लगता है कि कई स्मार्ट लोग अपने कोड के "स्वच्छता" को जल्दी और अच्छी तरह से हल किए गए व्यावसायिक कार्य (जो, सिद्धांत रूप में, यदि आपके पास समय सीमा नहीं है तो सामान्य है) से अधिक मूल्य है।

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

साधनों में अत्यधिकता

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

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

कोणीय 1: बहुत अधिक स्वतंत्रता बहुत बुरी है

कोणीय 1 अपने समय के लिए एक अच्छा ढांचा है, जो स्वच्छता की काल्पनिक जेएस मानचित्र के विपरीत कोने (प्रतिक्रिया से) में स्थित है और कोड की पठनीयता है। कोणीय आपको जल्दी से शुरू करने की अनुमति देता है, आपको कोड की पहली 1k लाइनों को लिखने का आनंद लेने की अनुमति देता है, और फिर यह व्यावहारिक रूप से आपको कोड लिखने की अनुमति देता है जो बहुत अच्छी तरह से काम नहीं करता है। आपको निर्देश, स्कोप और दो-तरफ़ा डेटा स्ट्रीम में खो जाने की संभावना है, जो आपके एप्लिकेशन की सभी परतों के माध्यम से प्रवेश करते हैं, आपके कोड के हंस गीत का अंतिम राग होगा, जिसे ताजे काम पर रखने वाले डेवलपर्स भी स्पर्श नहीं करना चाहेंगे, क्योंकि कुछ टूट जाएगा। ऐसा क्यों हो रहा है? Angular.js 2009 में बनाया गया था, जब फ्रंट-एंड डेवलपमेंट की दुनिया काफी सरल लग रही थी और किसी ने भी आवेदन की स्थिति पर अच्छे नियंत्रण के बारे में नहीं सोचा था। आपको लेखकों को दोष नहीं देना चाहिए - उन्होंने सिर्फ कुछ नए चिप्स के साथ बैकबोन के लिए एक प्रतियोगी बनाया और कम प्रिंट करना चाहते थे (और उन्होंने यह सब किया, किस कीमत पर एक और सवाल)।

Angular2

बस एक हैलो-वर्ल्ड एप्लिकेशन बनाएं और शलजम में समाप्त होने वाली फ़ाइलों की संख्या देखें। मुझे टाइपस्क्रिप्ट का उपयोग करना होगा (और मैं 100% निश्चित नहीं हूं कि मैं हर दिन क्या करना चाहता हूं - नहीं, दोस्तों, जेएस में स्थैतिक टाइपिंग एक रामबाण नहीं है, लेकिन एक बार फिर मुझे प्रिंट करना होगा, इस विषय पर एरिक एलियट के अच्छे विचार) और संकलक आरंभ करने के लिए। यह हमारे लिए पर्याप्त समय तक Angular2 को स्थगित करने के लिए पर्याप्त था। मैं आलसी हूं, और मेरे लिए वास्तविक कोड लिखना शुरू करने से पहले यह बहुत अधिक बॉयलरप्लेट है। मेरी राय में, एंगुलर 2 के लेखक एक उद्यम के लिए एक आदर्श प्रणाली बनाने की कोशिश कर रहे हैं जो एक साधारण, औसत उपयोगकर्ता के लिए व्यावसायिक समस्याओं को हल करने वाले ढांचे को बनाने की कोशिश करने के बजाय, रिएक्ट को हरा देगा। शायद मैं गलत हूं, और मेरी राय बदल सकती है - मुझे Angular2 में ज्यादा अनुभव नहीं है, हमने अंत में एक परीक्षण कैलकुलेटर एप्लिकेशन बनाया है। Vue.js पर एक अद्भुत तुलना पृष्ठ Angular2 को एक अच्छी प्रणाली कहता है, जिसमें Vue.js. के साथ आम तौर पर कई विचार हैं।

Vue.js

Vue.js एक ऐसी चीज है जिसका मैं लंबे समय से इंतजार कर रहा था (इसके बाद मैं Vue.js 2 के बारे में बात करूंगा, जिसमें Vue के पहले संस्करण की तुलना में कई सुधार प्राप्त हुए हैं, और यह सिस्टम का वर्तमान स्थिर संस्करण है)। मेरे लिए, लालित्य और संक्षिप्तता के संदर्भ में, साथ ही साथ वास्तविक दुनिया की समस्याओं के समाधान पर ध्यान केंद्रित करते हुए, Vue.js जेएस में सबसे बड़ी सफलता है क्योंकि 2007 में मुझे Jquery द्वारा मारा गया था। यदि आप Vue.js की लोकप्रियता के ग्राफ को देखें, तो ध्यान दें कि इस वर्ष उसने मुझे न केवल प्रसन्न किया:



Vue Github पर - 2016 की शीर्ष 1 JS परियोजना (स्रोत कोड के साथ शलजम के बीच)।

Google रुझानों में लोकप्रियता के आधार पर, 2016 में Vue.js ने तीव्र रूप से बेहतर प्रतिक्रिया व्यक्त की (बेशक, यह एक बहुत बड़े अस्पताल में औसत तापमान है, और तैयार किए गए अनुरोध पर बहुत अधिक निर्भर करता है - लोकप्रियता का एक बहुत अप्रत्यक्ष संकेत)।
https://www.google.com/trends/explore?q=vue.js,react.js,angular.js

Vue.js सबसे तेजी से बढ़ते (समुदाय के संदर्भ में या कम से कम पसंद की संख्या में से एक है) और 2016 में Vue Dev Tools के उपयोगकर्ता) JS समाधान 2016 में, और मुझे यकीन है कि यह हिपस्टर्स के लिए सिर्फ एक और फैशनेबल लाइब्रेरी नहीं है, जो हर 3 महीने में एक नया JS फ्रेमवर्क स्विच करता है, या PR विभाग का काम बहुत बड़ा है कंपनी।

Laravel ने कर्नेल में Vue.js को जोड़ा है, और यह एक गंभीर दावा है।

Vue.js के पेशेवरों

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

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

जादू की सही मात्रा

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

आकार

Vue.js में HTML रूपों के साथ काम करना एक खुशी है। यह वह जगह है जहां दो तरफा बाध्यकारी वास्तव में मदद करता है। मुश्किल मामलों में भी, कोई समस्या नहीं है, हालांकि पहरेदार पहली नज़र में कोणीय 1 से मिल सकते हैं। घटकों को विभाजित करते समय एक तरफ़ा डेटा प्रवाह हमेशा आपकी सेवा में होता है।

प्रौद्योगिकी के

यदि आप संकलन चाहते हैं, तो linting, PostCSS और ES6 कोई समस्या नहीं है । एकल-फ़ाइल घटक Vue.js 2 में सार्वजनिक घटकों को लिखने का मुख्य तरीका बनते प्रतीत हो रहे हैं। वैसे, बॉक्स से बाहर एकल-फ़ाइल घटकों में काम करने वाले Scoped CSS का विचार वास्तव में अच्छा लग रहा है और सख्त CSS नामकरण नियमों की आवश्यकता को कम कर सकता है। बीईएम जैसी कक्षाएं और प्रौद्योगिकियां ।

राज्य प्रबंधन

Vue.js के पास डेटा () और प्रॉप्स () विधियों के माध्यम से एक काफी सरल और उपयोगी राज्य प्रबंधन है - वे वास्तविक विकास में ठीक काम करते हैं। यदि आत्मा राज्य प्रबंधन के लिए कुछ और मांगता है, तो वहां Vuex है (जो, मेरी राय में, प्रतिक्रिया में Mobx के समान है - राज्य वहां पारस्परिक है)। मुझे लगता है कि Vue.js अनुप्रयोगों का एक अच्छा प्रतिशत Vuex के माध्यम से राज्य प्रबंधन की आवश्यकता नहीं होगी, लेकिन इसका विकल्प होना अच्छा है।

उत्पादकता

विषय समग्र है, सामान्य तौर पर, प्रतिक्रिया और vue.js दोनों तेज हैं। लेकिन फिर भी, जाहिरा तौर पर, औसतन vue.js काफ़ी तेज़ी से होता है।

टोडो एमवीसी पर टिप्पणियों से एक अद्भुत लिंक माप के साथ चलता है:
eigenmethod.imtqy.com/mol/app/bench/#bench=%2Ftodomvc%2Fbenchmark%2Fenchmark=angular2~angularjs~mol~react~vue~vanillajs#ortort####

और यहां अधिक विस्तृत खाते हैं (इच्छुक पार्टी से, हालांकि) ।

एक और विस्तृत और समझदार बेंचमार्क तुलना:
stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

विपक्ष VueJS

रनटाइम टेम्पलेट त्रुटियां

सबसे बड़ी: टेम्पलेट्स में अप्रिय रनटाइम त्रुटियां। कोड लिखने की सुविधा के लिए पीड़ित। यह कोणीय 1. के समान है। Vue.js जेएस कोड के लिए कई उपयोगी चेतावनी उत्पन्न करने का प्रबंधन करता है: उदाहरण के लिए, जब आप प्रॉप्स को म्यूट करने की कोशिश करते हैं या डेटा () पद्धति का गलत तरीके से उपयोग करते हैं, तो यहां रिएक्ट का सकारात्मक प्रभाव बहुत ध्यान देने योग्य होता है। लेकिन रनटाइम टेम्प्लेट त्रुटियां अभी भी V.js. की कमजोरी हैं। अपवाद स्टैक के निशान अक्सर बेकार होते हैं और Vue.js के आंतरिक तरीकों का नेतृत्व करते हैं। इस स्थिति में, त्रुटियों और डिबगिंग के इस वर्ग में, JSX अक्सर अधिक सुखद होता है: संकलन "JS से JS तक" के कारण, ब्राउज़र कंसोल में एक त्रुटि पर क्लिक करने से आमतौर पर ठीक वही होता है जहां यह त्रुटि कोड में हुई थी।

पुस्तकालयों

Vue.js का बुनियादी ढांचा अभी भी काफी युवा है। वास्तव में, समुदाय से स्थिर घटकों को उंगलियों पर गिना जा सकता है, और उनमें से कई Vue.js 1 के लिए बनाए गए थे, और शुरुआती लोगों के लिए यह पता लगाना बहुत आसान नहीं है कि Vue.js के किस संस्करण के लिए एक विशेष पुस्तकालय बनाया गया है। इस समस्या को इस तथ्य से कम किया जाता है कि आप तीसरे पक्ष के पुस्तकालयों की आवश्यकता का अनुभव किए बिना Vue.js में शांत चीजें कर सकते हैं। शायद आपको केवल अजाक्स अनुरोधों के लिए एक पुस्तकालय की आवश्यकता है ( यदि आप आइसोमोर्फिक अनुप्रयोगों, अन्यथा एक्सियोस ) के बारे में परवाह नहीं करते हैं तो एक अच्छा विकल्प होगा ।

गैर-अंग्रेजी भाषी समुदाय

अधिकांश सार्वजनिक रिपॉजिटरी के कोड में चीनी टिप्पणियाँ, और यह आश्चर्य की बात नहीं है: Vue.js चीन में एक बहुत लोकप्रिय समाधान बन रहा है (Vue.js चीनी बोलते हैं)

एक व्यक्ति परियोजना।

बल्कि, एक वास्तविक की तुलना में एक संभावित समस्या है, लेकिन कभी-कभी आप इसे सुरक्षित खेलना चाहते हैं। इवान आप वह व्यक्ति हैं जिन्होंने Google और उल्का पर काम करने के बाद Vue का निर्माण किया। लारवेल, बेशक, एक एकल-पुरुष परियोजना भी है, लेकिन फिर भी वह अभी भी बहुत सफल है, है ना?

द्रुपाल में Vue.js

Disclaimer: Drupal 8 Qwintry, , PHP Node.js , legacy – Drupal. qwintry.com Drupal, Vue.js . , , , -, , , , . , Vue Drupal: , - , . JSON API – , . , REST API Saas , , - , . . , 2010 Ajax Drupal. , Drupal , - Ajax – . , , ctools_wizard_multistep_form (), , ajax_render !

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

Yue2 में Vue.js

मजेदार तथ्य: Yii को चीनी भाषा के डेवलपर Qiang Xue द्वारा बनाया गया था। इस प्रकार, कोई Yii + Vue.js को एक स्टैक कह सकता है न कि केवल एक स्टैक, जिसका नाम पहली कोशिश पर उच्चारण करना लगभग असंभव है, लेकिन चीनी विरासत (एक अच्छे तरीके से) के साथ एक स्टैक भी है। Qwintry.com के नए संस्करण के लिए (अभी तक प्रकाशित नहीं), हमने Yii2 को चुना, जो, मेरी राय में, सबसे अच्छे और सबसे तेज़ PHP फ्रेमवर्क में से एक है। यह निश्चित रूप से लारवेल के रूप में लोकप्रिय नहीं है, जिसने पीएचपी की दुनिया में कदम रखा है , लेकिन Yii2 स्टैक हमारे साथ काफी ठीक है।(हालांकि हम समय-समय पर लारवेल को देखते हैं, वहां के डेवलपर्स, दोहन कर रहे हैं, और निश्चित रूप से, पुस्तकालयों के संदर्भ में एक अधिक परिपक्व बुनियादी ढांचा है)। हम धीरे-धीरे HTML की मात्रा को कम कर रहे हैं जो Yii2 और PHP उत्पन्न करते हैं, REST API पर अधिक ध्यान केंद्रित करते हैं, जो क्लाइंट पक्ष के लिए JSON उत्पन्न करता है, जो Vue.js / Swift / Java पर चल रहा है। एपीआई-पहले दृष्टिकोण का उपयोग परियोजना में हमारे अधिकांश सक्रिय रिकॉर्ड मॉडल के लिए किया जाता है। यहां हम पहले से ही एपीआई के बारे में गंभीर हैं और यही कारण है कि हम अच्छे एपीआई प्रलेखन पर बहुत समय बिताते हैं, भले ही यह एपीआई सार्वजनिक न हो। कोड अनुभागों में जहां HTML भाग PHP स्तर पर उत्पन्न होता है, हम अपने स्वयं के समाधानों और वेबपैक को बंडल करने के लिए उपयोग करते हैं और वाई 2 विजेट्स की सुविधाजनक तैनाती करते हैं, जो बदले में, वीयू सिंगल-फाइल घटकों का उपयोग करते हैं। PHP7 और नवीनतम MySQL के साथ, हमारे Yii2 JSON बैकएंड का प्रतिक्रिया समय नोड से बहुत अलग नहीं है।js बैकेंड्स (मैं 15-20ms के ऑर्डर की प्रतिक्रिया की गति के बारे में बात कर रहा हूं), ये कॉस्मिक आंकड़े नहीं हैं, स्पष्ट रूप से, लेकिन यह हमारी जरूरतों के लिए पर्याप्त से अधिक है, और, सबसे महत्वपूर्ण बात यह है कि यह जो दे सकता है उससे 10-20 गुना तेज है हमारी पुरानी Drupal साइट। इसी समय, यह एक अच्छा पुराना (और उबाऊ, शायद) पीएचपी है जो संगीतकार पुस्तकालयों की पूरी ताकत और एक स्थिर कोड आधार के साथ है। Yii2 और Vue.js पर निर्मित इंटरफेस की जवाबदेही बहुत स्वीकार्य है, और, कोड पठनीयता के दृष्टिकोण से, यहां भी सब कुछ क्रम में है।Yii2 और Vue.js पर निर्मित इंटरफेस की जवाबदेही बहुत स्वीकार्य है, और, कोड पठनीयता के दृष्टिकोण से, यहां भी सब कुछ क्रम में है।Yii2 और Vue.js पर निर्मित इंटरफेस की जवाबदेही बहुत स्वीकार्य है, और, कोड पठनीयता के दृष्टिकोण से, यहां भी सब कुछ क्रम में है।

हम कई आंतरिक और बाह्य परियोजनाओं में Vue.js का उपयोग करते हैं, जहां बैकएंड Node.js पर चलता है - मैं ऊपर कुछ भी नया नहीं जोड़ूंगा, सब कुछ ठीक काम करता है।

निष्कर्ष

हम विभिन्न परियोजनाओं में लगभग 4 महीने से हर दिन Vue.js कोड लिख रहे हैं, और परिणाम प्रभावशाली हैं। 4 महीने बैकएंड की दुनिया में कुछ भी नहीं है, लेकिन जेएस दुनिया के लिए यह एक सभ्य अवधि है जिसके लिए पांच ढांचे पैदा होते हैं और मर जाते हैं :) आइए देखें कि आगे क्या होता है। मुझे लगता है कि Vue.js अगले 16-24 महीनों में JS के लिए मुख्य समाधान होगा यदि Evan आप सही कदम उठाते हैं, कम से कम बैक-एंड और छोटी फ्रंट-एंड टीमों के बीच। 2017 में रिएक्ट स्टैक मुख्य धारा होगा, खासकर अगर रिएक्ट नेटिव उसी गति से बढ़ता और सुधरा रहता है, जैसा अभी है।

युपीडी: यह लेख शीर्ष HackerNews मारा, और वहाँ एक उपयोगी चर्चा (250+ टिप्पणियाँ) शुरू हो गयी: news.ycombinator.com/item?id=13151317

शीर्ष रेडिट में हम भी दौरा किया webdev, 60 + टिप्पणियाँ यहां। वहाँ से Angular2 के बारे में मजेदार टिप्पणी-राय:

Google के सभी दस्तावेज़ 2000 के दशक की शुरुआत से Microsoft डॉक्स पढ़ने की तरह हैं।
"एक कोणीय परियोजना की स्थापना केक का एक टुकड़ा है! बस सुनिश्चित करें कि आधारहीन संदर्भ प्रोटोटाइप म्यूटेटर बेस मेमोरी लोडर विरासत ऑब्जेक्ट से लागू होता है जो MODOK सेवा प्रदाता को लागू करता है (कोर का हिस्सा नहीं: समान रूप से अपठनीय विवरण के लिए यहां देखें)। तब आप अपने कोणीय कर्नेल को संकलित करने के लिए तैयार होंगे, वेबपैक 2.3.9 का उपयोग करने के लिए सावधान रहें (ध्यान दें: 2.3.8 नहीं जैसा कि भंडार के साथ आपूर्ति की गई है)। यह आपको एक महान कोणीय परियोजना पर आरंभ करने के लिए जानने की आवश्यकता है। कोणीय: विकास को सरल और फिर से मज़ेदार बनाना! "

पाठकों से सवाल:

JSX शांत और सही है, लेकिन आप बहुत नहीं हैं! यदि आप वास्तव में स्थितियाँ चाहते हैं - प्रोग्राम अपने if घटक, ये तीन लाइनें हैं!

एक रूपरेखा चुनना अप्रिय है, और फिर उसके खिलाफ ऐसी बातें करें, परियोजना में आने वाला हर नया डेवलपर आपसे इस तरह के निर्णयों के बारे में पूछेगा, और अन्य लोगों के घटकों में आपकी आँखें हमेशा तन्मयता से ठोकर खाएंगी।
इसके अलावा, यदि घटक "माथे" लिखा जाता है, तो इसमें समस्या होगी कि आंतरिक घटक हमेशा निष्पादित होते हैं। लेकिन अधिक दिलचस्प समाधान हैं: github.com/AlexGilleran/jsx-control-statements

तो आप क्या सुझाव देते हैं, प्रिय, अब आपको तत्काल प्रतिक्रिया को छोड़ने और Vue.js को सब कुछ फिर से लिखना होगा?

नहीं, नहीं! प्रतिक्रिया एक उत्कृष्ट ढांचा है, और यह आपको पठनीय और समर्थित कोड लिखने की अनुमति देता है, और उच्च गुणवत्ता वाली पुस्तकालयों की एक बड़ी मात्रा भी पहले से ही इसके लिए लिखी गई है (और जेएसएक्स के सूक्ष्म घटक और सीमाएं, जिन्हें मैंने "डांटा" था, यहां एक सकारात्मक भूमिका निभाते हैं, सार्वजनिक पुस्तकालयों के लिए यह है) पहले से ही उचित), जो किसी अन्य जेएस समाधान के लिए नहीं हैं। यदि आप और आपकी टीम JSX में सब कुछ से खुश हैं और आप बहुत कुछ टाइप करने से परेशान नहीं हैं, तो शायद Vue.js पर स्विच करने का कोई मतलब नहीं है, खेल बस मोमबत्ती के लायक नहीं है। कई जेएस प्रेमी हाल ही में एक फ्रेमवर्क से एक फ्रेमवर्क से कूदते हुए प्यार करते रहे हैं। इसका दुरुपयोग न करें, मेरी राय में, इस समय को कुछ अधिक दिलचस्प पर खर्च करने से बेहतर है कि आपके प्रोजेक्ट के उपयोगकर्ता नोटिस करेंगे।

लेकिन अगर आप बड़े पैमाने पर टूल और अन्य कठिनाइयों के कारण अपने आप को रिएक्ट का उपयोग करना शुरू नहीं कर पाते हैं, और आपका कोड jQuery या बैकबोन मेस में आता है, तो Vue.js एक बेहतरीन विकल्प हो सकता है, न कि शैक्षणिक, सरल और संक्षिप्त।

मैंने पूरा लेख नहीं पढ़ा, लेकिन हेडलाइन में आपने प्रतिरक्षा के बारे में कुछ नकारात्मक कहा है, आप शायद अपनी अनुभवहीनता और मूर्खता के कारण रूढ़िवादी नहीं हैं, आप यह नहीं समझते हैं कि कार्यात्मक दृष्टिकोण कितना अद्भुत है!

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

यदि आप अपने जीवन को सरल बनाना चाहते हैं, तो बस अपनी स्थिति को बदलना बंद कर दें, प्रॉप्स पर स्विच करें, और ये सरल चीजें अभी आपके जीवन को बेहतर बनाएंगी।