آرکیٹیکچر فیصلے کا ریکارڈ: 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 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 فریم ورک مل جائے تو یہ عمومی طور پر مددگار اور اچھا ہے۔

متعلقہ

نوٹس

یہاں کوئی بھی نوٹس۔