ఆర్కిటెక్చర్ నిర్ణయ రికార్డు: 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 గ్రిడ్ అందిస్తుంది కాబట్టి..

మేము శీఘ్ర షార్ట్లిస్ట్ ట్రయాజ్ ద్వారా అనేక CSS ఫ్రేమ్వర్క్లను పరిగణించాం: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons మొదలైనవి. లోతైన సమీక్ష కోసం మా రెండు ఎంపికలు Semantic UI (ఎందుకంటే ఇది అత్యంత అర్థవంతమైన విధానం కలది), Bulma (ఎందుకంటే ఇది మనకు ఇప్పుడు కావలసిన కాంపోనెంట్లను అందించే అత్యంత తేలికైన విధానం కలది).

మేము Semantic UIని పరిగణించాం. ఇది మా ప్రాజెక్ట్కు కావలసిన ట్యాబ్లు, గ్రిడ్లు, బటన్లు మొదలైన వాటితో సహా అనేక కాంపోనెంట్లను అందిస్తుంది. మేము Semantic UIతో రెండు విధాలుగా పైలట్ చేశాం: సాధారణ CDN ఫైళ్లను వాడటం, NPM రిపోలను వాడటం. స్టాటిక్ HTML పేజీలో Semantic UIతో విజయం సాధించాం, కానీ JavaScript SPA నిర్మించే మా సమయ పరిమితిలో విజయం సాధించలేదు (ప్రధానంగా jQuery లోడ్ సమస్యల వల్ల). మా కారణాలతోనే jQuery-రహిత వెర్షన్ సృష్టించమని ఇతర కోడర్లు Semantic UI డెవలపర్లను అడుగుతున్నారని కనుగొన్నాం. ఇతర కోడర్లు చాలా సంవత్సరాలుగా 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-రహితం అనేదానికి కఠినమైన "కాదు" అన్నారు) కూడా జాగ్రత్త సూచన ఉన్నట్లు కనిపిస్తోంది.

పర్యవసానాలు

మంచి non-jQuery CSS ఫ్రేమ్వర్క్ను కనుగొంటే, ఇది సాధారణంగా సహాయకరం, మొత్తంగా మంచిది.

సంబంధితాలు

సంబంధిత నిర్ణయాలు

మేము ఎంచుకునే CSS ఫ్రేమ్వర్క్ పరీక్షా సామర్థ్యాన్ని ప్రభావితం చేయవచ్చు.

సంబంధిత అవసరాలు

పూర్తిగా ఆధునికమైన యాప్ను వేగంగా అందించాలని మేము కోరుకుంటున్నాం.

పాత ఆధారితాలను (ముఖ్యంగా jQuery) వాడే పాత ఫ్రేమ్వర్క్లపై (ముఖ్యంగా Semantic UI) పని చేయడానికి సమయం వెచ్చించకూడదనుకుంటున్నాం.

సంబంధిత రచనలు

ఆ CSSను వాడే అన్ని సాధారణ HTMLను ప్రభావితం చేస్తుంది.

సంబంధిత సూత్రాలు

సులభంగా వెనక్కి తీసుకోగలగడం.

వేగం అవసరం.

గమనికలు

ఇక్కడ ఏవైనా గమనికలు.