क्रमिक उन्नयन के जरिए मज़बूत फ्रंटएंड बनाना

 (gov.uk)
1 पॉइंट द्वारा GN⁺ 2024-09-30 | 1 टिप्पणियां | WhatsApp पर शेयर करें

मज़बूत फ्रंटएंड बनाने का तरीका: क्रमिक उन्नयन

  • HTML से शुरुआत

    • सरकारी सेवाएं केवल HTML के साथ भी कार्यात्मक होनी चाहिए
    • HTML लेयर fault-tolerant होती है, इसलिए पुराने browsers में भी काम कर सकती है
    • सही semantic markup का उपयोग करें और document structure को तार्किक रूप से व्यवस्थित करें

  • CSS का उपयोग

    • CSS का उपयोग करके सेवा को style किया जा सकता है
    • CSS लेयर fault-tolerant होती है, जो अलग-अलग declarations को अनदेखा कर सकती है
    • 'CSS-in-JS' जैसी तकनीकों से बचना चाहिए

  • JavaScript का उपयोग

    • JavaScript का उपयोग interactive elements जोड़ने के लिए किया जाता है
    • JavaScript लेयर fault-tolerant नहीं होती और इसमें errors हो सकते हैं
    • browser API के लिए feature detection, polyfills शामिल करना, transpiling आदि के जरिए compatibility बढ़ाई जा सकती है
    • JavaScript को HTML और CSS का पूरक होना चाहिए

  • JavaScript के विकल्प

    • ऐसे सरल solutions पर विचार करना चाहिए जो JavaScript के बिना भी user needs को पूरा कर सकें
    • विकल्पों में data tables दिखाना, data export करना, और graphs को image के रूप में pre-render करना शामिल हैं

  • client-side JavaScript framework का उपयोग

    • यदि user interface जटिल नहीं है, तो framework के उपयोग से बचना चाहिए
    • framework के उपयोग से codebase का आकार बढ़ना, performance समस्याएं, और third-party code dependency जैसी दिक्कतें आ सकती हैं
    • framework का उपयोग करने पर हर user interface को अलग component के रूप में डिज़ाइन करना चाहिए

  • CSS या JavaScript के load न होने या execute न होने के कारण

    • network errors, browser extensions, third-party vendor downtime, DNS lookup failure, और browser updates से आए bugs इसके कारण हो सकते हैं
    • कुछ users जानबूझकर browser features को बंद कर सकते हैं

  • Single Page Application (SPA)

    • सेवा को Single Page Application के रूप में नहीं बनाना चाहिए
    • SPA accessibility को नुकसान पहुंचा सकती है, और page navigation के दौरान focus handling की समस्या, back/forward buttons का ठीक से काम न करना जैसी दिक्कतें पैदा हो सकती हैं

  • सेवा का परीक्षण

    • JavaScript या JavaScript framework पर बहुत अधिक निर्भर components को अलग-अलग browsers और devices पर काम करना चाहिए
    • accessibility के लिए परीक्षण किया जाना चाहिए

  • case studies और संबंधित guides

    • क्रमिक उन्नयन का उपयोग क्यों करें
    • अलग-अलग devices के लिए design
    • frontend performance test कैसे करें
    • WCAG 2.2 को समझना

GN⁺ का सारांश

  • क्रमिक उन्नयन HTML, CSS, JavaScript के क्रम में वेबसाइट बनाने की एक पद्धति है
  • यह पद्धति सेवा की fault tolerance बढ़ाती है और उसे अलग-अलग browsers और devices पर काम करने योग्य बनाती है
  • JavaScript की भूमिका पूरक होनी चाहिए और वैकल्पिक solutions पर भी विचार करना चाहिए
  • accessibility समस्याओं के कारण Single Page Application से बचना चाहिए
  • सेवा का परीक्षण अलग-अलग environments में accessibility सुनिश्चित करना चाहिए

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-09-30
Hacker News टिप्पणियाँ

  • JavaScript framework का उपयोग करते समय यह साबित कर पाना चाहिए कि इससे यूज़र को क्या फ़ायदा है

    • अगर कोई app offline में भी desktop app की तरह काम कर सकता है, तो उसे single-page application (SPA) के रूप में बनाना बेहतर है
    • उदाहरण के तौर पर Photopea, Google Docs/Sheets, tldraw आदि हैं
    • अगर कोई app इंटरनेट कनेक्शन पर निर्भर है और उसमें कई pages चाहिए, तो navigation ब्राउज़र को संभालने देना बेहतर है

  • SPA की कमियों के रूप में बताए गए बिंदु

    • assistive technology उपयोगकर्ता page transition के समय context के बदलाव को पहचान नहीं पाते
    • page transition के समय focus को संभाला नहीं जा पाता
    • ब्राउज़र के back और forward buttons का उपयोग नहीं किया जा सकता
    • नेटवर्क कनेक्शन टूटने पर errors से recovery नहीं हो पाती
    • लेकिन ये समस्याएँ SPA में भी हल की जा सकती हैं

  • अच्छा होता अगर पूरा इंटरनेट इस सलाह का पालन करता

  • सरल solutions को प्राथमिकता देनी चाहिए

  • यह जानने की उत्सुकता है कि सूची में Linux क्यों नहीं है

  • लगता है बहुत से लोग इस approach को पसंद करते हैं

    • यह सोचने वाली बात है कि सामान्य trend बेवजह JavaScript और React जैसे frameworks का उपयोग क्यों करता है

  • HTML और server से पहले से लाए गए data का उपयोग करें, और जो काम client पर हो सकता है उसे client पर संभालें

    • न्यूनतम CSS और vanilla JS का उपयोग करें
    • यह सहकर्मियों को पुराना लग सकता है, लेकिन इसमें कुछ भी छूटता नहीं है

  • बहुत से SPA समस्याग्रस्त हैं, लेकिन सभी SPA समस्याग्रस्त नहीं होते

    • VitePress और SolidJS जैसे उदाहरणों को देखें तो वे अच्छी तरह काम करते हैं
    • JS का उपयोग न करने वाले लोग लगभग नहीं हैं
    • low-end devices पर भी JS को संभालने में कोई समस्या नहीं होती
    • accessibility समस्याओं का SPA के उपयोग से सीधा संबंध नहीं है
    • Svelte में accessibility warnings की built-in सुविधा भी है

  • server-side rendering भी हर बार अच्छा नहीं होता

    • client-side JavaScript framework का उपयोग करते समय सावधानी ज़रूरी है
    • codebase बड़ा हो सकता है, और client side पर संभाले जाने वाले काम बढ़ने से performance समस्याएँ हो सकती हैं
    • third-party code पर निर्भरता बढ़ सकती है, जिससे maintenance कठिन हो सकता है
    • JavaScript framework का उपयोग करते समय यह साबित कर पाना चाहिए कि इससे यूज़र को क्या फ़ायदा है
    • नकारात्मक प्रभावों को समझना और उन्हें कम करना आना चाहिए
    • framework का उपयोग केवल वहीं करना चाहिए जहाँ HTML और CSS से काम नहीं चल सकता
    • user interface के हर हिस्से को अलग component के रूप में डिज़ाइन करना चाहिए
    • भले ही JavaScript load न हो, page का बाकी हिस्सा सामान्य रूप से load होना चाहिए