আর্কিটেকচার সিদ্ধান্ত রেকর্ড: 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 ফ্রেমওয়ার্ক পাই, তাহলে সামগ্রিকভাবে এটি সাধারণত সহায়ক ও ভালো।

সম্পর্কিত

টীকা

এখানে যেকোনো টীকা।