आर्किटेक्चर निर्णय नोंद: CSS फ्रेमवर्क

सामग्री:

• सारांश
  • समस्या
  • निर्णय
  • स्थिती
• तपशील
  • गृहीतके
  • मर्यादा
  • मते
  • युक्तिवाद
  • परिणाम
• संबंधित
  • संबंधित निर्णय
  • संबंधित आवश्यकता
  • संबंधित आर्टिफॅक्ट्स
  • संबंधित तत्त्वे
• टिपा

सारांश

समस्या

आम्हाला आमचे वेब अनुप्रयोग बनवण्यासाठी CSS फ्रेमवर्क वापरायचे आहे:

• आम्हाला सर्व लोकप्रिय ब्राउझर आणि स्क्रीन आकारांवर वापरकर्ता अनुभव जलद आणि विश्वासार्ह हवा आहे.

• आम्हाला डिझाइन, मांडणी, UI/UX इत्यादींवर जलद पुनरावृत्ती हवी आहे.

• आम्हाला प्रतिसादशील अनुप्रयोग हवे आहेत, विशेषतः मोबाइल उपकरणांवरील लहान स्क्रीन, 4K वाइडस्क्रीनवरील मोठ्या स्क्रीन आणि फिरवता येण्याजोग्या डिस्प्लेसारख्या गतिशील स्क्रीनसाठी.

निर्णय

Bulma वर निर्णय घेतला.

स्थिती

Bulma वर निर्णय घेतला. नवीन CSS फ्रेमवर्क निवडी आल्यास त्यांच्यासाठी खुले.

तपशील

गृहीतके

आम्हाला आधुनिक, जलद, विश्वासार्ह, प्रतिसादशील इत्यादी वेब अनुप्रयोग बनवायचे आहेत.

सामान्य आधुनिक वेब अनुप्रयोग अनेक कारणांमुळे jQuery चा वापर कमी/बंद करत आहेत:

• आधुनिक JavaScript मध्ये jQuery ने पुरवलेल्या अनेक क्षमता टप्प्याटप्प्याने येत आहेत, त्यामुळे jQuery ची गरज कमी आहे, आणि विशिष्ट अंमलबजावणी पुरवणारी अधिक चांगली/जलद/लहान मॉड्यूल्स उपलब्ध आहेत

• jQuery चा व्यापक दृष्टिकोन थेट DOM हाताळणी करणे आहे, जो आधुनिक JavaScript फ्रेमवर्कसाठी (उदा. React, Vue, Svelte) अँटी-पॅटर्न आहे

• jQuery दोनदा लोड केले गेल्यास स्वतःमध्येच हस्तक्षेप करते, इत्यादी.

मर्यादा

आम्ही jQuery वापरणारे CSS फ्रेमवर्क निवडल्यास, आम्हाला jQuery आयात करणे भाग पडते. उदाहरणार्थ, Semantic UI jQuery वापरते, आणि Tachyons वापरत नाही.

आम्ही किमान स्वरूपाचे CSS फ्रेमवर्क निवडल्यास, आम्हाला आता किंवा लवकरच हवे असलेले फ्रेमवर्क घटक सोडून द्यावे लागतात. उदाहरणार्थ, Semantic UI इमेज कॅरोसेल पुरवते, आणि Tachyons पुरवत नाही.

मते

आम्ही कोणतेही फ्रेमवर्क न वापरण्याचा विचार केला. हे अजूनही व्यवहार्य वाटते, विशेषतः कारण CSS grid आमच्या प्रकल्पाला लागणारे बरेच काही पुरवते..

आम्ही जलद संक्षिप्त चाळणी वापरून अनेक 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 वापरणारे २२,००० पेक्षा जास्त स्पर्शबिंदू आहेत".

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) काम करण्यात वेळ घालवायचा नाही.

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

CSS वापरणाऱ्या सर्व सामान्य HTML वर परिणाम होतो.

संबंधित तत्त्वे

सहज पलटवता येण्याजोगे.

गतीची गरज.

टिपा

येथे कोणत्याही टिपा.