આર્કિટેક્ચર નિર્ણય રેકોર્ડ: 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 પ્રોજેક્ટમાં 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) પર કામ કરવામાં સમય ગાળવા માગતા નથી.

સંબંધિત આર્ટિફેક્ટ્સ

CSS વાપરનાર તમામ સામાન્ય HTML ને અસર કરે છે.

સંબંધિત સિદ્ધાંતો

સરળતાથી પલટાવી શકાય તેવું.

ઝડપની જરૂરિયાત.

નોંધો

અહીં કોઈપણ નોંધ.