क्या डिजाइनर के पास एक नया विचार है? क्या आसान हो सकता है

नमस्ते, हब्बोर्वचन! डिजाइनर वैचारिक लोग हैं, और ग्राहक, विशेष रूप से उनकी व्यावसायिक आवश्यकताओं के साथ।

कल्पना कीजिए कि आपने अपने सबसे अच्छे UIkit को अपने% JS फ्रेमवर्क में सबसे अच्छे% सम्मिलित किया है। ऐसा लगता है कि परियोजना के लिए आवश्यक सब कुछ है। अब आप कॉफी पी सकते हैं, और पेज पर घटकों को फेंककर सभी नए कार्यों को बंद कर सकते हैं। इससे भी बेहतर, अगर आपको एनपीएम खुले स्थानों पर कूड़े के ढेर में इस तरह के यूआईकिट मिले और यह वर्तमान यूएक्स / यूआई और इसकी जरूरतों से पूरी तरह मेल खाता है। बहुत खूब!

और वास्तव में ... मैं कौन मजाक कर रहा हूं? आपकी खुशी अल्पकालिक होने की संभावना है। दरअसल, जब डिजाइनर अगले पृष्ठ या "विशेष परियोजना" के लिए नए UI समाधानों के टैल्मड के साथ चल रहा है, तो कुछ भी गलत हो जाएगा।

इस बिंदु पर, डेवलपर को "DRY या DRY" सवाल का सामना करना पड़ रहा है? क्या मुझे किसी तरह मौजूदा घटकों को अनुकूलित करना चाहिए? हां, ताकि मौजूदा मामलों पर प्रतिगमन में देरी न हो। या सिद्धांत पर काम करता है "काम करता है - स्पर्श न करें" और खरोंच से नए घटक लिखें। उसी समय, UIkit को फुलाया और समर्थन को जटिल बनाया।

यदि आप, जैसे कई, ऐसी स्थिति में रहे हैं, तो कटौती के तहत देखें!



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

शुरू करने के लिए, आइए कल्पना करें कि हमें कौन से "अनुकूलन" घटक पर लागू करने की आवश्यकता हो सकती है।

शैलियों

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

1. वैश्विक शैलियों

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

2. मूल संदर्भ से कक्षाएं (शैली) पास करना

एक विवादास्पद निर्णय भी। यह पता चला है कि हम एक विशेष प्रोप बना रहे हैं, जैसा कि यह था, उदाहरण के लिए, हम इसे कक्षाएं कहेंगे और ठीक ऊपर हम घटक में आवश्यक कक्षाओं को विसर्जित करेंगे।

<Button classes="btn-red btn-rounded" /> 

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

3. प्रॉपर का उपयोग कर घटक सेट करना

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

 <Button bgColor="red" rounded={true} /> 

यह बहुत संभावना नहीं है, हुह ध्वनि? शायद।

व्यवहार

यहाँ यह अभी भी अधिक अस्पष्ट है। सबसे पहले, क्योंकि एक घटक के व्यवहार को अनुकूलित करने में कठिनाइयां कार्य से आती हैं। जितना अधिक जटिल घटक और उसमें तर्क, और जितना अधिक जटिल परिवर्तन हम करना चाहते हैं, उतना ही कठिन है उस परिवर्तन को करना। किसी तरह की तनातनी सामने आई ... संक्षेप में, आप समझे! ;-)

हालाँकि, यहां भी, उपकरणों का एक सेट है जो या तो घटक को अनुकूलित करने में हमारी मदद करता है या नहीं। चूंकि हम घटक दृष्टिकोण के बारे में विशेष रूप से बात कर रहे हैं, मैं निम्नलिखित उपयोगी उपकरणों को उजागर करूंगा:

1. सहारा के साथ सुविधाजनक काम

सबसे पहले, आपको इस सेट को फिर से वर्णन किए बिना एक घटक प्रॉपर सेट की नकल करने में सक्षम होना चाहिए और आसानी से उन्हें आगे प्रॉक्सी करना चाहिए।

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

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

2. ट्रैकिंग घटक जीवन चक्र और घटनाओं

दूसरे शब्दों में, एक घटक के अंदर होने वाली सब कुछ पूरी तरह से बंद किताब नहीं होनी चाहिए। अन्यथा, यह वास्तव में उसके व्यवहार के अनुकूलन को जटिल करता है।

मेरा तात्पर्य एनकैप्सुलेशन और अनियंत्रित हस्तक्षेप के उल्लंघन से नहीं है। घटक को इसकी सार्वजनिक एपीआई के माध्यम से प्रबंधित किया जाना चाहिए (आमतौर पर यह प्रॉपर और / या तरीके हैं)। लेकिन अंदर क्या हो रहा है और इसके राज्य में परिवर्तन को ट्रैक करने के बारे में किसी तरह "पता लगाने" में सक्षम होना अभी भी आवश्यक है।

3. इंपीरियल मैनेजमेंट

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

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

मामला

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

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

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

यह कुछ इस तरह दिख सकता है:



यह अनुमान लगाना मुश्किल नहीं है कि आधार बटन बाईं ओर स्थित है, और दाईं ओर सबमिट बटन अनुरोध के सफल समापन की स्थिति में है। खैर, अगर मामला स्पष्ट है - चलो शुरू करें!

निर्णय

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

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

Button.html

 <button {type} {name} {value} {disabled} {autofocus} on:click > <slot></slot> </button> <script> export default { data() { return { type: 'button', disabled: false, autofocus: false, value: '', name: '' }; } }; </script> <style> /* scoped styles */ </style> 

और इस तरह से इस्तेमाल किया:

 <Button on:click="cancel()">Cancel</Button> 

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

इस घटक के आधार पर एक और बनाना, बढ़ी हुई कार्यक्षमता के साथ, और यहां तक ​​कि बदलाव किए बिना, एक आसान काम की तरह लग सकता है। लेकिन तब नहीं जब आप Svelte का इस्तेमाल करते हैं।

अब यह निर्धारित करते हैं कि सबमिट बटन क्या करने में सक्षम होना चाहिए:

1. सबसे पहले, फ्रेम और बटन पाठ हरा होना चाहिए। होवर पर, पृष्ठभूमि भी गहरे भूरे रंग के बजाय हरे रंग की होनी चाहिए।
2. इसके अलावा, जब एक बटन दबाया जाता है, तो इसे एक गोल प्रगति संकेतक में "स्लैम" होना चाहिए।
3. प्रक्रिया के पूरा होने पर (जो बाहरी रूप से नियंत्रित होता है), यह आवश्यक है कि बटन की स्थिति को सफल (सफलता) में बदला जा सकता है या सफल (त्रुटि) नहीं। उसी समय, संकेतक से बटन या तो एक हरे रंग के बैज के साथ एक डाव, या लाल बैज को क्रॉस के साथ बदलना चाहिए।
4. यह समय निर्धारित करने में सक्षम होने के लिए भी आवश्यक है जिसके बाद संबंधित बैज फिर से अपनी मूल स्थिति (निष्क्रिय) में एक बटन में बदल जाएगा।
5. और निश्चित रूप से, आपको बेस बटन के शीर्ष पर यह सब करने की ज़रूरत है और सभी शैलियों और वहां से सहारा लेकर।

फूह, आसान काम नहीं है। आइए पहले एक नया घटक बनाएं और इसे आधार बटन के साथ लपेटें:

SubmitButton.html

 <Button> <slot></slot> </Button> <script> import Button from './Button.html'; export default { components: { Button } }; </script> 

जबकि यह बिल्कुल एक ही बटन है, केवल बदतर है - यह भी नहीं जानता कि प्रॉपर प्रॉक्सी कैसे करें। इससे कोई फर्क नहीं पड़ता, हम बाद में इस पर लौट आएंगे।

स्टाइलिंग

इस बीच, आइए इस बारे में सोचें कि हम एक नए बटन को कैसे स्टाइल कर सकते हैं, अर्थात्, कार्य के अनुसार, रंग बदलें। दुर्भाग्य से, ऐसा लगता है कि हम ऊपर वर्णित किसी भी दृष्टिकोण का उपयोग नहीं कर सकते हैं।

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

समाधान अविश्वसनीय रूप से सरल है, लेकिन केवल अगर आप पहले से ही Svelte का उपयोग कर रहे हैं। तो, बस नए बटन के लिए शैलियाँ लिखें:

 <div class="submit"> <Button> <slot></slot> </Button> </div> ... <style> .submit :global(button) { border: 2px solid #1ECD97; color: #1ECD97; } .submit :global(button:hover) { background-color: #1ECD97; color: #fff; } </style> 

Svelte की कुंजी में से एक - सरल चीजों को बस हल किया जाना चाहिए। विशेष संशोधक : इस संस्करण में वैश्विक इस तरह से सीएसएस उत्पन्न करेगा कि केवल इस घटक में मौजूद सबमिट वर्ग के साथ ब्लॉक के अंदर बटन निर्दिष्ट शैलियों को प्राप्त करेंगे।

भले ही आवेदन में किसी अन्य स्थान पर अचानक उसी तरह का मार्कअप दिखाई दे:

 <div class="submit"> <button>Button</button> </div> 

कोई रास्ता नहीं "लीक" वहाँ SubmitButton घटक से शैलियाँ।

इस विधि का उपयोग करते हुए, Svelte ने आसानी से नेस्टेड घटकों की शैलियों को अनुकूलित करना आसान बनाता है, जबकि दोनों घटकों की शैलियों के एनकैप्सुलेशन को संरक्षित किया जाता है।

हम प्रॉपर फेंकते हैं और व्यवहार को ठीक करते हैं

ठीक है, हम स्टाइल को लगभग तुरंत और बिना किसी अतिरिक्त सहारा के और सीधे सीएसएस कक्षाओं को पास करने से निपटते हैं। अब आपको नए घटक के माध्यम से सभी बटन घटक प्रॉक्सी को प्रॉक्सी करने की आवश्यकता है। हालांकि, मैं उन्हें फिर से वर्णन नहीं करना चाहूंगा। हालाँकि, शुरुआत के लिए, आइए तय करें कि नए घटक में कौन से गुण होंगे।

कार्य को देखते हुए, SubmitButton को स्थिति की निगरानी करनी चाहिए, साथ ही एक सफल / त्रुटि स्थिति के स्वत: परिवर्तन के बीच प्रारंभिक देरी को निर्दिष्ट करने का अवसर प्रदान करना चाहिए:

 <script> ... export default { ... data() { return { delay: 1500, status: 'idle' // loading, success, error }; } }; </script> 

तो, हमारे नए बटन में 4 राज्य होंगे: बाकी, डाउनलोड, सफलता या त्रुटि। इसके अलावा, डिफ़ॉल्ट रूप से, अंतिम 2 राज्य 1.5 सेकंड के बाद स्वचालित रूप से निष्क्रिय स्थिति में बदल जाएंगे।

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

 <div class="submit"> <Button {...attrs} type="submit"> <slot></slot> </Button> </div> <script> ... export default { ... computed: { attrs: data => { const { delay, status, ...attrs } = data; return attrs; } }, }; </script> 

बहुत सरल और सुरुचिपूर्ण।

नतीजतन, हमें पूरी तरह से काम करना, संशोधित शैलियों के साथ मूल बटन का संस्करण मिला। नया बटन व्यवहार लागू करने का समय आ गया है

हम स्थिति को बदलते हैं और ट्रैक करते हैं

इसलिए, जब आप SubmitButton बटन पर क्लिक करते हैं, तो हमें केवल ईवेंट को बाहर नहीं फेंकना चाहिए , ताकि उपयोगकर्ता कोड इसे संसाधित कर सके (जैसा कि बटन में किया गया है), लेकिन अतिरिक्त व्यावसायिक तर्क को भी लागू करें - डाउनलोड स्थिति सेट करें। ऐसा करने के लिए, बस अपने हैंडलर में आधार बटन से घटना को पकड़ो, जो आपको चाहिए उसे करें और इसे आगे भेजें:

 <div class="submit"> <Button {...attrs} type="submit" on:click="click(event)"> <slot></slot> </Button> </div> <script> ... export default { ... methods: { click(e) { this.set({ status: 'loading' }); this.fire('click', e); } }, }; </script> 

इसके अलावा, इस बटन का मूल घटक, जो स्वयं डेटा भेजने की प्रक्रिया को नियंत्रित करता है, प्रॉप्स के माध्यम से संबंधित भेजने की स्थिति ( सफलता / त्रुटि ) सेट कर सकता है। उसी समय, बटन को स्थिति में इस तरह के बदलाव को ट्रैक करना चाहिए, और एक निर्दिष्ट समय के बाद स्वचालित रूप से स्थिति को निष्क्रिय करने के लिए बदल देना चाहिए। ऐसा करने के लिए, जीवन-चक्र onupdate हुक का उपयोग करें:

 <script> ... export default { ... onupdate({ current: { status, delay }, changed }) { if (changed.status && ['success', 'error'].includes(status)) { setTimeout(() => this.set({ status: 'idle' }), delay); } }, }; </script> 

छूना खत्म

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

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

 <div class="submit"> <Button {...attrs} type="submit" on:click="click(event)"> <span><slot></slot></span> </Button> </div> ... <style> ... .submit span { transition: opacity 0.3s 0.1s; } .submit.loading span, .submit.success span, .submit.error span { opacity: 0; } ... </style> 

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

 <div class="submit"> <Button {...attrs} type="submit" disabled={isDisabled}> <span><slot></slot></span> </Button> </div> <script> ... export default { ... computed: { ... isDisabled: ({ status, disabled }) => disabled || status !== 'idle' }, }; </script> 

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

  .submit.loading :global(button[disabled]), .submit.success :global(button[disabled]), .submit.error :global(button[disabled]) { opacity: 1; } 

वह सब है! नया बटन सुंदर और जाने के लिए तैयार है!



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

इसलिए, मैं काम में इस कार्यान्वयन का उपयोग करने की सलाह नहीं देता। याद रखें, यह इस लेख के लिए सिर्फ एक डेमो है।

→ इंटरएक्टिव डेमो और पूर्ण उदाहरण कोड

यदि आपको लेख पसंद आया और आप Svelte के बारे में अधिक जानना चाहते हैं, तो अन्य लेख पढ़ें । उदाहरण के लिए, "उपयोगकर्ता प्रतिक्रिया के बिना GitHub पर कैसे खोज करें + RxJS 6 + पुनर्प्राप्ति । " नए साल के पॉडकास्ट RadioJS # 54 को सुनें, जहां मैंने कुछ विस्तार से बात की कि स्वेल्ट क्या है , यह कैसे "गायब हो जाता है" और यह "अभी तक एक और जेएस फ्रेमवर्क" क्यों नहीं है।

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

पी / एस

अचानक, UI दिशानिर्देश बदल गए। अब आवेदन के सभी बटन में लेबल ऊपरी मामले में होना चाहिए। हालांकि, हम घटनाओं के ऐसे मोड़ से डरते नहीं हैं। पाठ-परिवर्तन जोड़ें : अपरकेस; बेस बटन की शैलियों में और कॉफी पीना जारी रखें।

आपका दिन शुभ हो!