गायब होने की रूपरेखा

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



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

स्पीकर के बारे में: पावेल मालेशेव ( पॉलमेल ) - 10 से अधिक वर्षों के अनुभव के साथ पूर्ण। वह मस्टलैब में काम करता है, जो वेब, स्मार्ट टीवी और मोबाइल उपकरणों को आउटसोर्स करता है, साथ ही साथ IoT। रूस में स्वेल्ट जेएस ढांचे के एक प्रचारक, इस विषय पर एक टेलीग्राम समूह का नेतृत्व करते हैं।

रिपोर्ट में क्या नहीं होना चाहिए

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

जब आप नाम पढ़ते हैं, तो आप शायद सोचते हैं कि एक और रूपरेखा थी, और पहले से ही एक पूरा चिड़ियाघर था।



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

शुरू करने के लिए, आइए जानें कि कौन है।

कौन है कौन

मैंने बड़े तीन और स्वेल्टे को लिया। यह दिलचस्प है कि प्रत्येक उपकरण खुद को अलग तरह से चित्रित करता है। कोणीय सभी अवसरों के लिए एक ढांचे के रूप में खुद को "सभी एक बॉक्स में" रखता है। एक पुस्तकालय की प्रतिक्रिया करें : "मैं एक पुस्तकालय जितना छोटा हूं", लेकिन पूरे बुनियादी ढांचे के साथ-साथ यह एक पूर्ण विकसित रूपरेखा भी है। Vue माना जाता है कि एक प्रगतिशील ढांचा है। आप कलेक्टर के बिना सामान्य script टैग के साथ लगभग शुरू करते हुए, कोड को स्थानांतरित करने के लिए jQuery के साथ इसे स्विच कर सकते हैं। Svelte एक जादुई रूप से गायब होने वाला ढांचा है। WAT?

आइए जानें कि मैं किस बारे में बात कर रहा हूं।

फ्रेमवर्क क्यों गायब होने लगे?

हम अपने उपयोगकर्ताओं को बहुत अधिक कोड भेज रहे हैं।

हमारे ग्राहक अधिक मोबाइल बन रहे हैं, लेकिन इंटरनेट तकनीक हर जगह अच्छी नहीं है - यहां तक ​​कि 3 जी भी हर जगह नहीं है, एलटीई का उल्लेख नहीं है। हमें कोड का आकार कम करना होगा।

इस विषय पर 2017 से एक दिलचस्प अध्ययन है, जो बताता है कि यदि आपके आवेदन में बहुत अधिक जेएस है, तो आप उपयोगकर्ता को खुश करने के लिए केवल 130 केबीएच डाल सकते हैं। यदि JS छोटा है, तो 170Kb तक। यह अंतर इस तथ्य के कारण है कि अध्ययन ने ध्यान दिया कि जेएस अन्य प्रकार के संसाधनों से अलग है, इसे पार्स, व्याख्या और इतने पर करने की आवश्यकता है।



अध्ययन में, 130 Kb न केवल JS, बल्कि सामान्य रूप से CSS सहित, सब कुछ है, HTML, बिल्कुल, बिना चित्रों के। उसी समय, एक कोणीय का वजन 143 Kb है, और हमने कोड की एक पंक्ति भी नहीं लिखी है। आइए देखें कि वर्तमान समाधान हमें क्या प्रदान करते हैं।

उत्पादकता

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

हम अपने कोड और ब्राउज़र के बीच अनावश्यक अमूर्तता के कारण अतिरिक्त लागतों को लागू करते हैं।

गायब होने वाले ढांचे की विशेषता यह है कि वे संकलन के समय ब्राउज़र रनटाइम से अनावश्यक सार और गणना को हटाते हैं , विश्लेषण और गणना करते हैं। यही कारण है कि वे गायब हो जाते हैं हम नीचे इस बारे में अधिक विस्तार से बात करेंगे।

अनुकूलता

क्लासिक ढांचे के लिए लिखे गए समाधान कहीं भी लागू नहीं किए जा सकते हैं।

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

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

कोड विभाजन और पेड़ मिलाते हुए

पुरानी तकनीकों से नई तकनीकों को लागू करना मुश्किल हो जाता है।

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

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

फ़ीचर की लागत

किसी भी ढांचे में एक नई सुविधा के लिए एक मूल्य है।

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

रनटाइम के साथ बी.जे.

Rantime एक बल्कि अल्पकालिक विषय है। यह स्पष्ट नहीं है कि यह क्या है, और विभिन्न लोग इसे अलग तरह से समझते हैं। इस संदर्भ में, मैं दो पहलुओं के दृष्टिकोण से रनटाइम के बारे में बात करूंगा: वह वातावरण जिसमें कोड निष्पादित होता है और कोड स्वयं ।

पर्यावरण के रूप में रनटाइम

आइए एक उदाहरण देखें। यदि कोड वेनिला में लिखा गया है, तो एकमात्र रनटाइम की आवश्यकता है जो डोम है। यदि कोड रिएक्ट में लिखा गया है, तो आपको एक अलग रनटाइम की आवश्यकता है: DOM, React, और React DOM।

कोई भी, रिएक्ट में आपके कोड का सबसे छोटा घटक इस बात पर निर्भर करेगा कि आपका ढांचा किस क्रम में, यानी रनटाइम पर काम करता है।

कोड निष्पादन के रूप में रनटाइम

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

 <h1>Hello {world}</h1> 

HTML के इस टुकड़े में एक गतिशील चर है। वर्चुअल DOM के दृष्टिकोण से, कोड इस तरह से काम करता है।

• इस चर को संशोधित किया जा रहा है।
  
• स्मृति में वर्चुअल डोम ट्री बनाया जा रहा है।
  
• पिछले संस्करण की तुलना में।
  
• DOM जोड़तोड़ सीधे किए जाते हैं, जो अंत में काफी प्रभावी हैं, क्योंकि हमें किसी प्रकार का अंतर मिला है और हमें पता है कि वास्तव में DOM में क्या परिवर्तन करना है।
  

वर्चुअल DOM एक पूर्ण ओवरहेड है, क्योंकि यह हमेशा इस तरह तेज़ होगा: जैसे ही परिवर्तन हुए हैं, उन्होंने तुरंत DOM में परिवर्तन कर दिया।

प्रश्न: कैसे समझें कि क्या बदल गया है और क्या बदलने की आवश्यकता है? वर्चुअल DOM इन परिवर्तनों की गति को नहीं, बल्कि जो बदल चुका है, उसके मुद्दे को हल करता है। इस तथ्य के कारण गति प्राप्त की जाती है कि हम जितना संभव हो उतना जानते हैं कि क्या बदल गया है, और प्रभावी ढंग से डोम में हेरफेर कर सकता है।

इसे संकलित करें

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

आप एक जटिल दीवार से टकराने के बिना वेनिला जावास्क्रिप्ट में गंभीर एप्लिकेशन नहीं लिख सकते। लेकिन एक कंपाइलर आपके लिए यह कर सकता है।
रिच हैरिस, स्वेल्ट के निर्माता

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

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

यह कैसे काम करता है

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

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

आइए चरणों को अधिक विस्तार से विचार करें। पहला चरण घटक है । उसी घटक पर विचार करें।

 <h1>Hello {world}</h1> 

दूसरे चरण में - एएसटी - कोड एक सार वाक्यविन्यास पेड़ में निर्मित होता है।

 {"type": "Element", "name": "h1", "children": [{ "type": "Text", "data": "Hello",....}]} 

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

 function update(changed, ctx) { if (changed.name) { text_1.data = ctx.name; } } 

लेख के अंत में, सर्वेक्षण में इंगित करें कि क्या आपको Svelte फ्रेमवर्क के AOT संकलन का विचार पसंद है? पिछली बार, बहुमत ने सकारात्मक बात की थी।



अब देखते हैं कि स्वेल क्या है।

दुर्बल

अंग्रेजी शब्द svelte या svelt का अर्थ है "पतला, लचीला।" Svelte JS है!

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

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

यह आगे का समय-संकलक है - एक एओटी संकलक जो यह सब करता है।

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

Svelte वेनिला JS लिखने के लिए बिना वेनिला JS लिखने का एक उपकरण है।

आइए इस रूपरेखा को अंदर से देखें।

एकल फ़ाइल घटक

Svelte एक एकल-फ़ाइल घटक है । यदि आपने Vue के साथ काम किया है, तो यह आपको इस ढांचे की बहुत याद दिलाएगा, लेकिन यह कोई दुर्घटना नहीं है। जो वाक्यविन्यास मुख्य रूप से वीयू उपयोग करता है वह रिऐक्टिव फ्रेमवर्क से लिया गया है, जिसे हैरिस ने 2012 में भी वापस बनाया था। यह ढांचा, दुर्भाग्य से, लोकप्रिय नहीं हुआ, यह मुझे प्रतीत होता है, क्योंकि यह 1.0 में बहुत देर से जारी किया गया था। वे संस्करणों के साथ इतने गड़बड़ हो गए थे कि 6 साल तक रिऐक्टिव मामूली संस्करणों में थे।

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

 <h1 >Hello {world}!</h1 > <script> export default { /* component behaviour */ }; </script> <style>    /* scoped styles */ </style> 

ऊपर एक निश्चित HTML टेम्पलेट है - बिना किसी अपवाद के सादे HTML। इसके शीर्ष पर एकमात्र चीज़ एक निश्चित टेम्पलेट भाषा है, जिसे HTMLx कहा जाता है। मैं आपको उसके बारे में बाद में बताऊंगा।

इसके बाद स्क्रिप्ट आती है जिसमें हम अपने कंपोनेंट के व्यवहार को लिखते हैं। इसे कैसे लिखना है यह गाइड में वर्णित है। वहां आप आयात कर सकते हैं, विभिन्न कार्यों और विधियों को बना सकते हैं - जैसा कि सभी Vue में है।

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

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

HTMLx सिंटेक्स

किसी भी HTML की तरह, डेटा कोष्ठक में लिखा जाता है।

 <button>Say hello {name}</button> 

इस तरह से सशर्त बयान लिखे जाते हैं।

 {#if name} <button>Say hello {name}</button> {/if} 

गणना और छोरों:

 {#each users as { name, email}} {#if name} <button>Say hello {name}</button> {/if} {/each} 

दोहरी डेटा बाइंडिंग के लिए, आप घटनाओं को पकड़ने के लिए निर्देशों का उपयोग कर सकते हैं।

 {#each users as { name, email}} {#if name} <button on:click="say(name)">Say hello {name}<button> {/if} {/each} 

HTMLx में बहुत कम निर्देश हैं - सिर्फ 4-5 प्रकार के, और कोई कस्टम निर्देश नहीं हैं, जैसे कि कोणीय में।

आप किसी भी गतिशील डेटा को किसी भी विशेषता में बदल सकते हैं, इससे कोई समस्या नहीं है।

 <div id= "{dynamic}"class="used"> {#each users as { name, email}} {#if name} <button on:click="say(name) " >Say hello {name}<button> {/if} {/each} </div> 

पृथक शैलियों और अप्रयुक्त को हटाना

यदि आप अलग-थलग शैलियों का उपयोग करते हैं, तो अलग-थलग होने के अलावा, अप्रयुक्त शैली भी स्वचालित रूप से कट जाती हैं।

 <div id= "{dynamic}"class="used"> {#each users as { name, email}} {#if name} <button on:click="say(name) " >Say hello {name}<button> {/if} {/each} </div> </style> .used {...} .unused {...} </style> 

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

घटक रचना

यहां सब कुछ हमेशा की तरह है: हम फ़ाइल को आयात करते हैं, इसे घटकों में पंजीकृत करते हैं, इसे टैग के रूप में उपयोग करते हैं।

 <Nested foo= "static" bar={dynamic} bind:baz=baz /> <script> import Nested from 'Nested.html';' export default {   components: {Nested} }; </script> 

आप विशेषताओं के माध्यम से किसी भी डेटा को स्थानांतरित कर सकते हैं, डबल बाइंडिंग का उपयोग कर सकते हैं। या उपयोग नहीं करने के लिए - डबल बाइंडिंग वैकल्पिक है, इसे कंपाइलर स्तर पर भी अक्षम किया जा सकता है, और यह कहीं और नहीं होगा। यह उन लोगों के लिए है जिन्हें बाइंडिंग पसंद नहीं है। बाइंडिंग का उपयोग करके बाइंडिंग प्राप्त की जाती bind: निर्देश।

Svelte की अतिरिक्त विशेषताएं

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

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

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

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

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

सैपर - Svelte ऐप निर्माता । यह Vue के लिए Next.js और Nuxt.js का एनालॉग है। सिद्धांत रूप में, सब कुछ समान है: समरूपता, कोड-विभाजन के लिए समर्थन, प्रीफ़ेटिंग और बॉक्स से बाहर ऑफ़लाइन और अन्य विशेषताएं। मेरी राय में, हाल ही में रूटिंग के कुछ विचार भी सैपर से नेक्स्ट.जे.

लेकिन एक भी Svelte ऐसा नहीं करता है। हम निष्पक्ष प्रतिस्पर्धा के लिए हैं!

और कौन?

स्टेंसिल Ionic डेवलपर्स से एक रूपरेखा है। वे एक संकलित ढांचे पर भी काम करते हैं, लेकिन वेब घटकों और कस्टम तत्वों पर एक बड़े ध्यान के साथ। स्वेल्ट इससे अलग है कि इसके घटकों को आमतौर पर नियमित जेएस कक्षाओं में संकलित किया जाता है और वेब घटकों में कोई पूर्वाग्रह नहीं होता है।

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

ईबे से मार्को । मैंने इसका विस्तार से अध्ययन नहीं किया है, लेकिन वे यह भी संकलित करते हैं, यह सुनिश्चित नहीं करते हैं कि स्वेल्ट जितना गहरा है। सच, मुझे विस्तार से समझ नहीं आया और गलत हो सकता है।

कोणीय। यहां एक एओटी कंपाइलर है, और इसे अच्छी तरह से बढ़ावा दिया जाएगा, लेकिन यह पहले से तैयार किए गए सॉर्ट किए गए फॉर्म में स्ट्रिंग टेम्प्लेट का पुनर्मूल्यांकन है। जहां तक ​​मैं समझता हूं, वहां अभी तक कोई पूर्ण एओटी संकलन नहीं है।

नमस्कार फिल्में

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

कुल मिलाकर, HELLO MOVIES केवल HTML के साथ कोड की 172 पंक्तियाँ हैं, जिनमें से JS लाइनों के 36 पंक्तियों के साथ-साथ सभी प्रकार के उद्धरण भी हैं। यह सभी कोड हैं जो मैंने व्यक्तिगत रूप से लिखे थे। स्वाभाविक रूप से, यह सब बहुत बड़ी मात्रा में संकलित करता है, लेकिन मेरे लिए, एक डेवलपर के रूप में, इससे कोई फर्क नहीं पड़ता।

कुछ और संकेतक। Svelte पर "टोडोलिस्ट MVC" 3.6 Kb लेती है - यह इस बात पर निर्भर करता है कि कौन लिखता है, लेकिन यहां तक ​​कि वेनिला पर भी इसे 11 Kb लगते हैं, और क्रमशः Vue और React पर - 80 और 300 Kb। प्रोजेक्ट "RealWorld", मध्यम का एक क्लोन, जिसमें पंजीकरण, खाते, पसंद, शेयर, मित्र - 40 Kb, रिएक्ट और कोणीय पर - 211 और 575 Kb हैं। Svelte पर "HackerNews" का क्लोन, रिएक्ट और Vue पर 30 Kb है - कई बार अधिक।

मानक

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



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

Svelte संतुलित होने का प्रयास करता है - यह किसी भी मानक में सभी तरह से अच्छा है । कुछ मापदंडों के अनुसार, स्वेलेट ने भी वेनिला को पछाड़ दिया है, कुछ लोगों ने इसे पहले स्थान पर ले लिया है, और कहीं न कहीं यह वेउ और एंगुलर से भी आगे है। हालाँकि, सभी परीक्षणों में, कोणीय और Vue बहुत अधिक मेमोरी का उपभोग करते हैं, लेकिन Svelte नहीं करता है। , , . — .

Svelte — . , .

- — !

Svelte New York Times. . , Svelte, , legacy- CMS, . , , .



, - « » — , Drag&Drop. Svelte, .

Soft-Gear , , Svelte. , - .

airca.st Svelte. Dabble Svelte. - i-want-to-ride-an-electric-citi Svelte.

. , RuTube. Smart TV Tizen, Samsung. Tizen Smart TV Svelte. , .

standalone vanilla JavaScript . , , overhead .

. Svelte DOM. .

. , Vue, Svelte . , REPL , , .

. , — , . , .

Code-splitting & tree-shaking . code-splitting tree-shaking. . , .

Micro-frontends ready . -. , , PHP, Svelte-. , . , . code-splitting tree-shaking.

Svelte , . 2016 . .

. , . . , , , , , Vue.

. React Facebook, Angular — Google, Vue , Rich Harris , .

Frontend Conf ++ , , . 33 . ++ 27 28 .