👑 ↩️ 👓 गायब होने की रूपरेखा 🍀 👨🏽‍🎓 🏽

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

धन्यवाद और अच्छा पठन!

वेब प्लेटफ़ॉर्म और संकलित चौखटे की नई विशेषताएं वेब विकास के अगले युग को कैसे परिभाषित करती हैं, इसकी एक कहानी।

फोटो: स्टीफन बुचर

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

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

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

क्या हम उन फायदों का उपयोग कर सकते हैं जो फ्रेमवर्क हमें देते हैं, लेकिन एक ही समय में कोड को ब्लोट करने से बचते हैं? डेवलपर और उसी समय, एक उत्कृष्ट उपयोगकर्ता अनुभव के लिए सुविधा है? मुझे उस पर विश्वास है। और मुझे विश्वास है कि हम वेब विकास के एक नए युग में प्रवेश कर रहे हैं, जो इस बात से निर्धारित होगा ... एक ऐसा युग जिसमें हमारे ढांचे गायब होने लगेंगे।

दुर्बल

इस प्रवृत्ति का एक उदाहरण Svelte है , "जादुई रूप से गायब UI फ्रेमवर्क" (अनुच्छेद "जादुई रूप से गायब UI फ्रेमवर्क" हैबे - लगभग।)।

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

Svelte का उपयोग करके विकसित किए गए एप्लिकेशन का एक उदाहरण Microsoft के नोलन लॉसन द्वारा बनाए गए विकेन्द्रीकृत सामाजिक नेटवर्क के लिए एक मास्टोडन PWA क्लाइंट है, पिनाफ्र है। पिनाफ्रोस वेब पेज टेस्ट में बहुत तेजी से परिणाम दिखाता है और लाइटहाउस में 98 अंकों का स्कोर करता है।

Svelte , अपने आप में, बहुत न्यूनतर है, लेकिन इसमें Sapper ( S velte App Mak er - लगभग) भी है - इसके आधार पर एक पूर्ण विशेषताओं वाला ढांचा। Next.js से प्रेरित, सैपर में सर्वर-साइड रेंडरिंग, कोड सेपरेशन, स्कोप्ड स्टाइल, डिक्लेक्टिव राउटिंग और हॉट-रीलोड शामिल हैं। इसके अलावा, सैपर स्टार्टर टेम्प्लेट डिफ़ॉल्ट रूप से पीडब्ल्यूए प्रदान करता है, एक वेब एप्लिकेशन मैनिफ़ेस्ट और एक सेवा कार्यकर्ता स्वचालित संसाधन कैशिंग के साथ।

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

स्टैंसिल

स्वेल ने इओनिक: स्टेंसिल से एक वैकल्पिक परियोजना को प्रेरित किया ।

फिर से, लक्ष्य "सबसे लोकप्रिय फ्रेमवर्क की सर्वोत्तम अवधारणाओं" को अपनाना है, लेकिन साथ ही साथ बेहतर प्रदर्शन प्राप्त करना है:

"पारंपरिक फ्रेमवर्क और बंडलिंग तकनीकों के साथ, टीम प्रगतिशील वेब एप्स के लिए विलंबता और कोड आकार की मांगों को पूरा करने के लिए संघर्ष कर रही थी जो प्लेटफार्मों और उपकरणों की विविधता के साथ तेज और धीमी नेटवर्क पर समान रूप से अच्छी तरह से चलती थी।" - stenciljs.com

यह समझने के लिए कि स्टैंसिल में क्या है, मुझे रोब बियरमैन से एक उपयोगी परिचय मिला। मैक्सिमिलियन का एक वीडियो भी है। स्टैंसिल का परिणाम एक मानक वेब घटक है (नीचे वेब घटकों पर अधिक), स्टैंसिल के लिए विशिष्ट नहीं है। इसका मतलब है कि आप इसे किसी अन्य ढांचे के संयोजन में उपयोग कर सकते हैं यदि आप चाहते हैं (लेकिन यह लेख इस बारे में है कि फ्रेम कैसे गायब होते हैं, गुणा नहीं!)।

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

स्टैंसिल भी Google के बेहतर-ज्ञात पॉलिमर की तरह दिखता है, लेकिन यह पूरी तरह से बाहर निकलने पर गायब हो जाता है। हालाँकि, मैंने पॉलिमर का अधिक विस्तार से टिप्पणी करने के लिए उपयोग नहीं किया। शायद वह भी करीब ध्यान का हकदार है। HTML इंपोर्ट के बजाय, नवीनतम और 3rd संस्करण का उपयोग ES मॉड्यूल (नीचे इस पर अधिक), और Bower के बजाय npm के साथ शुरू हुआ। एक PWA स्टार्टर किट भी है जो एलेक्स रसेल को उत्पादक वेब अनुप्रयोगों के निर्माण के लिए सबसे अच्छे उपकरण के रूप में सुझाता है । यह आपको बॉक्स से बाहर एक PRPL पैटर्न (पुश, रेंडर, प्री-कैश, लेजी-लोड) देता है।

अगली पीढ़ी कोणीय

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

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

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

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

एक ढांचे के रूप में वेब प्लेटफॉर्म

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

उदाहरण के लिए, सीएसएस कस्टम गुण (जिसे CSS वेरिएबल्स के रूप में जाना जाता है) का मतलब हो सकता है कि आपको अब Sass जैसे CSS precompiler की आवश्यकता नहीं है। और CSS ग्रिड अब आपको बूटस्ट्रैप लोड करने से बचा सकता है।

“आपको सीएसएस ग्रिड का उपयोग करने के लिए एक रूपरेखा की आवश्यकता नहीं है। CSS ग्रिड एक ढांचा है। ”
- राहेल एंड्रयू

वेब घटक

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

अदा और रूथ जॉन ने हाल ही में वेब घटकों का उपयोग करके संगीत की कल्पना के लिए एक वेब एप्लिकेशन विकसित किया और अपने पाठ साझा किए ।

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

मेरी व्यक्तिगत प्राथमिकता एक महान SSR अनुभव का निर्माण करना है और फिर इसे सिंगल पेज ऐप में बढ़ाना है।
- एडा रोज तोप

आइसोमोर्फिक ईएस मॉड्यूल

अब आप ES मॉड्यूल का भी उपयोग कर सकते हैं! फिर से, ब्राउज़र का समर्थन बहुत अच्छा है, और आप "नाममात्र" की गिरावट का उपयोग करके पुराने ब्राउज़र का समर्थन कर सकते हैं।

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

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

इसी महीने अदा ने अपनी पहली ट्विच टॉक में अपना प्रदर्शन किया। स्पष्टीकरण के साथ एक ब्लॉग प्रविष्टि भी है।

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

इस लेख के लिए उनकी मदद और प्रेरणा के लिए नोलन लॉसन, रिच हैरिस और एडा रोज़ तोप का धन्यवाद। यह लेख मेरे व्यक्तिगत ब्लॉग पर भी यहाँ पोस्ट किया गया है।

***

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

यदि आप उनसे पहली बार मिले थे, तो आपको इस विषय पर अन्य लेख पढ़ने में रुचि हो सकती है:

कौन सक्रिय रूप से इसके विकास की निगरानी करना चाहता है - रूसी भाषा के टेलीग्राम चैनल SvelteJS में आपका स्वागत है। हमें आपको देखकर खुशी होगी!

गर्मियों और हमारी टीम की जीत पर सभी को बधाई! एक अच्छा सप्ताहांत है! हुर्रे!

गायब होने की रूपरेखा