web.dev के इंजीनियरिंग ब्लॉग में यह पहली पोस्ट है. आने वाले महीनों में, हम अपने काम से जुड़ी अहम जानकारी शेयर करेंगे. इसलिए, इंजीनियरिंग ब्लॉग टैग से जुड़ी पोस्ट देखते रहें! यहां हम अपनी स्टैटिक साइट की बिल्ड प्रोसेस और (ज़रूरी नहीं!) JavaScript को सुरक्षित और बेहतर बनाने की सुविधा देता है.
web.dev आधुनिक वेब अनुभव तैयार करने के बारे में कॉन्टेंट उपलब्ध कराता है और आपको अपनी साइट की परफ़ॉर्मेंस को मेज़र करने की सुविधा देता है. जानकार उपयोगकर्ताओं ने शायद यह महसूस किया होगा कि हमारा माप पेज Lighthouse का सिर्फ़ इंटरफ़ेस है, जो Chrome के DevTools में भी उपलब्ध है. web.dev में साइन इन करके, अपनी साइट पर नियमित लाइटहाउस ऑडिट चलाए जा सकते हैं, ताकि आप देख सकें कि समय के साथ इसका स्कोर कैसे बदलता है. मैं'मेज़रमेंट' पेज पर कुछ देर बाद दोबारा विज़िट करूंगी. हमें लगता है कि यह काफ़ी खास है. 🎊
शुरुआती जानकारी
मूल रूप से, web.dev एक स्टैटिक साइट है, जो Markdown फ़ाइलों के कलेक्शन से जनरेट होती है. हमने Eleventy का इस्तेमाल करना इसलिए चुना है, क्योंकि यह एक बेहतर और एक्सटेंसिबल टूल है. इसकी मदद से, Markdown को एचटीएमएल में बदलना आसान हो जाता है.
हम ऐसे आधुनिक JavaScript बंडल का भी इस्तेमाल करते हैं जिन्हें हम सिर्फ़ type="module" के साथ काम करने वाले ब्राउज़र के लिए उपलब्ध कराते हैं. इनमें async और await शामिल हैं.
हम ऐसे फ़ीचर का भी इस्तेमाल करते हैं जो हमेशा लोकप्रिय रहने वाले ब्राउज़र पर काम करते हैं, लेकिन कुछ पुराने वर्शन के साथ काम नहीं करते.
हम एक स्टैटिक साइट हैं, इसलिए हमारे कॉन्टेंट को पढ़ने के लिए JavaScript की ज़रूरत नहीं है.
बिल्ड प्रोसेस (जिसमें स्टैटिक एचटीएमएल जनरेट करना और हमारे JavaScript को रोलअप के साथ बंडल करना शामिल है) के पूरा होने पर, web.dev को टेस्ट करने के लिए एक सामान्य स्टैटिक सर्वर पर होस्ट किया जा सकता है. साइट करीब पूरी तरह से स्टैटिक है. हालांकि, हमें कुछ ऐसी खास ज़रूरतों को पूरा करना है जिनके लिए अब भी कस्टम Node.js सर्वर का इस्तेमाल किया जा सकता है. इनमें अमान्य डोमेन के लिए रीडायरेक्ट शामिल हैं. साथ ही, आने वाली किसी अंतरराष्ट्रीय सुविधा के लिए, उपयोगकर्ता की पसंदीदा भाषा को पार्स करने के लिए कोड भी शामिल है.
स्टैटिक जनरेशन
web.dev का हर पेज, Markdown में लिखा जाता है. सभी पेजों में फ़्रंट मैटर शामिल होता है, जो हर पोस्ट के मेटाडेटा की जानकारी देता है. यह मेटाडेटा हर पेज के लेआउट में डाला जाता है, ताकि हेडिंग, टैग वगैरह बनाए जा सकें. यहां एक उदाहरण दिया गया है:
---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...
सामने के इस मामले की मदद से, हम लेखक(लेखकों), पब्लिश होने की तारीख, और टैग जैसी आर्बिट्रेरी प्रॉपर्टी तय कर सकते हैं. Eleventy ज़रूरत के मुताबिक, करीब-करीब हर प्लगिन, टेंप्लेट या अन्य कॉन्टेक्स्ट में मुख्य कॉन्टेंट को डेटा के तौर पर दिखाता है. इससे हम कुछ बेहतर करना चाहते हैं. डेटा ऑब्जेक्ट में वह भी शामिल होता है जिसे Eleventy डेटा कैस्केड के तौर पर बताता है—हर अलग पेज से लिया गया कई तरह का डेटा, पेज के इस्तेमाल किए गए लेआउट, और हैरारकी वाले फ़ोल्डर स्ट्रक्चर में मिले डेटा से.
हर यूनीक लेआउट में अलग तरह के कॉन्टेंट के बारे में जानकारी होती है. यह अन्य लेआउट से इनहेरिट हो सकती है. web.dev पर, हम इस सुविधा का इस्तेमाल किसी टॉप लेवल एचटीएमएल लेआउट को शेयर करते हुए, अलग-अलग तरह के कॉन्टेंट (जैसे कि पोस्ट और कोडलैब) को सही तरीके से फ़्रेम करने के लिए करते हैं.
कलेक्शन
Eleventy प्रोग्राम के हिसाब से, प्रोग्राम के हिसाब से अपने कॉन्टेंट का कलेक्शन बनाता है. इससे हमें पेजों को पेजों में बांटने में मदद मिली. साथ ही, पोस्ट लिखने वाले लोगों के लिए वर्चुअल पेज (ऐसे पेज जिनके डिस्क पर मेल खाने वाली Markdown फ़ाइल मौजूद नहीं है) जनरेट कर सकते हैं. उदाहरण के लिए, हम लेखकों के पेज बनाने के लिए ऐसे टेंप्लेट का इस्तेमाल करते हैं जिसमें अपने स्थायी लिंक के लिए एक एक्सप्रेशन होता है. साथ ही, हर लेखक के लिए टेंप्लेट को फिर से रेंडर किया जाता है. साथ ही, इसमें बैकिंग कलेक्शन होता है.
उदाहरण के लिए, इससे एक सामान्य पेज बन जाता है, जिसमें Addy की सभी पोस्ट मौजूद होती हैं!
सीमाएं
इस समय हम Eleventy की बिल्ड प्रोसेस को आसानी से नहीं जोड़ सकते, क्योंकि इसमें ज़रूरी के बजाय, डिक्लेरेटिव होता है: न कि यह, कि आपको क्या चाहिए, न कि यह कि आपको क्या पसंद है. Eleventy को एक बड़े बिल्ड टूल के तौर पर चलाना मुश्किल है, क्योंकि इसे सिर्फ़ कमांड-लाइन इंटरफ़ेस से ही शुरू किया जा सकता है.
टेंप्लेट बनाना
web.dev, Nunjucks टेंप्लेट का इस्तेमाल करता है, जिसे मूल रूप से Mozilla ने बनाया था. Nunjucks में, आम तौर पर टेंप्लेट बनाने की सुविधाएं होती हैं, जैसे कि लूप और कंडीशनल. हालांकि, इसकी मदद से हम ऐसे शॉर्टकोड भी तय कर सकते हैं जो ज़्यादा एचटीएमएल जनरेट करते हैं या कोई अन्य लॉजिक शुरू करते हैं.
स्टैटिक कॉन्टेंट साइटों को बनाने वाली ज़्यादातर टीमों की तरह, हमने भी समय के साथ इसकी शुरुआत की है और उसमें शॉर्टकोड भी जोड़े हैं. अब तक इनकी संख्या 20 से ज़्यादा है. इनमें से ज़्यादातर सिर्फ़ और ज़्यादा एचटीएमएल (हमारे कस्टम वेब कॉम्पोनेंट के साथ) जनरेट करते हैं. यहां एक उदाहरण दिया गया है:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
बाद में, यह कुछ ऐसा दिखेगा:
लेकिन यह असल में ऐसा एचटीएमएल बना रहा है जो दिखता है:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
इस पोस्ट के दायरे से बाहर होने पर, web.dev एक तरह की मेटाप्रोग्रामिंग भाषा के तौर पर शॉर्टकोड का भी इस्तेमाल करता है. शॉर्टकोड, आर्ग्युमेंट को स्वीकार करते हैं. हालांकि, उनके किसी आर्ग्युमेंट में कॉन्टेंट शामिल होता है. यह ज़रूरी नहीं है कि शॉर्टकोड कुछ भी दिखाएं. इसलिए, उनका इस्तेमाल स्थिति बनाने या कोई दूसरी कार्रवाई करने के लिए किया जा सकता है. 🤔💭
स्क्रिप्ट तैयार करना
जैसा कि पहले बताया गया है, web.dev एक स्टैटिक साइट है. इसलिए, इसे JavaScript के बिना और ऐसे पुराने ब्राउज़र पर दिखाया और इस्तेमाल किया जा सकता है जो type="module" या हमारे अन्य मॉडर्न कोड के साथ काम नहीं करते.
यह web.dev की सुविधा सभी के लिए उपलब्ध कराने के हमारे तरीके का बहुत अहम हिस्सा है.
हालांकि, मॉडर्न ब्राउज़र के लिए हमारे कोड के दो मुख्य हिस्से हैं:
- बूटस्ट्रैप कोड जिसमें ग्लोबल स्टेट, Analytics, और एसपीए रूटिंग के लिए कोड शामिल होता है
- वेब कॉम्पोनेंट के लिए कोड और सीएसएस, जो साइट को धीरे-धीरे बेहतर बनाते हैं
बूटस्ट्रैप कोड को समझना आसान है: web.dev नए पेजों को एक पेज वाले ऐप्लिकेशन (एसपीए) के तौर पर लोड कर सकता है, इसलिए हम एक ग्लोबल लिसनर इंस्टॉल करते हैं, जो लोकल <a href="..."> एलिमेंट पर होने वाले क्लिक पर ध्यान देता है.
एसपीए मॉडल, उपयोगकर्ता के मौजूदा सेशन को दुनिया भर में बनाए रखने में हमारी मदद करता है. ऐसा न करने पर, हर नया पेज लोड होने पर Firebase को कॉल ट्रिगर होते हैं, ताकि उपयोगकर्ता के साइन इन किए गए उपयोगकर्ता को ऐक्सेस किया जा सके.
आपने किस यूआरएल को हिट किया है, इसके आधार पर हम अपनी साइट पर अलग-अलग एंट्रीपॉइंट की जानकारी भी देते हैं. साथ ही, डाइनैमिक import() का इस्तेमाल करके सही यूआरएल लोड करते हैं.
इससे साइट को कोड का इस्तेमाल करके बेहतर बनाने से पहले हमारे उपयोगकर्ताओं को कम से कम बाइट की ज़रूरत होती है.
वेब कॉम्पोनेंट
वेब कॉम्पोनेंट ऐसे कस्टम एलिमेंट होते हैं जो JavaScript में उपलब्ध रनटाइम फ़ंक्शन को शामिल करते हैं. साथ ही, इनकी पहचान <web-codelab> जैसे कस्टम नाम से की जाती है.
डिज़ाइन, web.dev जैसी काफ़ी हद तक स्थिर साइटों के साथ बेहतर तरीके से काम करता है: आपका ब्राउज़र, किसी एलिमेंट के लाइफ़साइकल को मैनेज करता है, क्योंकि साइट का एचटीएमएल अपडेट होता है. साथ ही, किसी एलिमेंट के पेज से अटैच या अलग होने पर, उसे सही तरीके से सूचना दी जाती है.
साथ ही, पुराने ब्राउज़र, वेब कॉम्पोनेंट को पूरी तरह से अनदेखा कर देते हैं और डीओएम में बचे हुए हिस्से को रेंडर करते हैं.
हर वेब कॉम्पोनेंट एक क्लास है, जिसमें connectedCallback(), disconnectedCallback(), और attributeChangedCallback() शामिल हैं.
web.dev के कस्टम एलिमेंट ज़्यादातर LitElement से इनहेरिट किए जाते हैं, जो कॉम्प्लेक्स कॉम्पोनेंट के लिए आसान आधार उपलब्ध कराता है.
हालांकि, web.dev कई पेजों पर वेब कॉम्पोनेंट का इस्तेमाल करता है, लेकिन मेज़र पेज के मुकाबले इसकी ज़रूरत कहीं ज़्यादा है. ये दो एलिमेंट, इस पेज पर दिखने वाली ज़्यादातर सुविधाएं उपलब्ध कराते हैं:
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
ये एलिमेंट, ऐसे एलिमेंट बनाते हैं जो ज़्यादा सुविधाएं देते हैं. अहम बात यह है कि ये एलिमेंट हमारे सामान्य Markdown सोर्स कोड का सिर्फ़ हिस्सा हैं. हमारी कॉन्टेंट टीम, सिर्फ़ मेजर नोड पर नहीं, बल्कि किसी पेज पर भी एक्सटेंडेड फ़ंक्शन जोड़ सकती है.
हमारे वेब कॉम्पोनेंट आम तौर पर, कंटेनर कॉम्पोनेंट वाले मॉडल का इस्तेमाल करते हैं. यह मॉडल React से लोकप्रिय होता है. हालांकि, यह मॉडल अब काम का नहीं है.
हर -container एलिमेंट, हमारी ग्लोबल स्थिति (unistore से मिला) से कनेक्ट होता है और फिर एक विज़ुअल एलिमेंट को रेंडर करता है जो स्टाइल या पहले से मौजूद दूसरे फ़ंक्शन वाले असली DOM नोड को रेंडर करता है.
ग्लोबल कार्रवाइयों और स्थिति को विज़ुअलाइज़ करने के लिए, हमारे सबसे मुश्किल वेब कॉम्पोनेंट मौजूद हैं. उदाहरण के लिए, web.dev आपको अपनी पसंदीदा साइट को ऑडिट करने और फिर 'मेज़रमेंट' पेज से बाहर जाने की सुविधा देता है. वापस जाने पर, आपको दिखेगा कि टास्क अब भी चल रहा है.
हमारे सामान्य कॉम्पोनेंट, पूरी तरह से स्टैटिक कॉन्टेंट को बेहतर बनाते हैं या शानदार विज़ुअलाइज़ेशन बनाते हैं. उदाहरण के लिए, हर लाइन ग्राफ़ का अपना <web-sparkline-chart> होता है, जिसका वैश्विक राज्य से कोई संबंध नहीं होता.
आइए चैट करें
की इंजीनियरिंग टीम (रॉब, ईवा, माइकल, और सैम) जल्द ही तकनीकी चीज़ों के बारे में ज़्यादा जानकारी हासिल करने के लिए संपर्क करेगी.
हमें उम्मीद है कि हमारे काम करने के तरीके से आपको अपने प्रोजेक्ट बनाने के कुछ आइडिया मिले. अगर आपके पास इस ब्लॉग के बारे में कोई सवाल है या किसी विषय के बारे में अनुरोध हैं, तो हमें Twitter पर बताएं!