৭০+ কম্পোনেন্টের সবচেয়ে সেরা রিয়াক্ট UI ফ্রেমওয়ার্কঃ Ant Design

বছরখানেক আগের কথা, আমি তখন UI ফ্রেমওয়ার্ক হিসেবে ধুমায়ে সব প্রোজেক্টে Mantine ইউজ করছি। Mantine এর বেস্ট বিষয় হচ্ছে অনেক মিনিমাল একটা লুক দেয় + এর হুকগুলাও বেশ কাজের। সে সময়েই আমি শাকিল ভাই ( আমার ভার্সিটির এল্মনাই বড় ভাই ) -এর স্টার্টাপে ফ্রন্টেন্ড ডেভেলপার হিসেবে জব শুরু করি। জবের প্রথম দিকে একটা প্রোজেক্টে আমি Mantine ইউজ করতে গেলে উনি সাজেস্ট করেন Ant Design ইউজ করতে। উনার কথাবার্তা শুনে বুঝলাম উনি আবার Ant Design এর ফ্যান। এদিকে আমি তো Mantine ছাড়া কিছু বুঝিনা। তবে শেষ অবধি উনার কথা শুনে মনে হলো দেখি একবার Ant Design ট্রাই করেই।

ঘটনা বলছি গত বছর জুনের। সেই যে শুরু, আজ অবধি এভ্রি সিঙ্গেল প্রোজেক্টে আমি Ant Design ইউজ করে চলেছি। বিশাল কম্পোনেন্ট লাইব্রেরি, এত জোস স্টেট বেজড ইফেক্ট আর কাস্টমাইজেশনের যে বিশাল স্বাধীনতা সব মিলিয়ে কখনো মনে হয়নি এখান থেকে অন্য কোনো ফ্রেমওয়ার্কে যাওয়ার দরকার আছে।

যেহেতু আমিও এখন Ant Design এর পাগলা ফ্যান, তাই আপনাদেরও ফ্যান বানানোর জন্য কিছু লোভ দেখাবো। চলুন দেখে নেওয়া যাক,

  1. Tailwind এর সাথে সিম্লেস ইন্টিগ্রেশন।
    দেখেন ভাই Tailwind এর যৌক্তিকতা বা কেন দরকার সেটা নিয়ে নিশ্চয় বলে সময় নষ্ট করা ঠিক হবেনা, তাইনা? Mantine এ আমি সবচেয়ে বাজেভাবে মিস করতাম Tailwind এর সিমলেস ইন্টিগ্রেশন। মানে কাজ করতো বাট ঠিক নির্ভর করার মতো না। অন্যদিকে Ant Design এ কখনো সমস্যা মনে হয়নি। কনফিগারেশনেও প্যারা নাই কোনো। যাস্ট Tailwind কনফিগে important অপশন true করে দিলেই নেসেসারি স্টাইল Tailwind এর ক্লাস দিয়ে রিপ্লেস করে দেয়।

  2. ৭০+ কম্পোনেন্ট লাইব্রেরি
    আচ্ছা ভাই বলেন তো লাস্ট কোন প্রোজেক্টে আপনার টাইম্লাইন কম্পোনেন্ট ইউজ করা লাগছে? বা ট্রান্সফার কম্পোনেন্ট? আচ্ছা এসব নাহয় তেমন লাগেনা, বাট স্কেলেটন, লোডিং স্পিনার, পেজিনেশন, ব্রেডক্রাম্ব এইসব তো অহরহ ইউজ করা লাগে তাইনা?
    Ant Design এর ফ্যান হওয়ার প্রথম রিজন ছিল এর এই বিশাল কম্পোনেন্ট সেট। মানে একদম ডেইলি ইউজেস কম্পোনেন্ট থেকে শুরু করে হাজার বছরে একদিন লাগবে এরকম কম্পোনেন্টও আছে। কম্পোনেন্ট গুলা ঘুরে ঘুরে দেখলে আপনার মনে হবে, “The component library we never knew we needed.” এখান ( https://ant.design/components/overview/ ) থেকে একটু দেখে আসতে পারেন কম্পোনেন্ট গুলো।

  3. কম্পোনেন্টের এভ্রি সিঙ্গেল জিনিস কাস্টোমাইজেবল।
    একটা ভালো UI ফ্রেমওয়ার্কের জন্য আমি মনে করি সবচেয়ে ইম্পরট্যান্ট বিষয় হচ্ছে কোনো কাস্টমাইজেশন ছাড়াই একটা ডিসেন্ট লুক + ফিচার প্রোভাইড করা। আবার একই সঙ্গে প্রত্যেক্টা আইটেম যেন কাস্টোমাইজ করে টূইক করা যায় সেই সুযোগও থাকতে হবে। এই দুইটাই মেইন্টেইন করতে পারে এরকম ফ্রেমওয়ার্ক কমই আছে। আর সেই কম সংখ্যক ফ্রেমওয়ার্কের মধ্যে Ant Design শীর্ষে থাকবে।

  4. থিমিং
    এখন এইটা ভায়াবল না যে আপনি কম্পোনেন্ট ধরে ধরে আপনার ডিজাইন টোকেনের সাথে মিলায়ে কালার স্কিম ঠিক করবেন, তাইনা? সেজন্য Ant এ আপনি পাচ্ছেন গ্লোবাল + কম্পোনেন্ট বেজড কাস্টমাইজেশন।

  5. রিচ ডকুমেন্টেশন + প্রচুর এক্সাম্পল।
    ডকুমেন্টেশন টা বেশ রিচ + অল্মোস্ট সব মেজর API এর এক্সাম্পল দেয়া আছে।

এইতো বেশ কিছু কারণ বললাম। আরো বিস্তারিত বলতে ইচ্ছা করছে, কিন্তু ভালো হয় নিজে নিজে ঘুরে দেখলে। আমি জাস্ট কয়েকটা জিনিস বলি আপনি একটু ঘুরে দেখে আসেন কত জোসঃ

এরকম আরো অনেক জোস জোস কম্পোনেন্ট আছে যা আপনি অন্য কোনো ফ্রেমওয়ার্কে পাবেন বলে মনে হয়না।

সে যায় হোক, একটু নাড়াচাড়া করে দেখে যদি মনে হয় ইউজ করে দেখতে পারেন। বিফলে মূল্য ফেরত :3

ওহ হ্যাঁ, সব ভালো জিনিসের মধ্যে একটা সমস্যার কথা বলা দরকার। Ant এর Form কম্পোনেন্টটা মূলত React Hook Form ইউজ করে। এই ফর্মের ইমপ্লিমেনশনে কিছু বাগ আছে যতদূর খেয়াল করেছি। যদিও বাইপাস করে ফিক্স করা যায়। ওপেন সোর্স তো কোনো এক সময় কন্ট্রিবিউট করার ট্রাই করা যায়।

যায় হোক, টাটা। জানায়েন ইউজ করে কেমন লাগলো।

5 Likes

Good Content. Thanks for sharing.

1 Like

Thank you for your kind comment.

দারুণ শেয়ার ভাই, খুব সুন্দর ভাবে গুছিয়ে লিখেছেন। নিয়মিত এরকম লেখা আরো চাই :heart:

1 Like