❎ 🍯 🙇🏼 आपको अपनी वेब परियोजनाओं के लिए Svelte का उपयोग क्यों करना चाहिए 👩🏽‍⚕️ 🕞 🤞🏼

यदि आप एक वेब डेवलपर हैं, तो आपने शायद Svelte Js के बारे में सुना होगा। फिर भी, मुझे लगता है कि आप सोच रहे होंगे कि यह लोकप्रियता क्यों हासिल कर रहा है और वेब डेवलपर्स के लिए इसके क्या दिलचस्प फायदे हैं।

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

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

Svelte क्या है और इसके क्या फायदे हैं?

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

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

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

यहाँ लेखकों से Svelte का संक्षिप्त विवरण दिया गया है:

स्रोत: Svelte.dev

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

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

Svelte आर्किटेक्चर अवलोकन

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

कैसे काम करता है Svelte

मैं Svelte के सिद्धांत को सबसे सरल शब्दों में समझाने की कोशिश करूँगा:

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

Svelte JS बनाम। प्रतिक्रिया बनाम Vue: तुलना

कई इंजीनियर अन्य फ्रेमवर्क के साथ Svetle.Js की तुलना करते हैं। सबसे प्रसिद्ध विकल्प रिएक्ट और वीयू हैं।

सबसे लोकप्रिय वेब फ्रेमवर्क जैसे कि कोणीय, प्रतिक्रिया और Vue.js वर्चुअल डोम के निर्माण के लिए कोड के लोड होने के इंतजार के सिद्धांत पर आधारित हैं। इसके बाद ही वे लाइब्रेरी का उपयोग करके पेज रेंडर कर सकते हैं।

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

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

नतीजतन, Svelte 3 एक कम वजन वाला DOM बनाता है। उदाहरण के लिए, संपीड़ित रूप में स्वोलेट पर टोडोमेवीसी कार्यान्वयन 3.6 केबी वजन का होता है। तुलना के लिए, React plus ReactDOM, यहां तक कि एप्लिकेशन कोड के बिना, लगभग 45 KB का संकुचित रूप में वजन होता है। पूरी तरह से टोडोमेवीसी को रिएक्ट पर डाउनलोड करने से ब्राउज़र पर स्वेल की तुलना में 10 गुना अधिक समय लगता है।

सच है, रिएक्ट की तुलना में Svelte के प्रदर्शन का निष्पक्ष रूप से मूल्यांकन करना मुश्किल है, क्योंकि फ्रेमवर्क बहुत अलग हैं।

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

GitHub के अनुसार , Svelte Native Ember, Angular, React, Ractive, Preact, Mithril या Riot की तुलना में काफी तेज है। यह इनफर्नो के साथ प्रतिस्पर्धा करने में सक्षम है, जो इस समय दुनिया का सबसे तेज यूआई फ्रेमवर्क है। अंत में, यह एक निर्णायक लाभ है, क्योंकि एक उच्च अनुप्रयोग गति आपको प्रतियोगिता से आगे बढ़ा सकती है।

Svelte घटक

आइए गहराई से Svelte संरचना के विवरण में खुदाई करें। Svelte पर किसी भी PWA [प्रगतिशील वेब अनुप्रयोग] घटक में तीन खंड हो सकते हैं: स्क्रिप्ट, शैली और टेम्पलेट। यहाँ इसका और अधिक विस्तृत वर्णन है कि इसका क्या मतलब है:

स्क्रिप्ट टैग: घटक के अंदर उपयोग किए जाने वाले कार्यों और चर की घोषणाओं के साथ वैकल्पिक जावास्क्रिप्ट ब्लॉक।

शैली टैग: एक अन्य वैकल्पिक इकाई। इसे एक नियमित HTML स्टाइल टैग के रूप में सोचें, जिसमें एक महत्वपूर्ण अंतर है। इस ब्लॉक के अंदर वर्णित नियम केवल वर्तमान घटक पर लागू होते हैं। किसी तत्व Pको शैली लागू करने से पृष्ठ पर सभी अनुच्छेद प्रभावित नहीं होंगे। यह बहुत अच्छा है, क्योंकि विभिन्न तत्वों के लिए कक्षाओं के साथ आने की आवश्यकता नहीं है। यही है, आप बस गलती से एक और शैली नियम को फिर से परिभाषित नहीं कर पाएंगे।

टेम्पलेट ब्लॉक: यह अंतिम और एकमात्र अनिवार्य ब्लॉक है, आमतौर पर एच 1 टैग। यह आपके घटक का दृश्य और दृश्य दोनों है। यह स्क्रिप्ट और शैली ब्लॉकों से निकटता से संबंधित है, क्योंकि यह अपने व्यवहार और डिजाइन को परिभाषित करता है।

इन सभी घटकों को बनाने का एक बेहतर विचार प्राप्त करने के लिए, मेरा सुझाव है कि आप कोड के ए शॉट से एक संक्षिप्त और समझने योग्य विवरण पढ़ें:

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

यह भी ध्यान देने योग्य है कि स्वेलेट एक जावास्क्रिप्ट चर के साथ अच्छी तरह से बातचीत करता है name। यह Svelte v3 की एक नई अवधारणा है। आपके घटक की स्क्रिप्ट में कोई भी चर अब HTML मार्कअप से एक्सेस किया जा सकता है। न ही कोई फ्रेमवर्क-विशिष्ट सिंटैक्स है जिसे आपको राज्यों को प्रबंधित करने के लिए सीखने की आवश्यकता होगी। आपको निपटने की आवश्यकता नहीं हैdataVue, $scopeAngular या this.stateReact। इसके बजाय, आप letअसाइन किए गए राज्य मान प्राप्त करने के लिए हर जगह उपयोग कर सकते हैं । हर बार मूल्यों को बदलने से स्वचालित रूप से पुन: रेंडर हो जाता है।

व्यवहार में यह कैसा दिखता है:

Svelte घटक बनाना CodePen के साथ काम करने के समान है। आपको आश्चर्य नहीं होगा कि कुछ के माध्यम से आपके द्वारा सीखे गए घोषणात्मक जेएस फ़ंक्शन को कैसे जोड़ा जाए DOM query-selector। Svelte प्रभावित नहीं करेगा window listenersया callback functions। ये बुनियादी बातें वैसी ही रहती हैं जैसी उन्हें होनी चाहिए।

इन घटकों के बारे में एक और अच्छी बात यह है कि वे पारंपरिक लोगों की तरह ही प्राथमिकता देते हैं। आपको बस .html आयात करने की आवश्यकता है और Svelte समझेगा कि इसे कैसे तैनात किया जाए।

आपको Svelte.js के बारे में और क्या जानने की आवश्यकता है

आइए अन्य रूपरेखाओं की तुलना में विकास की प्रक्रिया में Svelte के अन्य महत्वपूर्ण लाभों के बारे में बात करते हैं।

शुरुआती के अनुकूल

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

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

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

अनिच्छुक अनुकूलता

पहले, यदि आपको एकीकृत करने की आवश्यकता है, उदाहरण के लिए, कुछ कैलेंडर विजेट या आपके आवेदन में कोई अन्य, आप केवल उसी फ्रेमवर्क के उसी संस्करण का उपयोग करके ऐसा कर सकते हैं जिस पर विजेट बनाया गया है। यही है, यदि आप एंगुलर में एप्लिकेशन का निर्माण करते हैं, और विजेट रिएक्ट में बनाया गया है, तो आप इसे एकीकृत नहीं कर पाएंगे। हालाँकि, यदि विजेट या आपके एप्लिकेशन को Svelte का उपयोग करके बनाया गया है, तो यह संभव हो जाता है।

कोड जुदाई

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

समर्थन मुक्त स्रोत समुदाय

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

क्या Svelte पर्याप्त स्थिर और विश्वसनीय है

यह फ्रेमवर्क के लिए एक जरूरी मुद्दा है जो हाल ही में बाजार पर आया है। उपरोक्त सभी उदाहरण Svelte संस्करण 3 सिंटैक्स से संबंधित हैं। फिलहाल, यह अभी भी बीटा में है। ReactJS और VueJS जैसे उद्योग के दिग्गजों की तुलना में, यह बहुत विकसित नहीं है।

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

क्या Svelte.js अगला विशालकाय है?

जवाब देना मुश्किल। क्या स्वेले ने वीयू और रिएक्ट को फ्रंट-एंड फ्रेमवर्क के रूप में हराया है जो समय की कसौटी पर खड़ा होगा?

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

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

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

आइए संक्षेप में

फिर से Svelte की प्रमुख विशेषताओं के माध्यम से चलते हैं: the

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

यदि आप एक वेब डेवलपर हैं जिन्हें एक नए ढांचे की आवश्यकता है, तो सुनिश्चित करें कि Svelte एक कोशिश के लायक है। अन्य मामलों में, यदि आप अपने वेब समाधान के लिए सबसे अच्छी तकनीक की तलाश कर रहे हैं, तो Svelte ध्यान देने लायक एक अच्छा विकल्प हो सकता है।

आपको अपनी वेब परियोजनाओं के लिए Svelte का उपयोग क्यों करना चाहिए