यह web.dev के इंजीनियरिंग ब्लॉग की पहली पोस्ट है. आने वाले महीनों में, हम अपने काम से जुड़ी अहम जानकारी शेयर करेंगे, ताकि आप उसे काम में लाएं. इसलिए, इंजीनियरिंग ब्लॉग टैग वाली पोस्ट देखें! यहां हम अपनी स्टैटिक साइट और (ज़रूरी नहीं!) हमारे वेब कॉम्पोनेंट के पीछे की JavaScript.
web.dev पर, आधुनिक वेब अनुभव बनाने के बारे में कॉन्टेंट मिलता है. साथ ही, इसकी मदद से अपनी साइट की परफ़ॉर्मेंस को मेज़र किया जा सकता है. हो सकता है कि जानकार उपयोगकर्ताओं को पता हो कि हमारा Measure पेज, Lighthouse का सिर्फ़ एक इंटरफ़ेस है. यह Chrome के DevTools में भी उपलब्ध है. web.dev में साइन इन करने पर, अपनी साइट पर नियमित तौर पर Lighthouse ऑडिट चलाए जा सकते हैं. इससे आपको यह देखने में मदद मिलती है कि समय के साथ उसका स्कोर कैसे बदलता है. हम कुछ समय बाद, मेज़र पेज पर वापस आएंगे, क्योंकि हमें लगता है कि यह काफ़ी खास है. 🎊
परिचय
बुनियादी तौर पर, web.dev एक स्टैटिक साइट है, जो Markdown फ़ाइलों के कलेक्शन से जनरेट होती है. हमने Eleventy इस्तेमाल करने का विकल्प चुना है, क्योंकि यह एक बेहतरीन टूल है. इस टूल का इस्तेमाल करके, Markdown को एचटीएमएल में आसानी से बदला जा सकता है.
हम आधुनिक JavaScript बंडल का भी इस्तेमाल करते हैं. हम इन्हें सिर्फ़ उन ब्राउज़र पर दिखाते हैं जो type="module" के साथ काम करते हैं. इनमें async और await शामिल हैं.
हम उन सुविधाओं का भी इस्तेमाल करते हैं जो हमेशा काम करने वाले ब्राउज़र पर काम करती हैं, लेकिन कुछ पुराने वर्शन पर काम नहीं करती हैं.
हम एक स्टैटिक साइट हैं, इसलिए हमारे कॉन्टेंट को पढ़ने के लिए JavaScript की ज़रूरी नहीं है.
स्टैटिक एचटीएमएल जनरेट करने और Rollup के साथ हमारे JavaScript को बंडल करने वाली बिल्ड प्रोसेस पूरी होने के बाद, web.dev को टेस्टिंग के लिए किसी आसान स्टैटिक सर्वर पर होस्ट किया जा सकता है. साइट लगभग पूरी तरह से स्टैटिक है, लेकिन हमें कुछ खास ज़रूरतें हैं. इन ज़रूरतों को पूरा करने के लिए, कस्टम Node.js सर्वर का इस्तेमाल किया जा सकता है. इनमें अमान्य डोमेन के लिए रीडायरेक्ट शामिल हैं. साथ ही, आने वाले समय में अंतरराष्ट्रीय स्तर पर उपलब्ध कराने की सुविधा के लिए, उपयोगकर्ता की पसंदीदा भाषा को पार्स करने वाला कोड भी शामिल है.
स्टैटिक जनरेशन
web.dev पर मौजूद हर पेज को मार्कडाउन में लिखा गया है. सभी पेजों में फ़्रंट मैटर शामिल होता है. इससे हर पोस्ट के मेटाडेटा की जानकारी मिलती है. इस मेटाडेटा को हर पेज के लेआउट में डाला जाता है, ताकि हेडिंग, टैग वगैरह बनाए जा सकें. यहां एक उदाहरण दिया गया है:
---
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>
ये एलिमेंट, ज़्यादा फ़ंक्शन देने वाले अन्य एलिमेंट बनाते हैं. अहम बात यह है कि ये एलिमेंट, हमारे सामान्य मार्कडाउन सोर्स कोड का सिर्फ़ एक हिस्सा हैं. साथ ही, हमारी कॉन्टेंट टीम, Measure नोड के साथ-साथ किसी भी पेज में ज़्यादा फ़ंक्शन जोड़ सकती है.
हमारे वेब कॉम्पोनेंट, आम तौर पर कंटेनर कॉम्पोनेंट मॉडल का इस्तेमाल करते हैं. इसे React ने लोकप्रिय बनाया था. हालांकि, यह मॉडल अब थोड़ा पुराना हो गया है.
हर -container एलिमेंट, unistore से मिलने वाली हमारी ग्लोबल स्टेटस से कनेक्ट होता है. इसके बाद, यह एक विज़ुअल एलिमेंट रेंडर करता है. यह एलिमेंट, स्टाइल या अन्य बिल्ट-इन फ़ंक्शन वाले असली DOM नोड को रेंडर करता है.
हमारे सबसे जटिल वेब कॉम्पोनेंट, ग्लोबल ऐक्शन और स्टेटस को विज़ुअलाइज़ करने के लिए मौजूद हैं. उदाहरण के लिए, web.dev की मदद से अपनी पसंदीदा साइट का ऑडिट किया जा सकता है और फिर 'मेज़रमेंट' पेज से बाहर नेविगेट किया जा सकता है. वापस आने पर, आपको दिखेगा कि टास्क अब भी पूरा नहीं हुआ है.
हमारे आसान कॉम्पोनेंट, स्टैटिक कॉन्टेंट को बेहतर बनाते हैं या शानदार विज़ुअलाइज़ेशन बनाते हैं. उदाहरण के लिए, हर लाइन ग्राफ़ का अपना <web-sparkline-chart> होता है. इनका ग्लोबल स्टेटस से कोई लेना-देना नहीं होता.
चैट करें
web.dev की इंजीनियरिंग टीम (Rob, Ewa, माइकल, और सैम), जल्द ही इस बारे में ज़्यादा तकनीकी जानकारी के साथ आपसे संपर्क करेगी.
हमें उम्मीद है कि हमने आपको अपने काम करने के तरीके के बारे में बताकर, आपके प्रोजेक्ट के लिए कुछ आइडिया दिए होंगे. अगर आपका इस ब्लॉग के बारे में कोई सवाल है या आपको किसी विषय पर ब्लॉग चाहिए, तो हमें Twitter पर टैग करें!