प्रतिक्रिया और वीयू: ताकत

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

बहुत से डेवलपर्स React और Vue की तुलना करना पसंद करते हैं। कोई भी इन रूपरेखाओं में से एक पर रुक जाता है और हठपूर्वक इसका पालन करता है, बिना किसी अन्य पुस्तकालय से परिचित होने के लिए परेशान किए बिना कि वह एक बार अस्वीकार कर दिया था। यह अक्सर समय की बात है: किसी सिस्टम के सभी इनपुट और आउटपुट को सही मायने में मास्टर करने के लिए, आपको इसके साथ काम करने, लड़ने और बढ़ने की आवश्यकता है।

बेशक, इसी तरह के उपकरणों के बीच छिड़काव अक्षम है, लेकिन क्या आप उत्सुक नहीं हैं? मैं उत्सुक हूं।

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

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

क्षुधा

मैं लगभग दो वर्षों से Vue का उपयोग कर रहा हूं, और लगभग आठ वर्षों से वेब विकास कर रहा हूं। पहली बार Vue के साथ अपनी ताकत आज़माने के बाद, मैंने फैसला किया कि मैं नोट्स लेने के लिए एक साधारण एप्लिकेशन को ओपन सोर्स में डालकर "खुले तौर पर" इसका अध्ययन करूंगा, जहां JWT का उपयोग करके उपयोगकर्ता को प्रमाणित करना संभव होगा, साथ ही नोट्स के साथ CRUD क्रियाओं का एक पूरा सेट। उसके संबंध में, मैंने Koa का उपयोग करते हुए एक बैकएंड एप्लिकेशन लिखा।

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

यहाँ मेरे आवेदन का मुख पृष्ठ है। ऊपर रिएक्ट संस्करण है, नीचे Vue है :

हालाँकि मैं अपने अनुप्रयोगों में बूटस्ट्रैप का कम उपयोग करता हूं, मैं आमतौर पर बूटस्ट्रैप 4 में पेश किए गए नए नवबार घटक को अपने अनुप्रयोगों में लागू करता हूं। Vue में इसे दोहराने की कोशिश कर रहा हूं, मैंने पाया कि बूटस्ट्रैप-बूट बूटस्ट्रैप को लागू करने के लिए सबसे अच्छा विकल्प है। अनुभवों और अध्ययनों ने मुझे प्रतिक्रिया के लिए प्रेरित किया ।

इस मामले में, यह ध्यान दिया जाना चाहिए कि अंत में मैंने रिएक्ट में बूटस्ट्रैप ग्रिड का उपयोग नहीं किया, लेकिन ग्रिड-स्टाइल विकल्प पर बसे, जो मेरे द्वारा उपयोग किए गए स्टाइल-घटकों के साथ बेहतर था - नीचे इस पर और अधिक।

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

स्रोत कोड के साथ निर्देशिकाओं की तुलना करना

पहला इंप्रेशन

प्रतिक्रिया के साथ काम करते समय, एक बात तुरंत स्पष्ट हो जाती है: आपको जावास्क्रिप्ट के साथ बहुत निकटता से निपटना होगा।

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

रिएक्ट-राउटर और वी-राउटर की तुलना करें

रिएक्ट-राउटर रिएक्ट के लिए एक सक्रिय रूप से इस्तेमाल किया जाने वाला रूटिंग सिस्टम है। उसकी उत्कृष्ट गति है, हालांकि, व्यवहार में उसके साथ व्यवहार करते हुए, मुझे कुछ दिलचस्प समस्याएं आईं। मूल सेटअप काफी सरल है, हालांकि, मैं सीधे HTML में मार्गों की घोषणा करने का प्रशंसक नहीं हूं, जैसा कि रिएक्ट-राउटर v4 में आवश्यक है (प्रतिक्रिया-राउटर के पुराने संस्करणों में स्थिति अलग थी)।

अपने मार्गों को अलग करने के लिए, मुझे निम्नलिखित समस्या का सामना करना पड़ा: उपयोगकर्ताओं को उन पृष्ठों तक पहुंचने से कैसे रोकें, जिनकी उन्हें पहुंच नहीं होनी चाहिए। एक प्राथमिक उदाहरण: एक उपयोगकर्ता लॉग इन किए बिना एक प्रकार का खाता खोलने का प्रयास करता है। रिएक्ट-राउटर का उपयोग करके अंतिम समाधान देने के लिए परीक्षण और त्रुटि से स्थिति और कार्यों का अध्ययन करने में कई घंटे लग गए।

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



Vue-Router रूटिंग के लिए Vue की अपनी लाइब्रेरी है। मुझे वास्तव में पसंद है कि आप रूट डिक्लेरेशन फ़ाइल में सीधे रूट परिभाषाओं में अतिरिक्त जानकारी कैसे जोड़ सकते हैं। मार्ग परिभाषा में अपेक्षित संपत्ति का उपयोग करके मैंने Vue-Router में पृष्ठों तक पहुँचने से उपयोगकर्ताओं को कैसे वर्जित किया है, यह देखिए और राऊटर को सत्यापित किया है।



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

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

मैंने हर चीज के बारे में एक अतिरिक्त घंटे बिताए, यह पता लगाने के लिए। सबसे गंभीर समस्या नहीं है, हालांकि, यह उस अनुभव से बहुत अलग है जो मेरे पास Vue-Router के साथ था, अर्थात्: प्रलेखन में देखें और कोड में समाधान को लागू करें। मैं यह कहने की कोशिश नहीं कर रहा हूं कि Vue के साथ - जीवन नहीं, बल्कि एक परी कथा; यह सिर्फ इतना ही है कि रिएक्ट के मामले में, मुझे यह आभास हुआ जैसे कि रास्ता मेरी अपेक्षा से कहीं अधिक कांटेदार था।

Redux और Vuex की तुलना

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



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

Vue दुनिया में Vuex Redux के बराबर है। इस क्षेत्र में दोनों पुस्तकालयों का वास्तव में उत्कृष्ट समर्थन है। Reducers के बजाय, Vuex म्यूटेशन का उपयोग सुरक्षित रूप से भंडारण डेटा को अपडेट करने के लिए करता है। नामकरण में मामूली अंतर के अलावा, दोनों पुस्तकालय बहुत समान हैं। नीचे, मैंने src / store / note.js में Vue एप्लिकेशन में समान कार्यक्षमता लागू की (स्वाभाविक रूप से, दोनों उदाहरण थोड़ा संक्षिप्त हैं:



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

उदाहरण के लिए, आपको अन्य क्रियाओं से कार्यों को निकालने के लिए रेडक्स-थंक लाइब्रेरी का अध्ययन करना और स्थापित करना होगा, और मेरे लिए यह एक अप्रिय मोड़ था। बेशक, मैंने इस बारे में सोचने में कुछ और घंटे बिताए कि क्या Redux-thunk के बजाय redux-saga या redux-observable का उपयोग करना है या नहीं। तब मेरा दिमाग चकरा गया, भावना को केवल शब्द के साथ वर्णित किया जा सकता है।

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

प्रतिपादन

सभी रिएक्ट विवरणों में, प्रतिपादन कार्य मेरे लिए सबसे अजीब बात थी। Vue में, यह डेटा पर फैलाने और तत्वों को बाहर निकालने, या राज्य / भंडारण चर के आधार पर डेटा दिखाने / छिपाने के लिए इतना सरल है। प्रतिक्रिया में, यह प्रतीत होता है कि रेंडरर के बाहर नोट्स का एक लूप बनाना अप्राकृतिक था।

Vue में, यदि आप कुछ दिखाना या छिपाना चाहते हैं, तो बस यह करें:



और यह कोड आपके myVariable की सच्चाई पर निर्भर करेगा। प्रतिक्रिया में, जाहिरा तौर पर, आपको यह करना होगा:



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

स्टाइल-अवयव

क्या आप जानते हैं कि इस परियोजना के बारे में मुझे क्या पसंद है? स्टाइल-घटकों । मैं वास्तव में उनके द्वारा प्रदान किए गए एनकैप्सुलेशन की सराहना करता हूं। हां, Vue में आप अपने कंपोनेंट के सेक्शन में स्कॉप्ड प्रॉपर्टी को पिन कर सकते हैं और सिद्धांत रूप में, वही करें।

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

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

Create-React-App और Vue-CLI की तुलना करें

मुझे क्रिएट-रिएक्शन-ऐप बहुत पसंद आया। हालांकि मैं vue-cli का प्रशंसक हूं, लेकिन क्रिएट-रिएक्शन-ऐप विकल्प एक योग्य प्रतियोगी है। मेरा सुझाव है कि सभी उपयोगकर्ता विवरण को समझने के लिए स्क्रैच से वेबपैक का एक उदाहरण स्थापित करते हैं। लेकिन, अगर आपको उत्पादन के लिए कुछ ठोस चाहिए, तो मैं तैयार किए गए मचान उपकरण का उपयोग करने की अत्यधिक सलाह देता हूं।

विकास के उपकरण

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

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

निष्कर्ष

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

मैं अंतहीन छोटी चीजों की तुलना में जा सकता था। वास्तव में, यह लेख केवल Vue / React की तुलना के बारे में कहा जा सकता है। एप्लिकेशन के साथ प्रयोग - मैं इस पर सक्रिय रूप से टिप्पणी कर रहा हूं, और ये टिप्स और ट्रिक्स आपके लिए भी काम आएंगे।

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

»प्री-ऑर्डर बुक करने के लिए लिंक

मार्च के अंत में पेपर संस्करण दिखाई देगा।

फेरीवालों के लिए कूपन पर 25% की छूट - Vue.js