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

क्विक जैसा लगता है, सुपर क्विक है। यह अभी सबसे तेज़ फ्रंट-एंड फ्रेमवर्क का दावा करता है। यह आपकी साइट के आकार और जटिलता की परवाह किए बिना बेहद तेज़ पृष्ठ लोड समय प्रदान करता है। इसे O(1) जटिलता माना जाता है क्योंकि यह बड़े पैमाने पर लगातार प्रदर्शन प्राप्त कर सकता है।

Qwik 1.0 स्थिर संस्करण हाल ही में जारी किया गया है। यह एमआईटी लाइसेंस के तहत एक ओपन सोर्स प्रोजेक्ट है। आप इसे उनकी आधिकारिक वेबसाइट और सार्वजनिक GitHub रिपॉजिटरी पर देख सकते हैं ।

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

इससे पहले कि हम क्विक पर जाएं, हमें सबसे पहले यह समझने की जरूरत है कि जावास्क्रिप्ट फ्रेमवर्क में रेंडरिंग कैसे होती है। दो रेंडरिंग विकल्प उपलब्ध हैं: क्लाइंट-साइड रेंडरिंग और सर्वर-साइड रेंडरिंग।

क्लाइंट-साइड रेंडरिंग

जैसा कि इसके नाम से निहित है, ब्राउज़र क्लाइंट-साइड रेंडरिंग में क्लाइंट साइड पर HTML फ़ाइल में सभी डेटा प्रस्तुत करता है।

जब कोई उपयोगकर्ता किसी वेबसाइट पर जाता है, तो ब्राउज़र HTML, CSS और JS फ़ाइलों को पुनः प्राप्त करने के लिए सर्वर को अनुरोध भेजता है। इन फ़ाइलों को प्राप्त करने के बाद, ब्राउज़र उन फ़ाइलों को निष्पादित करता है और वेबसाइट को प्रस्तुत करता है। ताकि उपयोगकर्ता सामग्री को देख सकें और उसके साथ इंटरैक्ट कर सकें।

इसमें क्लाइंट साइड पर सभी लॉजिक, डेटा रिट्रीवल, रूटिंग और टेम्प्लेटिंग का निष्पादन शामिल है। यह पूरी प्रक्रिया होने तक उपयोगकर्ता आमतौर पर एक खाली पृष्ठ देखते हैं।

इस दृष्टिकोण का महत्वपूर्ण नकारात्मक पहलू यह है कि जैसे-जैसे कोई एप्लिकेशन बढ़ता है, आरंभिक पृष्ठ को प्रस्तुत करने का समय बढ़ता है।

सर्वर-साइड रेंडरिंग

सर्वर-साइड रेंडरिंग में, सर्वर रेंडर किए गए HTML को प्रतिक्रिया के रूप में भेजता है।

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

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

हालाँकि, पृष्ठ केवल देखने योग्य है और तब तक इंटरैक्टिव नहीं है जब तक कि जावास्क्रिप्ट फ़ाइलें DOM पर लोड नहीं हो जातीं। जेएस लोड होने के बाद, पेज उपयोगकर्ता के साथ इंटरैक्ट करने योग्य होगा।

जलयोजन प्रक्रिया

जैसा कि हमने ऊपर चर्चा की, वह पृष्ठ जो ब्राउज़र हमें प्रारंभ में दिखाता है वह अभी तक इंटरएक्टिव नहीं है। वेबपेज के साथ इंटरैक्ट करने के लिए जावास्क्रिप्ट को डोम में लोड किया जाना चाहिए। इस प्रक्रिया को हाइड्रेशन कहा जाता है।

इसमें ईवेंट श्रोताओं को जोड़ना, एप्लिकेशन स्थिति को पुनर्स्थापित करना और संपूर्ण घटक ट्री को जमीन से ऊपर तक पुनर्निर्माण करना शामिल है।

इस तकनीक का उपयोग आज लगभग हर मेटा फ्रेमवर्क द्वारा किया जाता है जैसे कि Next.js, Nuxt.js, Angular आदि। (एस्ट्रो को छोड़कर - यह आंशिक हाइड्रेशन का उपयोग कर रहा है)

इस हाइड्रेशन प्रक्रिया का नकारात्मक पक्ष यह है कि हालांकि पृष्ठ को उपयोगकर्ता की स्क्रीन पर प्रस्तुत किया जाता है, यह कोड डाउनलोड होने और फिर से निष्पादित होने तक इंटरैक्टिव नहीं होता है।

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

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

इसलिए इस तकनीक पर आधारित रूपरेखा वेब पेज के साथ इंटरैक्ट करने में देरी का निरीक्षण करेगी।

यही वह समस्या है जिसे क्विक ने हल किया था।

क्विक इतनी तेज क्यों है?

Qwik के सुपर फास्ट होने का मुख्य कारण, इसने इस हाइड्रेशन प्रक्रिया को हटा दिया।

यह तालिका में एक पूरी तरह से नया प्रतिपादन प्रतिमान लाता है जिसे Resumability कहा जाता है जो जलयोजन की आवश्यकता को पूरी तरह से समाप्त कर देता है। (शून्य जलयोजन)

पुन: प्रयोज्यता क्या है?

पुन: प्रयोज्यता सर्वर पर निष्पादन को रोकने और क्लाइंट पर इसे फिर से शुरू करने या सभी एप्लिकेशन लॉजिक को डाउनलोड करने की आवश्यकता के बिना इसे फिर से शुरू करने की क्षमता को संदर्भित करता है।

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

फिर ब्राउजर शुरू कर सकता है जहां सर्वर ने किसी भी जावास्क्रिप्ट को निष्पादित करने की आवश्यकता के बिना छोड़ा था।

इसलिए, क्विक और अन्य रूपरेखाओं के बीच बहुत अधिक समय का अंतर होगा।

आइए इसकी रणनीतियों के साथ विस्तार से चर्चा करें कि यह कैसे संभव हुआ।

क्विक की रणनीतियाँ

क्विक इस लक्ष्य को दो मुख्य रणनीतियों के माध्यम से प्राप्त करता है:

1. जब तक संभव हो जावास्क्रिप्ट के निष्पादन और डाउनलोड को विलंबित करें। (प्रारंभ कोड को छोड़कर)
2. सर्वर पर एप्लिकेशन और फ्रेमवर्क की निष्पादन स्थिति को क्रमबद्ध करें और इसे क्लाइंट पर फिर से शुरू करें। (नोट - Qwik केवल उसी डेटा को क्रमबद्ध करता है जो वर्तमान पृष्ठ के लिए आवश्यक है।)

क्विक में, सब कुछ आलसी-लोड करने योग्य है:

• रेंडर पर घटक (इनिशियलाइज़ेशन ब्लॉक और रेंडर ब्लॉक)
• घड़ी पर घटक (साइड-इफेक्ट्स, इनपुट बदलने पर ही डाउनलोड किया जाता है)
• श्रोता (केवल इंटरेक्शन पर डाउनलोड किए गए)
• शैलियाँ (केवल तभी डाउनलोड की जाती हैं जब सर्वर ने उन्हें पहले से उपलब्ध नहीं कराया हो)

कोड पूर्वाभ्यास

आलसी लोडिंग और क्रमांकन की बेहतर समझ के लिए आइए कुछ कोड उदाहरण देखें।

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

आप प्रतिक्रिया जानते हैं? आप क्विक को जानते हैं।

- आधिकारिक डॉक्स

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

यहां आपको एक खास बात नजर आएगी। हाँ! डॉलर चिह्न।

यह क्या है $?

क्विक में एक ऑप्टिमाइज़र है। यह एक कंपाइलर के समान है। यह डॉलर का प्रतीक ऑप्टिमाइज़र को बताता है कि इसके बाद का कार्य आलसी-लोडेड होना चाहिए।

इसका मतलब है कि जब तक हम बटन पर क्लिक नहीं करेंगे तब तक जेएस लोड नहीं होगा। इस आलसी-लोडेड जेएस बंडल में वह कोड होता है जिसे हम निष्पादित करना चाहते हैं।

इसके अलावा, यह राज्य को अद्यतन करने के लिए लेक्सिकल वातावरण तक पहुंच है जो अन्य घटकों द्वारा साझा किया जा सकता है जो किसी अन्य आलसी-लोडिंग बंडल से उत्पन्न होते हैं।

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

हुड के नीचे क्या होता है?

अब आप पुन: प्रयोज्यता के बारे में जानते हैं। लेकिन यह वास्तव में कैसे काम करता है? आइए इसमें गहराई से खुदाई करें।

यदि आप पिछले उदाहरण के HTML टैब पर जाते हैं, तो आपको बहुत सारे q कोलन दिखाई देंगे। (क्यू:)

क्विक HTML में अतिरिक्त जानकारी डाल रहा है। इसे HTML में सूचनाओं को क्रमबद्ध करने के रूप में जाना जाता है। ताकि वह बाद में निर्णय ले सके।

Qwik निम्नलिखित प्रारूप में ईवेंट श्रोता को DOM में क्रमबद्ध करता है:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

यह क्विक ऑप्टिमाइज़र द्वारा किया जाता है। जैसा कि मैंने पहले बताया, क्विक ऑप्टिमाइज़र एक तरह से एक कंपाइलर है।

यह मेरे द्वारा लिखे गए कोड (उन जेएस फाइलों) को ले रहा है और कोड के आधार पर नई फाइलें बना रहा है। फिर जहां हमारा कोड रह गया था, वह उसे उस नई फाइल के संदर्भ में बदल देता है।

इस ऑप्टिमाइज़र को रस्ट में लिखा गया है और आप इसे यहाँ देख सकते हैं । parse.rsफ़ाइल को कोर src फ़ोल्डर में जांचें । यह इंगित करता है कि पार्सिंग कैसे होती है।

फिर हमारे पास क्विक लोडर है ।

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

क्विक लोडर यही करता है।

यह वैश्विक ईवेंट श्रोताओं को जोड़ रहा है और दस्तावेज़ में कहीं भी उपयोगकर्ता ईवेंट ढूंढता है।

एक बार ऑन-क्लिक ईवेंट ट्रिगर हो जाने पर, यह प्रासंगिक चंक.जेएस फ़ाइल आयात करता है।

उसके बाद, इसमें प्रतीक नाम वाले भाग वाला मॉड्यूल होगा। (#handler_symbol) यह एक अलग फ़ाइल में आलसी लोड है। तो लोडर उस फाइल को लाएगा और उसे निष्पादित करेगा।

राज्य/मूल्य qwik/jsonरेफरी के अनुसार बाध्य होंगे। (उपर्युक्त अनुलग्नक देखें)

इस प्रकार ऑन-क्लिक ईवेंट फ़ंक्शन चलाया गया था। आप इस लोडर व्यवहार को यहाँ GitHub रिपॉजिटरी में पा सकते हैं ।

स्थानीय परिवेश में क्विक स्थापित करें और चलाएं

आइए इस छोटे जानवर को अपनी मशीन पर स्थापित करें।

पूर्वापेक्षाएँ - आपके पास Node.js ≥v16.8 स्थापित होना चाहिए।

आप क्विक एप्लिकेशन को आसानी से स्पिन करने के लिए क्विक सीएलआई का उपयोग कर सकते हैं।

npm create qwik@latest

ठीक है। आइए इस चीज़ का उपयोग करके बनाएँnpm run build

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

ठीक है! npm run devअब आप डिफ़ॉल्ट वेबसाइट पर उपलब्ध का उपयोग करके ऐप शुरू कर सकते हैंhttp://localhost:5173/

आइए देखें कि यह इंस्पेक्ट का उपयोग करके बटन का जश्न मनाने के लिए समय में ऑन-क्लिक ईवेंट के JS बंडल को कैसे लोड कर रहा है।

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

इसके अलावा, Qwik डेवलपर के अनुकूल है क्योंकि हम Alt कर सकते हैं और अपने पसंदीदा IDE से इसका कोड खोलने के लिए कहीं भी क्लिक कर सकते हैं।

बोनस - यदि आप जाते हैं http://localhost:5173/demo/flower?pride=trueऔर आपको एक घूमता हुआ रंगीन फूल दिखाई देगा।

npm run qwik addक्विक आपको कमांड का उपयोग करके अपने टूलिंग और सेवाओं जैसे रिएक्ट, टेलविंड सीएसएस, आदि से कनेक्ट करना आसान बनाने के लिए एकीकरण जोड़ने की अनुमति देता है। समर्थित एकीकरण उनके आधिकारिक दस्तावेज़ों में यहां सूचीबद्ध हैं ।

Qwik आपको उनकी अवधारणाओं से अधिक परिचित होने में मदद करने के लिए एक उत्कृष्ट इंटरैक्टिव ट्यूटोरियल भी प्रदान करता है। आशा है कि आप इसका उपयोग त्वरित रूप से क्विक सीखने के लिए कर सकते हैं।

संसाधन

• आधिकारिक वेब —https://qwik.builder.io
• क्विक गिटहब —https://github.com/BuilderIO/qwik
• दस्तावेज़ —https://qwik.builder.io/docs/overview/
• स्टैकब्लिट्ज़ डेमो -https://stackblitz.com/edit/qwik-todo-demo

क्विक का नया अभिनव दृष्टिकोण (फिर से शुरू करने की क्षमता) फ्रंट-एंड जावास्क्रिप्ट फ्रेमवर्क के लिए एक नया रास्ता प्रदान करता है।

निश्चित रूप से यह दुनिया के लिए एक गेम-चेंजिंग फ्रेमवर्क होगा। यह देखना दिलचस्प होगा कि चीजें यहां से कहां जाती हैं।

मुझे उम्मीद है कि इस लेख से आपको क्विक फ्रेमवर्क के मूल सिद्धांतों को समझने में मदद मिली होगी। आने वाले लेखों में भी क्विक के अपडेट लाने के लिए तत्पर हैं।

पढ़ने के लिए धन्यवाद, क्विक पर टिप्पणी छोड़ें। हैप्पी कोडिंग!

लेवल अप कोडिंग

हमारे समुदाय का हिस्सा बनने के लिए धन्यवाद! इससे पहले कि तुम जाओ:

• कहानी के लिए ताली बजाएं और लेखक को फॉलो करें
• लेवल अप कोडिंग प्रकाशन में अधिक सामग्री देखें
• फ्री कोडिंग इंटरव्यू कोर्स ⇒ कोर्स देखें
• हमें फॉलो करें: ट्विटर | लिंक्डइन | समाचार पत्रिका