आर्किटेक्चर निर्णय रिकॉर्ड: CSS फ़्रेमवर्क

विषय-सूची:

• सारांश
  • मुद्दा
  • निर्णय
  • अवस्था
• विवरण
  • मान्यताएँ
  • बाधाएँ
  • रुख
  • तर्क
  • निहितार्थ
• संबंधित
  • संबंधित निर्णय
  • संबंधित आवश्यकताएँ
  • संबंधित कलाकृतियाँ
  • संबंधित सिद्धांत
• टिप्पणियाँ

सारांश

मुद्दा

हम अपने वेब एप्लिकेशन बनाने के लिए एक CSS फ़्रेमवर्क का उपयोग करना चाहते हैं:

• हम चाहते हैं कि सभी लोकप्रिय ब्राउज़रों और स्क्रीन आकारों पर उपयोगकर्ता अनुभव तेज़ और भरोसेमंद हो।

• हम डिज़ाइन, लेआउट, UI/UX आदि पर तेज़ पुनरावृत्ति चाहते हैं।

• हम रिस्पॉन्सिव एप्लिकेशन चाहते हैं, खासकर छोटी स्क्रीन जैसे मोबाइल उपकरणों, बड़ी स्क्रीन जैसे 4K वाइडस्क्रीन, और गतिशील स्क्रीन जैसे घुमाई जा सकने वाली डिस्प्ले के लिए।

निर्णय

Bulma को चुनने का निर्णय लिया।

अवस्था

Bulma को चुनने का निर्णय लिया। नए CSS फ़्रेमवर्क विकल्पों के आने पर उनके लिए खुले हैं।

विवरण

मान्यताएँ

हम आधुनिक, तेज़, भरोसेमंद, रिस्पॉन्सिव आदि वेब ऐप बनाना चाहते हैं।

सामान्य आधुनिक वेब ऐप कई कारणों से jQuery का उपयोग घटा रहे हैं/समाप्त कर रहे हैं:

• आधुनिक JavaScript में धीरे-धीरे वे कई क्षमताएँ आ रही हैं जो jQuery देता रहा है, इसलिए jQuery की ज़रूरत कम है, और विशिष्ट क्रियान्वयन देने वाले बेहतर/तेज़/छोटे मॉड्यूल मौजूद हैं

• jQuery का व्यापक तरीका सीधे DOM में हेरफेर करना है, जो आधुनिक JavaScript फ़्रेमवर्क (जैसे React, Vue, Svelte) के लिए एक विरोधी-पैटर्न (anti-pattern) है

• यदि jQuery दो बार लोड हो जाए तो वह स्वयं में टकराव पैदा करता है, आदि

बाधाएँ

यदि हम ऐसा CSS फ़्रेमवर्क चुनते हैं जो jQuery का उपयोग करता है, तो हमें jQuery आयात करना ही पड़ेगा। उदाहरण के लिए, Semantic UI jQuery का उपयोग करता है, जबकि Tachyons नहीं करता।

यदि हम न्यूनतम CSS फ़्रेमवर्क चुनते हैं, तो हम उन फ़्रेमवर्क घटकों को छोड़ देते हैं जिनकी हमें अभी या जल्द ज़रूरत पड़ सकती है। उदाहरण के लिए, Semantic UI इमेज कैरोसेल देता है, जबकि Tachyons नहीं देता।

रुख

हमने कोई फ़्रेमवर्क न उपयोग करने पर विचार किया। यह अब भी व्यवहार्य लगता है, खासकर क्योंकि CSS ग्रिड हमारी परियोजना की अधिकांश आवश्यकताएँ पूरी कर देता है।

हमने त्वरित शॉर्टलिस्ट छँटाई से कई CSS फ़्रेमवर्क पर विचार किया: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons आदि। गहन समीक्षा के लिए हमारे दो चयन हैं Semantic UI (क्योंकि इसका दृष्टिकोण सबसे अधिक अर्थपूर्ण है) और Bulma (क्योंकि इसका दृष्टिकोण सबसे हल्का है और यह वे घटक देता है जो हमें अभी चाहिए)।

हमने Semantic UI पर विचार किया। यह कई घटक देता है, जिनमें वे भी हैं जो हमारी परियोजना को चाहिए: टैब, ग्रिड, बटन आदि। हमने Semantic UI के साथ दो तरीकों से पायलट किया: सामान्य CDN फ़ाइलों का उपयोग करके, और NPM रिपॉज़िटरी का उपयोग करके। हमें स्थिर HTML पेज में Semantic UI के साथ सफलता मिली, लेकिन JavaScript SPA बनाने की हमारी समय-सीमा में सफलता नहीं मिली (मुख्यतः jQuery लोड की समस्याओं के कारण)। हमने पाया कि अन्य कोडर भी हमारे ही कारणों से Semantic UI के डेवलपरों से jQuery-रहित संस्करण बनाने को कह रहे हैं। अन्य कोडर कई वर्षों से jQuery-रहित संस्करण माँग रहे हैं, फिर भी डेवलपरों ने मना कर दिया है, और कहा है कि कोई भी jQuery-रहित संस्करण लिखना बहुत कठिन होगा, जैसे ~"Semantic UI परियोजना में jQuery का उपयोग करने वाले 22,000 से अधिक स्पर्श-बिंदु हैं"।

Semantic के साथ उदाहरण:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

हमने Bulma पर विचार किया। Bulma में Semantic UI जैसी कई क्षमताएँ हैं, हालाँकि उतने परिष्कृत घटक नहीं हैं। Bulma आधुनिक तकनीकों से बना है, जैसे jQuery नहीं। Bulma के कुछ तृतीय-पक्ष घटक हैं, जिनमें से कुछ का हम उपयोग करना चाह सकते हैं।

Bulma के साथ उदाहरण:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

तर्क

जैसा ऊपर बताया गया है।

विशेष रूप से, Semantic UI में प्रौद्योगिकी (यानी इतने सारे jQuery स्पर्श-बिंदु) और नेतृत्व (यानी jQuery-रहित संस्करण पर स्पष्ट मनाही, रोडमैप बनाने, लगातार सुधार या चंदा जुटाने आदि की कोशिश के बजाय) दोनों दृष्टियों से चेतावनी का झंडा दिखता है।

निहितार्थ

यदि हमें कोई अच्छा बिना-jQuery वाला CSS फ़्रेमवर्क मिलता है, तो यह सामान्यतः उपयोगी और कुल मिलाकर अच्छा है।

संबंधित

संबंधित निर्णय

हम जो CSS फ़्रेमवर्क चुनते हैं वह परीक्षण योग्यता को प्रभावित कर सकता है।

संबंधित आवश्यकताएँ

हम पूरी तरह आधुनिक ऐप तेज़ी से भेजना चाहते हैं।

हम पुराने फ़्रेमवर्क (विशेषकर Semantic UI) पर पुरानी निर्भरताओं (विशेषकर jQuery) के साथ समय नहीं बिताना चाहते।

संबंधित कलाकृतियाँ

उन सभी सामान्य HTML को प्रभावित करता है जो इस CSS का उपयोग करेंगे।

संबंधित सिद्धांत

आसानी से पलटा जा सकने वाला।

गति की आवश्यकता।

टिप्पणियाँ

यहाँ कोई भी टिप्पणी।