Architecture Decision Record

Active theme: Light

← फैसला रिकॉर्ड के उदाहरण

आर्किटेक्चर फैसला रिकॉर्ड: CSS फ्रेमवर्क

सामग्री:

सारांश

समस्या

हमनी अपना वेब एप्लिकेशन बनावे खातिर CSS फ्रेमवर्क इस्तेमाल करे चाहत बानी:

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

  • हमनी डिजाइन, लेआउट, UI/UX, वगैरह पर तेज दोहराव चाहत बानी।

  • हमनी प्रतिक्रियाशील एप्लिकेशन चाहत बानी, खास कर के छोट स्क्रीन जइसे मोबाइल डिवाइस, बड़ स्क्रीन जइसे 4K वाइडस्क्रीन, आ गतिशील स्क्रीन जइसे घुमावे-लायक डिस्प्ले खातिर।

फैसला

Bulma पर तय भइल।

स्थिति

Bulma पर तय भइल। नया CSS फ्रेमवर्क के चुनाव खातिर खुला बानी जइसे-जइसे ऊ आवत जाई।

ब्योरा

मान्यता

हमनी आधुनिक, तेज, भरोसेमंद, प्रतिक्रियाशील, वगैरह वेब एप्लिकेशन बनावे चाहत बानी।

आम आधुनिक वेब एप्लिकेशन कई कारण से jQuery के इस्तेमाल घटा रहल बाड़ें/खतम कर रहल बाड़ें:

  • आधुनिक JavaScript में उ बहुत क्षमता धीरे-धीरे आ रहल बा जे jQuery देत रहे, एहसे jQuery के कम जरूरत बा, आ खास कार्यान्वयन देवे वाला जादा बढ़िया/तेज/छोट मॉड्यूल बाड़ें

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

  • अगर 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 परियोजना में 22,000 से जादा संपर्क बिंदु बा जे jQuery इस्तेमाल करेला"।

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 फ्रेमवर्क चुनब ऊ जाँचे-लायक होखे पर असर डाल सकेला।

संबंधित जरूरत

हमनी एगो पूरा तरी आधुनिक एप्लिकेशन जल्दी भेजल चाहत बानी।

हमनी पुरान निर्भरता (खास कर jQuery) इस्तेमाल करे वाला पुरान फ्रेमवर्क (खास कर Semantic UI) पर काम करे में समय खराब ना करे चाहत बानी।

संबंधित आर्टिफैक्ट

सब आम HTML पर असर डालेला जे CSS इस्तेमाल करी।

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

आसानी से पलटे-लायक।

तेजी के जरूरत।

टिप्पणी

इहाँ कवनो टिप्पणी।