web.dev इंजीनियरिंग ब्लॉग #1: हम साइट कैसे बनाते हैं और वेब कॉम्पोनेंट का इस्तेमाल कैसे करते हैं

यह web.dev के इंजीनियरिंग ब्लॉग की पहली पोस्ट है. आने वाले महीनों में, हम अपने काम से जुड़ी अहम जानकारी शेयर करेंगे, ताकि आप उसे काम में लाएं. इसलिए, इंजीनियरिंग ब्लॉग टैग वाली पोस्ट देखें! यहां हम अपनी स्टैटिक साइट और (ज़रूरी नहीं!) हमारे वेब कॉम्पोनेंट के पीछे JavaScript.

web.dev पर, आधुनिक वेब अनुभव बनाने के बारे में कॉन्टेंट मिलता है. साथ ही, इसकी मदद से अपनी साइट की परफ़ॉर्मेंस को मेज़र किया जा सकता है. हो सकता है कि जानकार उपयोगकर्ताओं को पता हो कि हमारा Measure पेज, Lighthouse का सिर्फ़ एक इंटरफ़ेस है. यह Chrome के DevTools में भी उपलब्ध है. web.dev में साइन इन करने पर, अपनी साइट पर नियमित तौर पर Lighthouse ऑडिट चलाए जा सकते हैं. इससे आपको यह देखने में मदद मिलती है कि समय के साथ उसका स्कोर कैसे बदलता है. हम कुछ समय बाद, मेज़र पेज पर वापस आएंगे, क्योंकि हमें लगता है कि यह काफ़ी खास है. 🎊

परिचय

मूल रूप से, web.dev एक स्टैटिक साइट है, जो मार्कडाउन फ़ाइलों के कलेक्शन से जनरेट होती है. हमने Eleventy का इस्तेमाल इसलिए चुना है, क्योंकि यह एक बेहतर और बेहतर बनाने लायक टूल है. इससे मार्कडाउन को एचटीएमएल में बदलना आसान हो जाता है.

हम आधुनिक 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 को सभी के लिए उपलब्ध करा रहे हैं.

हालांकि, मॉडर्न ब्राउज़र के लिए हमारे कोड में दो मुख्य हिस्से होते हैं:

  1. बूटस्ट्रैप कोड, जिसमें ग्लोबल स्टेटस, Analytics, और एसपीए रूटिंग का कोड शामिल होता है
  2. वेब कॉम्पोनेंट के लिए कोड और सीएसएस, जो साइट को बेहतर बनाते हैं

बूटस्ट्रैप कोड काफ़ी आसान है: 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 की मदद से अपनी पसंदीदा साइट का ऑडिट किया जा सकता है. इसके बाद, Measure पेज से बाहर निकला जा सकता है. वापस आने पर, आपको दिखेगा कि टास्क अब भी पूरा नहीं हुआ है.

हमारे आसान कॉम्पोनेंट, स्टैटिक कॉन्टेंट को बेहतर बनाते हैं या शानदार विज़ुअलाइज़ेशन बनाते हैं. उदाहरण के लिए, हर लाइन ग्राफ़ का अपना <web-sparkline-chart> होता है. इनका ग्लोबल स्टेटस से कोई लेना-देना नहीं होता.

चैट करें

web.dev की इंजीनियरिंग टीम (Rob, Ewa, माइकल, और सैम) जल्द ही, इस विषय पर ज़्यादा तकनीकी जानकारी देगी.

हमें उम्मीद है कि हमने आपको अपने काम करने के तरीके के बारे में बताकर, आपके प्रोजेक्ट के लिए कुछ आइडिया दिए होंगे. अगर आपका इस ब्लॉग के बारे में कोई सवाल है या आपको किसी विषय पर ब्लॉग चाहिए, तो हमें Twitter पर टैग करें!