रिएक्ट बाह्य उपकरणों पर नए फ्रंट-एंड लाइब्रेरी

नमस्कार, हेब्र!

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

बिल्ली के लिए आपका स्वागत है!

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

हालाँकि, फ्रंट-एंड इकोसिस्टम तेजी से विकसित हो रहा है; इस क्षेत्र में बहुत सारी दिलचस्प परियोजनाएँ विकसित की जा रही हैं। मैं लगातार अगली तकनीक की तलाश कर रहा हूं जो एक बार फिर खेल के नियमों को बदल देगी। मुझे यह पसंद है जब कल का बाहरी व्यक्ति इक्के में चला जाता है, पूरी तरह से काम करने के लिए हमारे सामान्य दृष्टिकोण को कम करके - जैसा कि रिएक्ट ने 6 साल पहले किया था।

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

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

दुर्बल

आइए पूरी तरह से नए ढाँचों के साथ शुरू करें जो पहले से मौजूद किसी चीज़ को बदलने के बजाय सोच के नए तरीकों को विकसित करता है। यह Svelte है। यह क्लाइंट इकोसिस्टम में एक नया प्रतिमान है।



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

Svelte का दूसरा महत्वपूर्ण गुण इसका वाक्य-विन्यास है। यह इतना कम से कम है, जैसे कि कोई सिंटैक्स नहीं था। हम इस पर वापस आएंगे।

Svelte React और Vue से बहुत अधिक उधार लेता है। यदि आपके पास रिएक्ट के साथ अनुभव है, तो आप पहले से ही बहुत कुछ जानते हैं, और आपको शायद ही स्वेल को मास्टर करने के लिए समय की आवश्यकता होगी।

आइए Svelte की छाप देने के लिए कुछ कोड देखें।

एक नए घटक को परिभाषित करने के लिए, एक नई फ़ाइल बनाई जाती है और इस फ़ाइल का नाम घटक का नाम होगा। इस फ़ाइल में एक वैकल्पिक स्क्रिप्ट अनुभाग होगा, एक वैकल्पिक शैली अनुभाग और, महत्वपूर्ण रूप से, स्वयं HTML टेम्पलेट। Svelte JSX का उपयोग नहीं करता है, लेकिन अपनी स्वयं की टेम्पलेट भाषा का उपयोग करता है।

<script> export let counter; //      </script> <style> p { color: purple; } </style> <p>The counter is {counter}</p> 

Vue जैसा थोड़ा, लेकिन सरल।

सिंटैक्स ... और कोई विशेष सिंटैक्स नहीं है, यह सिर्फ शुद्ध जावास्क्रिप्ट है। एक स्थिति सेट करना चाहते हैं? बस counter चर बढ़ाएँ।

 <script> let count = 0; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> 

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

... कोड आधार में वृद्धि के साथ, एक परियोजना को विकसित करने का समय और कीड़े की संख्या में रैखिक रूप से बजाय चतुर्भुज रूप से वृद्धि होती है। - कम कोड लिखें

एक वेब फ्रेमवर्क का सबसे महत्वपूर्ण घटक इसका प्रलेखन है। रिएक्ट अपने अद्भुत प्रलेखन के लिए प्रसिद्ध है, कई इसे केवल डॉक पर सीखते हैं। Svelte का प्रलेखन भी वास्तव में अच्छा है, जहाँ तक मैं देख सकता हूँ। Svelte के एक नवागंतुक के रूप में, मुझे इस रूपरेखा के प्रलेखन में उदाहरण सबसे अधिक पसंद हैं:



कई मामलों में, मुझे मोटे तौर पर पता है कि मुझे क्या चाहिए। उदाहरण के लिए, एक घटक की स्थिति को बदलें, इवेंट हैंडलर जोड़ें, कुछ वैश्विक स्थिति प्राप्त करें (जैसा कि Redux में)। आगे मुझे जल्दी से यह देखने की जरूरत है कि यह कैसे किया जाता है। उदाहरण अनुभाग इस तरह का एक उदाहरण है। मुझे किसी भी ब्लॉग पर Google लेख नहीं देखना है या जीथब पर लिस्टिंग देखना नहीं है। बस उस अनुभाग को ब्राउज़ करें जिसे आप चाहते हैं। ब्यूटी!

Gatsby और Next.js. के समान भी कुछ है चीज को सैपर कहा जाता है, आप इस पर बहुत जल्दी कोड करना शुरू करते हैं। आपको स्थिर-उत्पन्न HTML पृष्ठों के साथ एकल-पृष्ठ एप्लिकेशन बनाने की अनुमति देता है, जो कि Gatsby / Next.js जैसा दिखता है।

Svelte के पास Redux का एक विकल्प भी है, जिसे स्टोर कहा जाता है। वे अविश्वसनीय रूप से न्यूनतर हैं। भंडारण इस तरह बनाया गया है:

 import { writable } from 'svelte/store'; export const count = writable(0); 

फिर रिपॉजिटरी को इस तरह अपडेट किया जा सकता है।

 count.set(0); 

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

प्रतिक्रिया टीम Svelte से कैसे संबंधित है?

रिएक्ट टीम Svelte के बारे में उतनी उत्साही नहीं है जितनी मैं हूं। उनका मानना ​​है कि रनटाइम पर्यावरण को छोड़ने से जुड़े प्रदर्शन में सुधार नगण्य है। केवल बहुत विशिष्ट मामलों में, उदाहरण के लिए, अंतर्निहित विजेट्स के साथ काम करते समय, आदि। ऐसा खेल मोमबत्ती के लायक है। इसके अलावा, हमारे पास गैट्सबी और नेक्स्ट है, इसलिए, रिएक्ट समुदाय के अनुसार, गति में थोड़ी वृद्धि का मतलब और भी कम है (क्षमा करें, मुझे याद नहीं है कि मैं इसे कहां पढ़ता हूं। यदि आप मुझे ढूंढते हैं , तो मुझे ट्विटर पर बताएं, मैं @karlakakoblind )। इस मामले में, मैं तर्क देता हूं कि कोई भी गति सुधार मायने रखता है, और प्रत्येक पैकेज पर 100kb बचत को केवल इस कारण से ब्रश करना कि "यह केवल विजेट के साथ उपयोगी है" एक बुरा तर्क है। वेब को महान और सस्ती बनाने के लिए, हमें सभी प्रकार के प्रदर्शन अनुकूलन करने चाहिए जो हम कर सकते हैं। यदि आप कभी इसके प्रदर्शन को बेहतर बनाने के लिए किसी एप्लिकेशन को फाइन-ट्यूनिंग में शामिल करते हैं, तो आप जानते हैं कि सबसे छोटे सुधार का कितना मतलब है। यह सभी छोटे सुधारों का योग है जो सुपर-फास्ट डाउनलोड में जोड़ते हैं, जो जादू की तरह होता है।

तो, मैं Svelte कोशिश करनी चाहिए?

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

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

अधिक जानकारी

svelte.dev - आधिकारिक साइट
वीडियो: रिच हैरिस - पुनर्विचार प्रतिक्रिया

वेब घटक

शायद वेब घटक अगली महान तकनीक हैं? मुझे लगता है कि वह निश्चित रूप से क्षमता रखती है। तो वेब घटक क्या हैं?

वेब घटक नए कस्टम HTML टैग बनाने के लिए w3c मानकों का एक सेट हैं। इन मानकों का उपयोग करके, आप विगेट्स से लेकर बड़े एप्लिकेशन तक कुछ भी बना सकते हैं।



और अधिकांश प्रमुख ब्राउज़रों में, यह नया मानक समर्थित है:



इंटरनेट एक्सप्लोरर में, ऐसी विशेषताएं पॉलीफ़िल द्वारा समर्थित हैं।

एक वेब घटक बनाकर, आप एक नया मूल DOM तत्व बना रहे हैं। स्थिति रिएक्ट की तरह नहीं है, जहां एक "आभासी डोम तत्व" बनाया जाता है, जिसे बाद में डोम में लागू किया जाता है।

 <my-component hello="world"></my-component> 

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

 <body> <my-app name="Hello world"></my-app> <script src="/my-app.js" type="module"></script> </body> 

यह पूरी तरह से नए अवसरों और ग्राहक पक्ष के लिए बड़े प्रस्तावों की वास्तुकला के लिए नए दृष्टिकोण को खोलता है। इसका एक उदाहरण माइक्रोफ्रेन्ट्स है ।

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

वेब घटकों का उपयोग करते समय, उनके पैकेज बहुत कॉम्पैक्ट होते हैं क्योंकि कोई रनटाइम वातावरण नहीं होता है। निम्नलिखित बेंचमार्क पर एक नज़र डालें:



क्या आपने इस सूची में उल्लिखित Svelte को देखा? Svelte घटक स्तर पर संकलित कर सकता है, और जो पैकेज उत्पन्न करता है वह बहुत छोटा है।
हालाँकि, यह देखना और भी दिलचस्प है कि "क्लासिकल" फ्रेमवर्क के पैकेजों की तुलना में वेब घटक फ्रेमवर्क के सभी पैकेज कितने छोटे हैं, उदाहरण के लिए, प्रतिक्रिया और कोणीय।

प्रतिक्रिया में वेब घटकों के बारे में क्या?

हालाँकि React वेब घटकों को भी संकलित कर सकता है, लेकिन कस्टम-elements-everywhere.com के अनुसार, यह उनका समर्थन नहीं करता है।



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

क्या मुझे वेब घटकों का उपयोग करना चाहिए?

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

वेब घटकों में Svelte के समान ही नुकसान हैं। यदि आप एक फिर से शुरू कर रहे हैं, नौकरी पाने का इरादा रखते हैं, तो वेब घटकों को प्राथमिकता नहीं कहा जा सकता है। कम से कम, रिएक्ट पर कोई प्राथमिकता नहीं। मेरा अनुभव बताता है कि कंपनियां इतनी मांग (अभी तक?) नहीं कर रही हैं।

अंतिम विचार

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