2020 में फ्रंट-एंड डेवलपमेंट के लिए टॉप 5 जेएस फ्रेमवर्क। भाग 1

संभवतः, फ्रंट-एंड डेवलपर्स कुछ इसी तरह से परिचित हैं: आप खोज इंजन में "सबसे अच्छा जावास्क्रिप्ट चौखटे" में प्रवेश करते हैं और परिणाम के एक पूरे पहाड़ के जवाब में प्राप्त करते हैं, जिसमें से यह चुनना बहुत मुश्किल है कि आपको वास्तव में क्या चाहिए।

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



फ्रेमवर्क और लाइब्रेरी की इस रेटिंग का संकलन ValueCoders के 450 से अधिक डेवलपर्स के सर्वेक्षण पर आधारित था। पांच सबसे दिलचस्प उपकरण यहां मिले।

ValueCoders Developers रिएक्ट चुनें

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

• पुन: प्रयोज्य घटक।
• अनुप्रयोग स्थिति और इंटरफ़ेस का सिंक्रनाइज़ेशन।
• रूटिंग और मानकीकरण प्रणाली।

हमारे डेवलपर्स फ्रंट-एंड प्रोजेक्ट लॉजिक बनाने में रिएक्ट की क्षमताओं पर बहुत भरोसा करते हैं। उपकरण बहुत शक्तिशाली है, लेकिन एक ही समय में, जिसने मुझे आश्चर्यचकित किया, यह आश्चर्यजनक रूप से उपयोग करना आसान है।

हमारे आवेदन का अवलोकन

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

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


छात्र और उसकी गतिविधियों के बारे में जानकारी

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

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

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

बिग फाइव फ्रंट-एंड टूल्स

फ्रंट-एंड डेवलपमेंट टूल्स की लोकप्रियता और व्यापकता के आधार पर, यहां पांच सबसे उल्लेखनीय जावास्क्रिप्ट फ्रेमवर्क और लाइब्रेरी हैं:

• प्रतिक्रिया
• Vue
• कोणीय
• अंगार
• Backbone.js

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


कोणीय, अंगारे-स्रोत, प्रतिक्रिया, पुए और रीढ़ पैकेज के लिए वॉल्यूम डाउनलोड करें


कोणीय, अंगारे-स्रोत, प्रतिक्रिया, Vue और रीढ़ पैकेज की तुलना

अब हम इनमें से प्रत्येक प्रोजेक्ट के बारे में बात करते हैं। शुरुआत करते हैं रिएक्ट से।

1. प्रतिक्रिया

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

वेब परियोजनाओं के विकास में लचीले ढंग से प्रतिक्रिया का उपयोग करने के लिए, आपको कई अतिरिक्त टूल सीखने की आवश्यकता है। यहां, उदाहरण के लिए, पुस्तकालयों द्वारा उपलब्ध कराए गए ऐसे उपकरणों की एक विस्तृत सूची नहीं है, जिन्हें रिएक्ट के साथ संयोजन में उपयोग किया जा सकता है। ये Redux, MobX, Fluxy, Fluxible, RefluxJS हैं। React के विकास में, आप jQuery AJAX, Superagent, Axios और Fetch API का भी उपयोग कर सकते हैं।

Mode प्रतिस्पर्धी मोड

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

▍Suspense और अन्य प्रौद्योगिकियां

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

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

प्रतिक्रिया अनुप्रयोगों में ऐसे घटक शामिल होते हैं जिनमें इंटरफ़ेस बनाने के लिए एप्लिकेशन लॉजिक और HTML मार्कअप होता है। घटकों के बीच बातचीत को बेहतर बनाने के लिए, डेवलपर फ्लक्स या एक समान जावास्क्रिप्ट पुस्तकालय का उपयोग कर सकता है।

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

Ct रिएक्ट इकोसिस्टम एलिमेंट्स

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

• रिएक्ट लाइब्रेरी और रिएक्ट राउटर ही एप्लिकेशन में मार्गों के प्रबंधन के लिए एक उपकरण है।
• DOM के साथ काम करने के लिए डिज़ाइन किया गया रिएक्शन-डोम पैकेज।
• फ़ायरफ़ॉक्स और क्रोम के लिए रिएक्टर डेवलपर उपकरण।
• JSX एक मार्कअप भाषा है जो आपको जावास्क्रिप्ट कोड में HTML तत्वों का वर्णन करने की अनुमति देती है।
• Create-react-app कमांड-लाइन टूल, जिसे टेम्पलेट रिएक्ट प्रोजेक्ट बनाने के लिए डिज़ाइन किया गया है।
• विभिन्न सहायक पुस्तकालय। उनमें से, उदाहरण के लिए, हम अनुप्रयोगों की स्थिति को नियंत्रित करने के लिए उपयोग की जाने वाली Redux लाइब्रेरी का उल्लेख कर सकते हैं, और Axios लाइब्रेरी का उपयोग सर्वर API के साथ डेटा का आदान-प्रदान करने के लिए किया जाता है।

रिएक्ट के बारे में बात करते हुए, हम कह सकते हैं कि यह पुस्तकालय उन लोगों के लिए सबसे अच्छा विकल्प हो सकता है जो एक उन्नत वेब प्रोजेक्ट बनाने की योजना बनाते हैं।

2. कोणीय

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

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

कोणीय अपने लचीलेपन के लिए जाना जाता है। यही कारण है कि कोणीय 1.x संस्करण अभी भी प्रासंगिक हैं। हालांकि, कई डेवलपर्स आज MVC फ्रेमवर्क आर्किटेक्चर के कारण कोणीय 2+ का उपयोग करते हैं, जो कि घटक-आधारित वास्तुकला की ओर काफी बदल गया है।

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

▍बिजली पारिस्थितिकी तंत्र तत्व

एंगुलर इकोसिस्टम के कुछ भाग इस प्रकार हैं:

• एप्लिकेशन प्रीसेट निर्माण को सरल बनाने के लिए कमांड लाइन टूल।
• मॉड्यूल का एक सेट जो कि कोणीय परियोजनाओं को विकसित करते समय उपयोग किया जा सकता है: @angular/common , @angular/compiler , @angular/core , @angular/forms , @angular/http , @angular/platform-browser , @angular/platform-browser-dynamic , @angular/router और @angular/upgrade ।
• ज़ोन.जेएस पुस्तकालय जो आपको कोड निष्पादन के संदर्भ को नियंत्रित करने की अनुमति देता है।
• टाइपस्क्रिप्ट और कॉफीस्क्रिप्ट भाषाएँ।
• Angular अनुप्रयोगों में डेटा विनिमय RxJS और ऑब्जर्वेबल ऑब्जेक्ट्स का उपयोग करके आयोजित किया जा सकता है।
• कोणीय ऑग्यूरी, कोणीय अनुप्रयोगों को डीबग करने का एक उपकरण है।
• कोणीय अनुप्रयोगों के सर्वर-साइड प्रतिपादन के आयोजन के लिए कोणीय सार्वभौमिक प्रौद्योगिकी।

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

निरंतरता, भाग २

प्रिय पाठकों! यदि आपको फ्रंट-एंड डेवलपमेंट के लिए सबसे अच्छे ढांचे के नाम की पेशकश की गई थी - तो आप क्या चुनेंगे?