पिछले दो वर्षों में Svelte को बहुत प्रशंसा मिली है और यह “सिर्फ एक और फ्रंटएंड फ्रेमवर्क” होने से बहुत दूर है। इसने जेएस सर्वेक्षण 2019 के राज्य पर “वर्ष की सफलता” जीती, इसके बाद 2020 में संतुष्टि रेटिंग में शीर्ष पर रहा। इसे स्टैक ओवरफ्लो 2021 सर्वेक्षण में सबसे अधिक पसंद किया जाने वाला वेब ढांचा भी चुना गया।

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

द स्वेल्टे बैकस्टोरी

लेकिन पहले, Svelte पर एक छोटी सी कहानी। हालाँकि इसने केवल 2020 के दशक की शुरुआत में मुख्यधारा में प्रवेश किया, लेकिन Svelte बहुत लंबे समय से आसपास है।

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

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

Svelte में गहराई से ट्यूटोरियल के लिए, और इसमें React और Vue के अंतर हैं, Svelte 3: A Radical Compiler-based JavaScript Framework देखें।

एक साधारण पुस्तक सूची बनाना

चलो Svelte में गोता लगाएँ! हम एक छोटी पुस्तक सूची तैयार करेंगे जो हमें हमारी पठन सूची से पुस्तकों को जोड़ने और हटाने की अनुमति देती है। अंतिम परिणाम नीचे दी गई छवि जैसा कुछ दिखाई देगा।

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

टेम्प्लेट डाउनलोड करने के बाद, इसके फोल्डर में स्विच करें और रन करें npm install, जो उन सभी पैकेजों को डाउनलोड करता है जिनकी हमें आवश्यकता है। फिर हम स्विच करेंगे App.svelteजहां हम सामग्री को केवल-एचटीएमएल संस्करण से बदल देंगे ताकि हम अपने इच्छित दृश्य तैयार कर सकें:

<h4>Add Bookh4>
<input type="text" />
<h4>My Booksh4>
<ul>
  <li>A bookli>
ul>

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

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

<script>
  let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
</script>

<label>
  <h4>Add Book</h4>
  <input type="text" />
</label>
<h4>My Books</h4>
<ul>
  #each books as book
    <li>book</li>
  /each
</ul>

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

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

उपयोगकर्ता इनपुट पर प्रतिक्रिया

अब हम अपने द्वारा परिभाषित पुस्तक शीर्षकों की एक मनमाना सूची प्रस्तुत कर सकते हैं books चर। एक नई किताब जोड़ने के बारे में क्या? ऐसा करने के लिए, हमें अपने तर्क को बढ़ाने की जरूरत है