पावर ऑफ द फ्रेमवर्क ऑफ द लीजेंड

हाल ही में, "गायब ढांचे" की प्रवृत्ति लोकप्रियता प्राप्त कर रही है, जिनमें से लोकोमोटिव को संदेह के बिना SvelteJS माना जा सकता है - एक बिल्डटाइम फ्रेमवर्क और एक वेनिला जावास्क्रिप्ट कम्पाइलर।

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

इस लेख में मैं कई Svelte महाशक्तियों में से एक के बारे में बात करूंगा जो गंभीरता से आपके जीवन को आसान बना सकते हैं।

चलिए इसका पता लगाते हैं, लेकिन पहले मैं आपको एक किंवदंती बताऊंगा ...

पावर ऑफ़ द लीजेंड ऑफ़ द पावर

कुछ रूपरेखाएं Google और फेसबुक के लोगों द्वारा बनाई गई थीं, अन्य - शांत दोस्तों, लेकिन सभी रिच हैरिस के करीब "ध्यान" के तहत ।

मनुष्यों के लिए नौ चौखटे बनाए गए, सात बौने के लिए प्रतीत होते हैं। तीन अन्य चौखटे (प्रतिक्रिया, व्रत, कोणीय) कल्पित बौने के लिए थे।

रूपरेखा तैयार करने और उन्हें हजारों परियोजनाओं में लागू करने के बाद, रिच हैरिस ने व्यक्तिगत रूप से और गुप्त रूप से एक रूपरेखा बनाई ...

उन सभी पर शासन करने के लिए एक ढांचा,
उन्हें खोजने के लिए एक रूपरेखा,
उन सभी को लाने के लिए एक ढांचा
और साथ में उन्हें बांधते हैं।

- चौखटे के भगवान

समस्या

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

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


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

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

इससे भी अधिक आक्रामक, जब फिर भी सफलता के साथ परियोजना पूरी हो रही है, तो आप समझते हैं कि सामान्य तौर पर, आप बहुत खुश नहीं हैं। और शायद, हम अगले प्रोजेक्ट को उसी ढांचे पर लिखना नहीं चाहेंगे। इसलिए, उन सभी "पुन: उपयोग किए गए" समाधान, जिनके लिए हम प्रयास कर रहे हैं, उन्हें पाइप में फेंक दिया जा सकता है।

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

इसी समस्या का एक और रूपांतर - कल्पना करें कि आप एक बड़ी कंपनी हैं, जैसे कि यैंडेक्स। आपके पास परियोजनाओं का एक huilion है, यहां तक ​​कि उनमें से कुछ केवल कुछ कर्मचारियों के लिए जाने जाते हैं, और प्रत्येक परियोजना ने पहले से ही सब कुछ अनुभव किया है जो मैंने ऊपर वर्णित किया है। समस्या यह है कि ये सभी परियोजनाएं उन विभिन्न रूपरेखाओं को बैठती हैं और उनसे नफरत करती हैं जिन्हें उन्होंने शुरू में चुना था।

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

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

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

अगर आपका प्रोजेक्ट Angular (~ 500Kb) में लिखा गया है, और आपने React (~ 98Kb) में UI-किट लिखने का फैसला किया है, तो प्रत्येक प्रोजेक्ट में एक फ्रेमवर्क, दूसरे फ्रेमवर्क और यहां तक ​​कि आश्रितों के झुंड के साथ खींचें, UI-किट ही प्रत्यक्ष है मान लीजिए कि यह इष्टतम नहीं है।

निर्णय

बिना रनटाइम के हमें बहुत "गायब" ढांचे में आने में मदद करने के लिए। यहां मुख्य शर्त यह है कि वे अपने पारिस्थितिक तंत्र के संदर्भ में यथासंभव पृथक हो सकते हैं और बाहरी एकीकरण तंत्र और संगत एपीआई हैं।

इस तरह के ढांचे का एक बड़ा उदाहरण SvelteJS है, जिसके बारे में काफी कुछ लेख पहले ही हैबे पर लिखे जा चुके हैं।

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




इसलिए, कार्य तैयार किए गए स्वेल्ट-घटक को रिएक्ट एप्लिकेशन में लागू करना है, घटक को बिना बदले और एप्लिकेशन में अतिरिक्त रनटाइम लपेटे बिना। उदाहरण के लिए, मैं GitHub उपयोगकर्ताओं के लिए खोज करने वाले घटक को ले लूंगा, जो मैंने पिछले लेख "रिएक्ट + RxJS 6 + पुनर्प्राप्ति के बिना GitHub पर उपयोगकर्ताओं की खोज कैसे करें" के लिए लिखा था।

इस घटक के लिए कोड REPL में देखा जा सकता है, और इस लेख से रिपॉजिटरी के लिए नमूना कोड।

प्रतिक्रिया ऐप बनाएं

सबसे पहले, de facto standard tool का उपयोग करके एक नया रिएक्ट प्रोजेक्ट बनाएं - create-react-app :

npx create-react-app my-app cd my-app npm start 

ठीक है, यदि आप 3000 वें बंदरगाह पर जाते हैं, तो यह काम करने लगता है।

Svelte को अनुकूलित करें

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

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

 npm run eject 

जहां तक ​​मुझे पता है, यह कोषेर दृष्टिकोण नहीं है, लेकिन उदाहरण के लिए यह सबसे सुविधाजनक विकल्प है।

अब जब वेबपैक विन्यास परियोजना की जड़ में है, तो आप Svelte को स्थापित कर सकते हैं:

 npm i --save-dev svelte svelte-loader 

-सेवे-देव ध्वज पर ध्यान दें, हाँ याद रखें, कोई रनटाइम नहीं है।))))

अंतिम स्पर्श, आपको कॉन्फ़िगरेशन में उपयुक्त लोडर को कनेक्ट करने की आवश्यकता है:

  { test: /\.svelte$/, use: { loader: 'svelte-loader', } }, 

सामान्य तौर पर, यह एक्सटेंशन .html के साथ घटक फ़ाइलों को लिखने के लिए Svelte समुदाय में प्रथागत है, क्योंकि Svelte घटक एक मान्य HTML फ़ाइल है। हालांकि, संभावित टकराव से बचने के लिए, कुछ मामलों में, कस्टम .svelte फ़ाइल प्रारूप का उपयोग करना बेहतर होता है।

तो हमने किया, अब परियोजना में शामिल सभी .svelte फ़ाइलों को इस लोडर द्वारा इंटरसेप्ट किया जाएगा और Svelte द्वारा संकलित किया जाएगा।

एक Svelte घटक लिखना

सबसे पहले, कोड संपादक को कॉन्फ़िगर करना बेहतर है, उदाहरण के लिए, ताकि यह संबंधित एक्सटेंशन के साथ फ़ाइलों पर प्रकाश डाला गया HTML सिंटैक्स लागू हो। वीएस कोड में कुछ इस तरह किया जाता है:

  "files.associations": { "*.svelte": "html" } 

अब एक फ़ोल्डर बनाएँ ।/src/svelte_compenders/ और स्वयं घटक का फ़ोल्डर। उसके बाद, हम बस REPL उदाहरण से सभी फ़ाइलों को इस फ़ोल्डर में स्थानांतरित करते हैं, साथ ही उन्हें एक नया एक्सटेंशन दे रहे हैं। Svelte , और फ़ाइल को कॉल करें App.html Widget.svelte।

परिणाम कुछ इस तरह होना चाहिए:


उसी स्थान पर हम index.js फ़ाइल बनाते हैं जिसमें हमारे पास Svelte और React एकीकरण कोड होगा।

एकीकृत

शायद अब आप जानना चाहते हैं कि जादू क्या है? जादू यह है कि हम पहले से ही सभी जादू कर चुके हैं। जादुई, है ना?

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

एकीकरण कोड इस तरह दिख सकता है:

 import React, { PureComponent } from 'react'; import Widget from './Widget.svelte'; export default class extends PureComponent { componentDidMount() { const { username } = this.props; this.widget = new Widget({ target: this.el, data: { username } }); } componentWillUnmount() { this.widget.destroy(); } render() { return ( <div ref={el => this.el = el}></div> ); } } 

कुल मिलाकर, हम बस अपने जटिल स्वेल्ट घटक के कोड को एक बहुत ही सरल रिएक्ट घटक में लपेटते हैं, जो बस स्वेल घटक का एक नया उदाहरण बनाता है, इसे बनाते समय प्रॉपर से माउंट एलिमेंट और डेटा को स्थानांतरित करता है। इसके अलावा, हम घटकविलीउमाउंट हुक में Svelte घटक की स्थापना रद्द करने के लिए मत भूलना।

केवल एक चीज जो हमने अभी तक नहीं की है वह यह है कि उन्होंने घटक राज्य के मूल्यों को सिंक्रनाइज़ नहीं किया था। यही है, यदि मूल घटक ने अन्य प्रॉपर्स को रैपर घटक में फेंक दिया है, तो उन्हें Svelte घटक पर लागू होना चाहिए। इसके विपरीत, यदि डेटा को Svelte घटक के अंदर बदल दिया गया है, तो उसे वापस ले जाना चाहिए।

ऐसा करने के लिए, हम यह मानते हैं कि उच्च-स्तरीय रिएक्ट घटक ऑनकॉन्च कॉलबैक को संचारित करेगा, जिसे हमें अंदर बदलाव होने पर खींचना चाहिए, और हम कंपोनेंट के घटकों में बदलाव की उम्मीद करेंगे। चलो इसे करते हैं:

  componentDidMount() { ... this.widget.on('state', ({ current: { username }, changed }) => { if (changed.username) { this.props.onChange({ username }); } }); } componentWillReceiveProps({ username }) { this.widget.set({ username }); } 

यहां हमने स्टेट बिल्ट-इन इवेंट का उपयोग किया है, जो हर बार स्वेल के घटक परिवर्तन की स्थिति में आग लगाता है। घटक की वर्तमान स्थिति ( वर्तमान ), पिछली स्थिति ( पिछले ) और परिवर्तित गुणों ( परिवर्तित ) की सूची वाले ऑब्जेक्ट को कॉलबैक में स्थानांतरित किया जाता है। तदनुसार, हम केवल यह जांचते हैं कि क्या उपयोगकर्ता नाम बदल दिया गया है और ऑनकॉन्ग कॉलबैक को कॉल करें, यदि ऐसा है।

ComponentsWillReceiveProps हुक में, हम बिल्ट-इन सेट () विधि का उपयोग करके नया उपयोगकर्ता नाम सेट करते हैं।

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

उपयोग

अब हम रिएक्ट एप्लिकेशन में सीधे अपने विजेट का उपयोग करने का प्रयास करते हैं। ऐसा करने के लिए, स्टार्टर द्वारा उत्पन्न App.js फ़ाइल को संपादित करें:

 import React, { Component } from 'react'; import './App.css'; import GithubWidget from './svelte_components/GithubWidget'; class App extends Component { constructor() { super(); this.state = { username: '' }; } handleChange = (state) => { this.setState({ ...state }); } render() { return ( <div className="App"> <header className="App-header"> <h1>Github Widget for: {this.state.username}</h1> <GithubWidget onChange={this.handleChange} username={this.state.username} /> </header> </div> ); } } export default App; 

संक्षेप में, हम इसे एक नियमित प्रतिक्रिया घटक के रूप में उपयोग करते हैं। और परिणामस्वरूप हम प्राप्त करते हैं:


पहले से ही बुरा नहीं है, ठीक है?) कृपया ध्यान दें कि विजेट के पाठ क्षेत्र में हम जो उपयोगकर्ता नाम दर्ज करते हैं, उसे तुरंत प्रतिक्रिया एप्लिकेशन में भेज दिया जाता है।

हम फाइनल करेंगे

चलिए अब हमारे विजेट को केवल GitHub यूजर कार्ड ही नहीं, रिपॉजिटरी कार्ड भी खोजना और प्रदर्शित करना सिखाते हैं।

सबसे पहले, आपको एक नया घटक Repo.svelte बनाने की आवश्यकता है, जो रिपॉजिटरी कार्ड को आकर्षित करेगा। सादगी के लिए, मैंने बस User.svelte से टेम्पलेट और शैलियों की प्रतिलिपि बनाई और इसे रिपॉजिटरी डेटा में अनुकूलित किया। हालांकि, सैद्धांतिक रूप से यह एक अलग घटक है।

इसके बाद, आपको फ़्लाइट पर इन दो प्रकार के कार्ड्स को स्विच करने के लिए Widget.svelte नियंत्रण घटक को सिखाना होगा। इसके अलावा, आपको उपयोगकर्ता और रिपॉजिटरी के लिए विभिन्न अनुरोधों को खींचने के लिए उसे सिखाना होगा।

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

पहली नज़र में, यह बल्कि उलझन में लग रहा है, लेकिन Svelte पर समाधान कोड की 5-6 पंक्तियों को सचमुच ले जाएगा। सबसे पहले, हम एक नए घटक और एपीआई विधि को जोड़ते हैं, जिसे हम बहस में लपेटते हैं:

 ... import Repo from './Repo.svelte'; ... import { getUserCard, getRepoCard } from './api.js'; ... const getRepo = debounce(getRepoCard, 1000); 

अगला, एक गणना की गई संपत्ति बनाएं जो यह निर्धारित करेगी कि हमें किस प्रकार का कार्ड दिखाना चाहिए:

 computed: { ... repo: ({ username }) => username.includes('/'), ... } 

अब एपीआई में अनुरोधों के स्विच को जोड़ें:

 computed: { ... card: ({ username, repo }) => username && (repo ? getRepo : getUser)(username), ... } 

और अंत में, प्रकार के आधार पर कार्ड घटकों को स्विच करना:

 computed: { ... Card: ({ repo }) => repo ? Repo : User, ... } 

इसके अलावा, घटकों को गतिशील रूप से प्रतिस्थापित करने के लिए, हमें एक विशेष Svelte टैग का उपयोग करने की आवश्यकता है, जो उस घटक को खींचता है जिसका मूल्य इस विशेषता के लिए दिया गया है:

 <svelte:component this={Card} {...card} /> 

यह काम करता है। क्या आपने गौर किया है? हम पहले से ही प्रतिक्रिया आवेदन के अंदर Svelte पर लिख रहे हैं! )))

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

हम एक नई खोज संपत्ति पेश करते हैं, जिसका डिफ़ॉल्ट मान गलत है। इस गुण के आधार पर, इनपुट फ़ील्ड प्रदर्शित की जाएगी या प्रदर्शित नहीं की जाएगी। डिफ़ॉल्ट रूप से, तदनुसार, कोई फ़ील्ड नहीं होगा।

 {#if search} <input bind:value=username placeholder="username or username/repo"> {/if} ... <script> export default { ... data() { return { username: '', search: false }; }, ... }; </script> 

अब App.js में हम एप्लिकेशन के रिएक्ट साइड पर एक इनपुट फील्ड बनाएंगे और इनपुट इवेंट के लिए संबंधित प्रोसेसिंग लिखेंगे:

  ... handleUsername = (e) => { this.setState({ username: e.target.value }); } ... <h1>Github Widget for: {this.state.username}</h1> <input value={this.state.username} onChange={this.handleUsername} className="Username" placeholder="username or username/repo" /> 

और इसे भी विजेट के साथ फ़ोल्डर में कॉपी करें, यहाँ Svelte पर ऐसा svg स्पिनर है:

 <svg height={size} width={size} style="animation-duration:{speed}ms;" class="svelte-spinner" viewbox="0 0 32 32" > <circle role="presentation" cx="16" cy="16" r={radius} stroke={color} fill="none" stroke-width={thickness} stroke-dasharray="{dash},100" stroke-linecap="round" /> </svg> <script> export default { data() { return { size: 25, speed: 750, color: 'rgba(0,0,0,0.4)', thickness: 2, gap: 40, radius: 10 }; }, computed: { dash: ({radius, gap}) => 2 * Math.PI * radius * (100 - gap) / 100 } }; </script> <style> .svelte-spinner { transition-property: transform; animation-name: svelte-spinner_infinite-spin; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes svelte-spinner_infinite-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> 

और हम इसे विजेट में लागू करेंगे ताकि यह बहुत सुंदर हो:

 ... {#await card} <Spinner size="50" speed="750" color="#38b0ee" thickness="2" gap="40" /> {:then card} ... 

मेरी राय में, यह बहुत बुरा नहीं निकला:


काली पृष्ठभूमि और इनपुट फ़ील्ड के साथ शीर्ष टोपी एक रिएक्ट एप्लिकेशन है, नीचे सफेद ब्लॉक एक स्वेल्ट विजेट है। ये पिस रहे हैं। )))

→ रिपोजिटरी

निष्कर्ष

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

Svelte आप के लिए एकदम सही है अगर:

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

अधिक दिलचस्प मामलों का पता लगाना चाहते हैं? हमारे टेलीग्राम चैनल से जुड़ें!

अद्यतन: सही सवाल के लिए धन्यवाद justboris । उदाहरण जारी:

 import React, { PureComponent } from 'react'; import Widget from './Widget.svelte'; export default class extends PureComponent { componentDidMount() { ... this.widget = new Widget({ target: this.el, data: { username }, slots: { default: this.slot } }); ... } ... render() { return ( <div ref={el => this.el = el}> <div ref={el => this.slot = el}> {this.props.children} </div> </div> ); } } 

 <GithubWidget onChange={this.handleChange} username={this.state.username}> <p>Hello world</p> </GithubWidget>