दर्द और आँसू Svelte 3 में

इसके बजाय अग्रदूत

लेख उन लोगों के लिए उपयोगी होगा, जैसे हमने लाइव प्रोजेक्ट में स्वेल्ट को आजमाने का फैसला किया। हमारी छोटी कंपनी को मोंगोडब स्टिच पर एक बैकएंड के साथ एक सेवा के लिए एक वेब व्यवस्थापक विकसित करने का आदेश मिला। पिछले कुछ वर्षों में, दृश्यपटल हम रिएक्ट या वीयू में लिखते हैं (परियोजना के आकार के आधार पर और क्या रिएक्टनेटिव की आवश्यकता है), लेकिन स्वेल्टे की सुंदरता के बारे में सुनने के बाद, हमने इसे अपने लिए समझने की कोशिश करने का फैसला किया कि क्या यह अच्छा है। और शायद हमें Vue या React के बजाय इसका उपयोग करना चाहिए?

Svelte कौन है?

अगर संक्षेप में - यह नया js फ्रेमवर्क है (लेकिन वह खुद को उस तरह से नहीं मानता है), जो कि रिएक्ट और वीयू, और ब्ला, ब्ला, ब्लाह का हत्यारा है ... अपने लेख में मैं स्लीवलेस पर विचार करना चाहता हूं कि यह केवल "हुड के नीचे" शांत नहीं है, लेकिन बिंदु से एक वास्तविक परियोजना में इसके उपयोग की सुविधा को देखते हुए।
हम कार नहीं बनाते हैं, हम उन्हें ड्राइव करते हैं और हमारे पास बुरे ग्राहक हैं जिनकी कोई कम बुरी शर्तें नहीं हैं।

ट्यूटोरियल

पहली चीज जो आप एक नई भाषा या रूपरेखा के बारे में सीखना शुरू करते हैं, वह साइट पर एक ट्यूटोरियल है। Svelte पर, यह Svelte.dev/Tutorial है ।

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

यूआई किट और शैलियाँ

Svelte के लिए UI किट ढूंढना हम सभी के लिए एक अलग दर्द था। मैं बहाना चाहता था: "कम से कम सामग्री, बूटस्ट्रैप ... कम से कम कुछ ..."।

केवल sveltematerialui.com और svelteui.js.org पाए गए, जो इस समय बहुत कच्चे दिख रहे थे।

इसमें से <Button/> एक साधारण आयात के साथ, असेंबली के दौरान एक त्रुटि पैकेज से बाहर हो गई, error किट त्रुटि को हल करने का समय नहीं था।

प्रलेखन के माध्यम से जल्दी से चलने के बाद, मैंने सीडीएन से वेनिला आयात के पक्ष में इसे छोड़ने का फैसला किया।

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

एक UI किट के बिना जेएस का उपयोग करना मानसिक रूप से मुझे 10 साल पहले वापस लाया गया) क्लास लोकोमोटिव और दयालु उदासीनता)।

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



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

यह Svelte के मूल घटक में जोड़कर इलाज किया जाना था:

  afterUpdate(() => { componentHandler.upgradeDom(); }); 

stylization

शैलियों के साथ, सब कुछ बहुत स्पष्ट है, हम सभी शैलियों को Vue में सामान करते हैं। आप शैली लिखते हैं और सबकुछ ठीक है, और फिर यूआई घटक लिखें (क्योंकि आपके पास UIKit नहीं है) जो कि प्रॉपर पैरामीटर लेना चाहिए, उदाहरण के लिए चौड़ाई और ऊंचाई, और तार्किक रूप से इसे इस तरह से करें:

 <script> export let width = '20px'; export let height = '20px'; </script> <style> .loader { width: { width }, height: { height }, } </style> 

और ... नहीं, शैली में आप चर नहीं डाल सकते। आप "ReactWay" के माध्यम से इस स्थिति से बाहर निकल सकते हैं और "स्क्रिप्ट" में डायनामिक स्टाइल बना सकते हैं और स्टाइल रिटर्न के साथ कार्य कर सकते हैं।

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

रूटिंग और राउटर

एक सामान्य राउटर के बिना, आप एक पेज ऐप भी नहीं बना सकते।

रिएक्ट, वीयू जब 'हैलो वर्ल्ड' प्रोजेक्ट को स्केल करते हैं तो पहले से ही बॉक्स में एक राउटर आता है (या आप इसे चुन सकते हैं)। लेकिन Svelte में सब कुछ पसंद है, यह आसान नहीं है।

आपको स्वयं एक राउटर चुनने की आवश्यकता है, और यहां तक ​​कि बहुत ही समान समाधानों के बीच भी। सच में, अब तक केवल दो github.com/EmilTholin/svelte-rout और github.com/kazzkiq/svero राउटर हैं।

दोनों बहुत समान हैं, लेकिन मैंने पहले वाले को चुना, मैंने इसे सितारों की संख्या से चुना (हां, मुझे पता है, मैं एक भयानक व्यक्ति हूं)।

तो चलिए इसे अपने एमडीएल में एम्बेड करना शुरू करते हैं।

सब कुछ लपेटें <रूटर url = "{url}"> और नेविगेशन से लिंक के लिए <लिंक /> जोड़ें।



पूर्वावलोकन पर जाएं और देखें कि क्या हुआ।

लेकिन यह पता चला कि Svelte की बचपन की बीमारियाँ जारी हैं और कक्षाओं को <Link /> में स्थानांतरित नहीं किया जा सकता है। एक वाजिब सवाल खड़ा हुआ और आप इसे कैसे करेंगे?

जाहिर है यह अभी भी राउटर के लिए मुद्दों में है।

सौभाग्य से, हम उपयोग को निर्दिष्ट करके अपने सामान्य href = '' को राउटर पर बाँध सकते हैं : जिसके लिए विशेष धन्यवाद।

त्रुटियों

प्रतिक्रिया के विपरीत, जो बस आपको एक बंडल नहीं बनाने देगा और एक त्रुटि के बारे में दृढ़ता से चिल्लाएगा, स्वेल्ट पूरी तरह से एक त्रुटि के साथ सब कुछ एकत्र करेगा। उसी समय, यदि आप कुछ भूल गए, एनपीएम इंस्टॉल या निर्यात स्थापित करें, सब कुछ ठीक हो जाएगा और बस एक सफेद स्क्रीन दिखाएगा (संयोग से, यह रिएक्ट के पहले संस्करणों में मामला था)।

रिएक्ट और वीयू में, हम इस तरह की त्रुटियों को बिल्ड या लिंट स्टेज पर देखते थे।

नतीजतन, आपको दो स्थानों पर त्रुटियों को पकड़ना होगा। निष्पक्षता में - यह प्रतिक्रिया और Vue में है, लेकिन बहुत कम बार और इस तरह की स्पष्ट त्रुटियां लिंट स्टेज पर पकड़ी जाती हैं।

Svelte को नामकरण सम्मेलन की आवश्यकता है

आप इस समस्या का सामना अक्सर करेंगे - नामकरण सम्मेलन की अनुपस्थिति के साथ।

उदाहरण के लिए, राउटर पर वापस।

ऐसा एक आयात है:

     import { Router, link, Link ,Route } from "svelte-routing"; 

इस लिंक और लिंक का क्या? यहां तक ​​कि मेरी जैसी छोटी परियोजना में, स्वेल्टे में प्रयुक्त परियोजनाओं में नामकरण सम्मेलनों की कमी के साथ पहले से ही भ्रम था।

बेशक, यह रिएक्टमैन की आंखों में इस तरह देखा जाना चाहिए:

 import { Router, useLink, LinkComponent ,RouteComponent } from "svelte-routing"; 

Svelte में प्रतिक्रिया के रूप में रेफरी की समानता है, यह एक डोम तत्व या घटक का संदर्भ है।
आधिकारिक ट्यूटोरियल हमें इस तरह से करने के लिए कहता है:

 <script> let dialog; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

और अगर आपके पास घटक में 15 चर हैं?

 <script> let loading; let pins; let dialog; let stitch; </script> <dialog bind:this={dialog} class="mdl-dialog» /> 

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

 <script> let dialogElement; </script> <dialog bind:this={dialogElement} class="mdl-dialog» /> 

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

  async function ReloadPins() {        loading =  true;        pins = await getAllPins();        status = 0;    } 

जब मैंने इसका कोड खोला, तो यह तुरंत मेरे लिए "स्पष्ट" हो गया कि एक चर है जो कि हमारे यूआई से जुड़ा हुआ है।

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

क्या बदल गया है और यह कहाँ और किसने किया?

स्वेल्ट घटक के अंदर के चर वैश्विक हैं और वे हर जगह बदलते हैं (हैलो एंगुलर)।
लेकिन अच्छी खबर है, वे एक घटक (जबकि कोणीय) के भीतर वैश्विक हैं, इसलिए सभी का यह परिवर्तन और सभी एक घटक के अंदर इतना डरावना नहीं है।

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



नतीजतन, आप जल्दी से घटक लिखते हैं, लेकिन यह समझना बहुत मुश्किल है कि एक जूनियर ने इस "सलाद" में कुछ दिनों बाद क्या लिखा है जब वह खुद को पहले से ही भूल गया है (कभी-कभी उसका नाम भी)। इस वजह से, यह समझना असंभव होगा कि परियोजना या टीम के भीतर कोड के एक स्पष्ट संगठन के बिना अंदर क्या है।

बाँध सिलाई

सिलाई एक बहुत अच्छी बात है, और मैं निश्चित रूप से आपको इसके बारे में और अधिक बताऊंगा, और इसकी तुलना साथियों से करूंगा, मेरे अगले लेख में उत्पादन के परीक्षणों को मापूंगा, लेकिन अब Svelte के बारे में और अधिक।

सिलाई का उपयोग करने के लिए आपको "वेनिला" पथ के साथ जाना होगा और सम्मिलित करना होगा:

 <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.4.0/stitch.js"></script> 

चूंकि npm और एक सामान्य आयात पैकेज का उपयोग करते समय, बफर त्रुटि के साथ समस्या शुरू होती है।

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

Svelte के साथ काम करते समय हमने जिन मुख्य समस्याओं का सामना किया, वे ये हैं। और ईमानदार होने के लिए - सामान्य तौर पर, हम इसे पसंद नहीं करते थे, और कोई भी ...

परिणाम क्या है:

आपको Svelte की आवश्यकता क्यों है?

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

उत्तरार्द्ध के आधार पर, मैं वास्तव में यह नहीं समझ पा रहा हूं कि स्वेल्टे मेंटेनर टाइपस्क्रिप्ट सपोर्ट करने वाले क्यों हैं? हम Svelte को केवल "पैरों पर शूटिंग" के लिए प्यार करते हैं और मेरी राय में टाइपस्क्रिप्ट, Svelle स्पोर्ट्स कार के लिए ऑल-टेरेन ट्रैक की तरह है। और आप जानते हैं, स्वेल्टे के साथ काम करने के बाद, मुझे एहसास हुआ कि हाल के वर्षों में जेएस कितना बदल गया है, और यह कि अब जेएस नहीं है।

Svelte PropTypes, Flow और TypeScript के बिना एक ही पुराने और दीपक जेएस में काम करने का अवसर देता है।

मुझे क्या अच्छा लगा?

• अच्छी तरह से पठनीय यदि / और, जो Vue में नहीं है। मैं वास्तव में Vue में कुछ समान देखना चाहूंगा।
• आप अपने ईवेंट को घटकों में बना सकते हैं और बच्चे में होने वाले कार्यों के लिए कॉलबैक से छुटकारा पा सकते हैं।
  

Svelte का उपयोग क्यों नहीं किया जाता है?

• पूरी तरह से काम करने वाला यूआई किट नहीं है। UIKit के बिना एक वेब ऐप की कल्पना करना मुश्किल है, केवल बड़ी परियोजनाएं, जिनके लिए Svelte उपयुक्त नहीं है, खुद UI किट लिख सकते हैं। कुछ वेनिला को पेंच करना अपने स्वयं के यूआई घटकों (उनके यूआई किट) या त्रुटियों और "लोकोमोटिव" कक्षाओं के खिलाफ लड़ाई में बन जाता है।
  
• कुछ सरल त्रुटियों की निहित प्रकृति, और केवल परीक्षण चरण में उनका कब्जा।
  
• यदि आप एक मल्टी-प्लेटफ़ॉर्म एप्लिकेशन बनाने जा रहे हैं (और अब हर जगह मोबाइल पहले है), तो आपको रिएक्टनेटिव को सबकुछ फिर से लिखना होगा या उत्पन्न नेटिवस्क्रिप्ट को अपने हाथों से समाप्त करना होगा (स्वेल्टे से एक एनएस जनरेटर है)। निष्पक्षता में, मोबाइल विकास के साथ Vue भी बहुत अच्छा नहीं कर रहा है, लेकिन इसमें कुछ काम करने की विशेषताएं भी हैं।
  
• आपको प्रोजेक्ट में अपने डेवलपर्स के लिए बहुत स्पष्ट कोड कन्वेंशन लिखने का ध्यान रखना होगा, क्योंकि टीम डेवलपमेंट के लिए ट्यूटोरियल और उदाहरण नहीं बनाए गए हैं।