कोई भी वेब डेवलपर जो कम से कम कुछ वर्षों से ऐसा कर रहा है, वह शायद एक दिन बाद एक समान प्रश्न सुनेंगे:
मैं वास्तव में एक वेब डेवलपर बनना चाहता हूं, लेकिन मुझे नहीं पता कि कहां से शुरू किया जाए। कोई सुझाव?
लगभग 10 साल पहले, जवाब बहुत सरल था। बस index.html बनाएं, वहां कुछ टैग जोड़ें, शीर्षक को CSS से लाल करें और क्लिकों को संभालने के लिए jQuery को सक्षम करें!
ओह, कैसे सब कुछ बदल गया है। अब हम बिल्ड टूल, क्लाइंट-साइड रूटिंग, फैंसी रनटाइम के साथ विशेष फ्रेमवर्क, "यह" हर जगह, टेम्पलेट शाब्दिक, सीएसएस-इन-जेएस के साथ काम कर रहे हैं ... कैसे चुनना सबसे महत्वपूर्ण है?
यह सब अनगिनत बदलावों की ओर ले गया है, जहां "केवल अभी दर्ज करें, और मैं बाद में समझाऊंगा" की अलग-अलग डिग्री के साथ शुरू करना है। कुछ नए लोगों को आधुनिक प्रथाओं के साथ शुरुआत करने के लिए तुरंत रिएक्ट या Vue सीखने के लिए प्रोत्साहित करते हैं। जबकि अन्य लोग पहाड़ों के सबसे ऊपर से चिल्लाते हैं कि शुरुआती को हमेशा मूल बातें से शुरू करना चाहिए। सच में, दोनों दृष्टिकोणों की अपनी खूबियां हैं। पहले नए लोगों को हॉट-रीलोडिंग और घटकों जैसी चीजों को लुभा सकता है, एक तरफ बहुत अधिक छोड़ने का जोखिम। जबकि दूसरा नवागंतुकों को समझता है कि डोम कैसे हुड के तहत काम करता है, एक ही समय में, शायद वेनिला जेएस की जटिलता से लोगों को विचलित करता है, जिससे हम लंबे समय से अवहेलना कर रहे हैं।
इसलिए हमें बीच मैदान की जरूरत है। मूल के साथ आरंभ करने का एक तरीका है, जबकि एक ही समय में आधुनिक अवधारणाओं को अवशोषित करना जैसे कि घटक-आधारित विकास, पृथक बनाम कैस्केडिंग सीएसएस, टेम्प्लेट, घोषणात्मक कार्य आदि। आदि
Svelte, आपकी सेवा में
SvelteJS फ्रेमवर्क के js ढांचे में एक काफी नया कारतूस है, जो अभी ध्यान आकर्षित करने के लिए शुरुआत कर रहा है।
स्टेट ऑफ़ जावास्क्रिप्ट 2018 पोस्ट करने के बाद कोई इसे जान सकता है। संक्षेप में, स्वेल्ट एक ऐसा ढाँचा है, जो वास्तव में एक ढाँचा नहीं है। यह असेंबली स्टेज पर कंपोनेंट कंपाइल करने के लिए एक टूल पर आधारित है, जो आपको केवल आपके एप्लिकेशन को प्रदर्शित करने के लिए पेज पर लोड करने की अनुमति देता है। इसका मतलब है कि कोई वर्चुअल DOM नहीं है, चौखटे के ऊपर
कोई फ्रेमवर्क नहीं है , और
रनटाइम में कोई फ्रेमवर्क नहीं है ।
ये सभी अधिक अनुभवी डेवलपर्स के लिए बहुत गंभीर तर्क हैं, लेकिन अधिकांश शुरुआती शायद सिर को तोड़ने के बिना अंतिम पैराग्राफ नहीं पढ़ सकते हैं। सौभाग्य से, यह संकलन का जादू नहीं है जो स्वेल्टे को इतना अनुकूल बनाता है, लेकिन इसका सिंटैक्स।
यदि आपने Svelte घटक कभी नहीं देखा है, तो इसका एक सरल उदाहरण है:
<p class="pretty">Here's some markup <strong>written by {name}!</strong></p> <style> .pretty { color: red; } </style> <script> let name = "Ben"; </script>
चलिए इसका पता लगाते हैं। तो, सबसे पहले, यह ध्यान देने योग्य है कि यह सब एक नियमित
.html फ़ाइल में भी लिखा जा सकता है, यहाँ तक कि
.svelte फ़ाइल में, यदि आपकी आत्मा की इच्छा है। हम कुछ परिचित टैग को भी एक ढांचे के बिना विकास की याद दिलाते हैं:
शैली और
स्क्रिप्ट । स्टाइल्स और जेएस कोड इन टैग्स में घटकों को ठीक से बनाने के लिए लिखे गए हैं। इसके अलावा, यह सिंटैक्स हाइलाइटिंग को अतिरिक्त संपादक प्लगिन्स के बिना काम करने की अनुमति देता है, जैसे सीएसएस-इन-जेएस समाधान। इसके अलावा, Svelte कंपाइलर डिफ़ॉल्ट रूप से किसी भी घटक-विशिष्ट शैलियों को अलग करने के लिए पर्याप्त स्मार्ट है। इसलिए, आपके पास घटकों के बीच बहने वाली शैली नहीं होगी।
आप यह भी देखते हैं कि जावास्क्रिप्ट चर
नाम के साथ कुछ जादुई कैसे होता है। यह Svelte 3 के लिए एक शानदार नई अवधारणा है, जहां आपके घटक की स्क्रिप्ट में कोई भी चर मार्कअप से सुलभ है। हमारे पास एक विशेष वाक्यविन्यास नहीं है जिसे राज्य का प्रबंधन करने के लिए सीखने की आवश्यकता है। इसमें न तो Angular
$ गुंजाइश है , न ही इस पर प्रतिक्रिया
करें । न ही Vue का
डेटा । इसके बजाय, हम केवल राज्य का वर्णन करने के लिए साधारण चर का उपयोग कर सकते हैं, जब भी उनके मूल्यों में परिवर्तन होता है।
इस वाक्यविन्यास "शब्दजाल" से यह स्वतंत्रता का मतलब है कि एक घटक बनाना एक CodePen बनाने की तरह लग रहा है, केवल यह सोचने के बिना कि घोषणात्मक JS फ़ंक्शन को किसी प्रकार के DOM चयनकर्ता से कैसे जोड़ा जाए।
एक और अच्छी बात यह है कि स्वेल्ट घटकों को पारंपरिक घटकों के रूप में आसानी से आयात किया जाता है। आप बस आयात कर सकते हैं।
Html , क्योंकि Svelte जानता है कि इसे कैसे तैनात किया जाए:
<div> <Wizardry /> </div> <script> import Wizardry from './wizardry.html'; </script>
कूल, लेकिन एक मिनट रुको ...
कुछ पाठकों को यह अवधारणा मुझे लुभावनी लग सकती है। उसी समय, दूसरों को शायद शुरुआती सिखाने के लिए इस दृष्टिकोण का उपयोग करने के खिलाफ अपने स्वयं के तर्क हैं। क्या वे उत्सुक नहीं हैं कि डोम हेरफेर वास्तव में कैसे काम करता है?
जवाब है ... संभव है। लेकिन जब कोई व्यक्ति केवल कम से कम (व्यक्तिगत अनुभव से) शुरू कर रहा है, तो आप शांत चीजों के तेजी से निर्माण के लिए थोड़ा अमूर्त स्वीकार कर सकते हैं।
इसके अलावा, बस कुछ भाषाओं, जैसे कि जावा और जेएस, कचरा संग्रह के माध्यम से अमूर्त सूचक प्रबंधन, अधिकांश आधुनिक वेब विकास उपकरण ने डोम हेरफेर को अनदेखा किया। अधिक कठिन चरम मामलों को छोड़कर जो शुरुआती को शायद ज़रूरत नहीं होगी। वैसे, अगर आप पॉइंटर मैनेजमेंट पर जोर दे रहे हैं, तो मुझे लगता है कि यह केवल मेरी बात साबित करता है। इस प्रकार, डोम को हेरफेर करने या राज्य के प्रबंधन के ढांचे-विशिष्ट तरीकों को सीखने के लिए मजबूर करने के लिए नए-नए तरीकों के बजाय, क्यों न केवल उन्हें मार्कअप से सीधे चर तक पहुंचने दिया जाए? अब वे शोक में पड़े बिना घटकों के राज्य प्रबंधन के बुनियादी सिद्धांतों को सीख सकते हैं।
ठीक है, मुझे एक मूल उदाहरण दिखाई देता है, लेकिन काम करने के लिए Svelte में कुछ विशिष्ट विशेषताएं होनी चाहिए।
कोई शक नहीं कि यह सच है, लेकिन यह आपके विचार से बहुत कम है। Svelte के सिंटैक्स का एक हिस्सा पुनरावृत्त और सशर्त रूप से DOM तत्वों को मैप करने के लिए है। यह जेएसएक्स से
नक्शे के समान काम करता है, लेकिन इन सभी नेस्टेड ब्रैकेट्स के बिना जिसमें नवागंतुक (और I) आसानी से खो सकते हैं। यहाँ एक मूल तरीका है जो एक सरणी से तत्वों की एक सूची बनाता है:
<ul> {#each profiles as profile} <li>{profile.name}: {profile.role}</li> {/each} </ul> <script> const profiles = [ {name: 'Wes Bos', role: 'React extraordinaire'}, {name: 'Chris Coyier', role: 'Father of CodePen'}, {name: 'Cassidy Williams', role: 'Letting you know it's pi time'} ]; </script>
फिर से, मैं सिंटैक्स के संबंध में किसी भी आलोचना को समझता हूं, लेकिन मुझे पसंद है कि इसे समझना कितना आसान है। हमारे HTML कोड में जावास्क्रिप्ट को एम्बेड करने के बजाय, हम बस कहते हैं: हे, चलो इस सरणी के माध्यम से लूप करें और उनमें से प्रत्येक के लिए एक तत्व बनाएं।
यह Svelte की एक और विशेषता का उल्लेख करने योग्य है, जिसमें से मैं इतना उत्साही नहीं हूं: घटकों के लिए सहारा को प्रेषित करने के लिए वाक्यविन्यास। हां, यह सीखने के लिए पूरी तरह कार्यात्मक और आसान है, लेकिन एक ही समय में, यह कुछ लोगों के स्वाद के लिए बहुत जादुई लग सकता है। प्रॉप्स को प्रोसेस करने के लिए, हम बस उन्हें कंपोनेंट में भेजते हैं, जहाँ भी इसे आयात किया जाता है ...
<Profile coolGuy="Scott Tolinski" />
... और हमें एक निर्यात "चलो" के रूप में यह चर मिलता है:
<p>{coolGuy}</p> <script> export let coolGuy = ''; </script>
मैं पूरी तरह से समझता हूं कि कुछ के लिए यह "निर्यात" का दुरुपयोग होगा। लेकिन कम से कम यह इस बात से मेल खाता है कि शुरुआती लोगों को मॉड्यूल की अवधारणा कैसे करनी चाहिए: हम निर्यात करते हैं जो हमें घटक के बाहर एक्सेस करने की आवश्यकता होती है, और जो हम अपने घटक में उपयोग करना चाहते हैं उसे आयात करते हैं।
मैं इस विषमता को दूर कर सकता था ... लेकिन आवश्यक निर्माण कदम के बारे में क्या?
तो, चौखटे के साथ काम शुरू करने के बारे में एक और आलोचना एक पैकेज मैनेजर का उपयोग करने की आवश्यकता है। जिसका मतलब है ... नरक, टर्मिनल का उपयोग करें!
सुनो, मैं समझता हूं कि इस चीज़ को खोलना बेहद खतरनाक हो सकता है, निर्देशिकाओं को नेविगेट करने के लिए इसके मोनो-फ़ॉन्ट और खौफनाक "सीडी" के साथ। लेकिन ईमानदारी से, यह वास्तव में एक बड़ी बाधा नहीं है जब आपको चलाने के लिए केवल एक टीम की आवश्यकता हो। इसके अलावा, वीएस कोड में एकीकृत टर्मिनल शुरू करना आसान बनाता है। यह आपके प्रोजेक्ट डायरेक्टरी में विंडो के ठीक नीचे भी खुलता है!
Svelte वास्तव में एक
डाउनलोड करने योग्य स्टार्टर प्रदान करता है, लेकिन मैंने
अपना स्वयं का स्टार्टर टेम्पलेट बनाया जो सीधे डाउनलोड के लिए रोलअप का उपयोग करता है। वास्तव में, कॉन्फ़िगरेशन फ़ाइल 30 लाइनों से कम लंबी है! एक मूल Svelte परियोजना के लिए, ये सभी निर्देशिकाएं और फाइलें हैं जिनकी आपको आवश्यकता है:
/public
index.html
/src
index.html
app.js
rollup.config.js
package.json
सिर्फ package.json में निर्माण कदम शुरू करने के लिए कमांड जोड़ें और आपका काम हो गया! आप निश्चित रूप से, यह कह सकते हैं कि सभी अतिरिक्त मॉड्यूल और फाइलें जिन्हें अन्य रूपरेखाओं की आवश्यकता होती है, वे एक समस्या नहीं हैं यदि एक शुरुआती उन्हें स्पर्श नहीं करता है, लेकिन, मेरी राय में, कम अतिरिक्त चीजें, शुरुआती लोगों के लिए बेहतर है।
ठीक है, ठीक है, यह शुरुआती लोगों के लिए शांत और सुविधाजनक है। लेकिन यह ढांचा कितना स्थिर है?
यह स्वेल्ट जैसे युवा ढांचे के लिए एक बहुत ही सामयिक मुद्दा है। मैंने दिखाए गए सभी उदाहरणों में Svelte संस्करण 3 के सिंटैक्स का उपयोग किया है, जो इस लेखन के समय अभी भी बीटा में है। जैसा कि यह था, रोमांचक है कि मैं प्रोग्रामिंग सेमिनार में उसके साथ दौड़ने से पहले कुछ और महीने इंतजार करूंगा। फिर भी, Svelte
संस्करण 3 के लिए वास्तव में संक्षिप्त
प्रलेखन पृष्ठ प्रदान करता है, जो शुरुआती लोगों के लिए इसे आसान बना सकता है।
तो, आइए Svelte के साथ वेब विकास के बारे में जानने के लिए कुछ प्रमुख लाभों पर एक नज़र डालें:
- यह 0 अतिरिक्त प्लगइन्स के साथ एक घटक ढांचा है।
- वह बिना किसी साधारण कचरा के राज्य का प्रबंधन करता है
- CSS-in-JS का उपयोग किए बिना शैली अलगाव का उपयोग करता है (इसलिए कोई संपादक प्लगइन्स या बेवकूफ वाक्यविन्यास की आवश्यकता नहीं)
- आरंभ करने के लिए, आपको केवल एक बहुत ही सरल बिल्ड स्क्रिप्ट की आवश्यकता है।
- आधार परियोजना में व्यावहारिक रूप से कोई अतिरिक्त फाइलें नहीं हैं
बेशक, यह पूरी तरह से सामान्य है अगर मैं आपको इस लेख में नहीं मना सका। सभी अच्छे लेखों ने थोड़ा विवाद पैदा किया! लेकिन मुझे उम्मीद है कि इस लेख ने कम से कम आपको दिखाया कि कितना शांत और सरल सेलेव सीखने के लिए हो सकता है।
इसे पढ़ने के लिए धन्यवाद!
मैं एक सामने वाले वेब डेवलपर की सीखने-सीखने की प्रक्रिया में हूं, हमेशा कुछ नया करने के लिए गड़बड़ कर रहा हूं। मैं यहां नियमित रूप से प्रकाशित करने का प्रयास करूंगा, इसलिए यदि आपको यह पसंद है तो लिखें!
***
अनुवादक से:
इस अनुवाद को पढ़ने के लिए धन्यवाद! मुझे उम्मीद है कि यह लेख आपको प्रशिक्षण या एक नई परियोजना के लिए एक उपकरण के रूप में स्वेल्टे की ओर देखने के लिए प्रोत्साहित करता है।
होलीजस पाइटर 24-25 मई को
स्वेल्ट 3 पर मेरी 2 घंटे की कार्यशाला में
आएं । कौन सिर्फ
स्वेल्टे के विकास का पालन करना चाहता है - रूसी भाषा के टेलीग्राम चैनल
SvelteJS में आपका स्वागत है। हमें आपको देखकर खुशी होगी!
और एक छोटा सा सर्वेक्षण, फ्रेमवर्क और प्रौद्योगिकी के संदर्भ के बिना। आपकी राय सिर्फ दिलचस्प है।