Vue एम्स्टर्डम 2022: भाग VIII - द नक्स्ट वेब

स्वागत! मेरी Vuejs एम्स्टर्डम सम्मेलन 2022 सारांश श्रृंखला के सातवें भाग में आपको देखकर खुशी हुई, जिसमें मैं आपके साथ सभी वार्ताओं का सारांश साझा करता हूं।

आप मेरी जेएसवर्ल्ड सम्मेलन 2022 सारांश श्रृंखला (चार भागों में) यहां पढ़ सकते हैं, जहां मैंने पहले दिन की सभी वार्ताओं का सारांश दिया था। आप मेरे ब्लॉग में Vue एम्स्टर्डम सम्मेलन 2022 की पिछली वार्ता भी पा सकते हैं।

(आवर्ती) परिचय

ढाई साल के बाद, 1 और 3 जून के बीच JSWorld और Vue एम्स्टर्डम सम्मेलन थिएटर एम्स्टर्डम में वापस आ गए, और मुझे पहली बार इस सम्मेलन में भाग लेने का मौका मिला। मैंने बहुत सी चीजें सीखीं, कई अद्भुत लोगों से मुलाकात की, महान डेवलपर्स के साथ बात की, और बहुत अच्छा समय बिताया। पहले दिन JSWorld सम्मेलन आयोजित किया गया था, और दूसरे और तीसरे दिन, Vue एम्स्टर्डम।

सम्मेलन महान वक्ताओं के साथ जानकारी से भरा था, जिनमें से प्रत्येक ने मुझे कुछ मूल्यवान सिखाया। वे सभी अपने ज्ञान और जानकारी को अन्य डेवलपर्स के साथ साझा करना चाहते थे। इसलिए मैंने सोचा कि यह बहुत अच्छा होगा अगर मैं इसे साझा करना जारी रख सकूं और दूसरों को इसका इस्तेमाल करने में मदद कर सकूं।

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

एक बहुत ही महत्वपूर्ण बिंदु

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

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

यहां आप सम्मेलन का कार्यक्रम देख सकते हैं।

द नेक्स्ट वेब

सेबस्टियन चोपिन - Nuxt . के सह-संस्थापक

@nuxtlabs पर हमारा मिशन आपके अंतिम उपयोगकर्ताओं के लिए सर्वश्रेष्ठ उपयोगकर्ता अनुभव प्रदान करने के लिए सर्वश्रेष्ठ डेवलपर अनुभव प्रदान करना है। हम इसे Nuxt के साथ छह साल से कर रहे हैं।

Nuxt किसी भी तरह के Vue ऐप को बनाने के लिए एक वेब फ्रेमवर्क है। इसका मतलब है कि आप कर सकते हैं:

• सर्वर साइड रेंडरिंग (SSR)
• स्टेटिक साइट जनरेशन (एसएसजी)
• क्लाइंट साइड रेंडरिंग (सीएसआर)
• एज साइड रेंडरिंग (ESR) Nuxt 3 के लिए धन्यवाद

अक्टूबर 2016 में Nuxt की शुरुआत के बाद से इसे npm पर लगभग 46M बार डाउनलोड किया जा चुका है, इसमें 300k लाइव वेबसाइट और 18k GitHub योगदानकर्ता हैं।

Nuxt 2 और Nuxt 3 के बीच तुलना

• वेब सर्वर: विकास और उत्पादन वेब सर्वर के लिए, Nuxt 2 कनेक्ट करने के लिए उपयोग करता है, जो Express.js का मूल है, लेकिन Nuxt 3 के लिए उन्होंने h3 बनाया और यह किसी भी प्रकार के जावास्क्रिप्ट वातावरण में काम करता है।

• बंडलर: वेबपैक 4 का उपयोग नक्सट 2 में किया जाता है, और नक्सट 3 के लिए उन्होंने वेबपैक 5 के साथ शुरुआत की, लेकिन विटे के रिलीज होने के बाद, यह आधिकारिक तौर पर डिफ़ॉल्ट बंडलर के रूप में समर्थित है।

• UI फ्रेमवर्क: Nuxt 2 में Vue 2 और Nuxt 3 में Vue 3

• रूटिंग लाइब्रेरी: Nuxt 2 में Vue राउटर 3 और Nuxt 3 में Vue राउटर 4, जिसे कोई pages/ डायरेक्टरी नहीं मिलने पर शामिल नहीं किया जाएगा।

• मेटा प्रबंधन: चूंकि Nuxt SSR करता है, इसलिए मेटा टैग को प्रबंधित करने में सक्षम होना महत्वपूर्ण है। Vue Meta का उपयोग Nuxt 2 में और VueUse Head का Nuxt 3 में किया जाता है।

• सर्वर (कम) पैकेजर: यह Nuxt 3 में पेश किया गया है, जो नोड_मॉड्यूल्स को हटाकर उत्पादन के लिए nuxt एप्लिकेशन को संकुचित करता है, इसलिए आपका Nuxt एप्लिकेशन लगभग 1 मेगाबाइट होगा।

यह Nuxt 2 और Nuxt 3 के बीच एक हैलो वर्ल्ड बंडल आकार की तुलना है:

Nuxt 3 के इतने छोटे होने का एक कारण यह है कि यह पेड़ को हिलाने योग्य है, जैसे Vue 3। इसलिए यदि आप किसी सुविधा का उपयोग नहीं करते हैं, तो इसे बंडल में शामिल नहीं किया जाएगा।

अगला समतुल्य बंडल आकार लगभग 80kB है।

उस Nuxt 3 JS बंडल में, 25.3kB Vue से हैं, और शेष 8.7kB में शामिल हैं:

• हाइड्रेशन के साथ ऐप एंट्री
• <Suspense> के साथ मूल घटक
• यूनिवर्सल और लाइटवेट राउटर: useRouter() , middleware और <NuxtLink>
• हेड कंपोज़ेबल और कंपोनेंट्स: useHead() , <Title> , <Meta> , <Script> ,…
• यूनिवर्सल डेटा फ़ेचिंग: $fetch()
• डिफ़ॉल्ट त्रुटि पृष्ठ: 404 और 500
• Plugins और runtimeConfig तर्क
• useNuxtApp() और हुक: app:created , app:mounted , page:start , ...

एज साइड रेंडरिंग

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

फायदे:

• अंतिम उपयोगकर्ताओं से मिलीसेकंड चलाता है
• 0ms ठंड शुरू
• बनाए रखने के लिए कोई सर्वर नहीं
• स्वचालित स्केलिंग
• खरीदने की सामर्थ्य

एज कंप्यूटिंग प्रदाताओं में से कुछ अभी:

• क्लाउडफ्लेयर वर्कर्स
• वर्सेल एज
• नेटलिफाई एज
• डेनो डिप्लॉय
• लैम्ब्डा एज
• स्टैकपाथ

सामग्री V2

Nuxt सामग्री एक Nuxt मॉड्यूल है जो आपके एप्लिकेशन के लिए एक शक्तिशाली डेटा परत बनाने के लिए content/ निर्देशिका में मार्कडाउन, YAML, CSV और JSON फ़ाइलों को पढ़ता है और सामग्री V2 अब अधिक सुविधाओं के साथ बाहर है।

अगला 2.X

Nuxt 2.X के लिए क्या आ रहा है:

• व्यू 2.7
• नेक्स्ट ब्रिज (बीटा)
  • विटे
  • नाइट्रो
  • संरचना एपीआई और स्क्रिप्ट सेटअप
  • टाइपप्रति
  • नुक्सी सीएलआई
  • पोस्टसीएसएस 8

अगला 3.0

Nuxt 3.0 के लिए क्या आ रहा है:

• अगली छवि
• हाइब्रिड रेंडरिंग: सर्वर + SWR + प्री-रेंडरिंग
• पूर्ण स्थिर पीढ़ी
• पूर्वावलोकन मोड
• सर्वर सत्र और प्रमाणीकरण
• सेवा कार्यकर्ता (PWA)
• SEO हेल्पर्स और i18n सपोर्ट

आठवीं वार्ता का अंत

मुझे आशा है कि आपको यह भाग पसंद आया होगा और यह आपके लिए उतना ही मूल्यवान हो सकता है जितना कि यह मेरे लिए था। अगले कुछ दिनों में, मैं बाकी की बातचीत आपके साथ साझा करूँगा। बने रहें…

यहाँ भी प्रकाशित हो चुकी है।.