Introduction

আমরা বড় কোনো প্রজেক্টে যাওয়ার আগে কিছু ছোট ছোট ইউটিলিটি টুলস আছে, সেগুলো নিয়ে আগে আলোচনা করবো। সেরকম একটি ইউটিলিটি টুলস হলো Material UI বা বর্তমানে MUI. রিয়্যাক্ট পারি অথচ MUI পারি না এটা আসলে শুনতে একটু বেখাপ্পা লাগে। এমন না যে এর পুরো ডকুমেন্টেশন মুখস্থ করে ফেলতে হবে। জাস্ট আইডিয়া নিয়ে রাখবেন। যখন কাজ করবেন, তখন এর ডকুমেন্টেশনে সব দেয়া আছে, সেখান থেকে দেখে কাজ করবেন। কারণ ভার্সন চেইঞ্জের সাথে সাথে অনেক কিছুই চেইঞ্জ হয়। আপনি যদি কিভাবে ডকুমেন্টেশন দেখে একটা টুলস ব্যবহার করতে হয় সেটা বুঝতে পারেন তাহলে যেকোনো টুলস নিয়ে কাজ করতে পারবেন। আমরা এবার একটু MUI নিয়ে জানার চেষ্টা করবো।

MUI / Material-UI

আমরা MUI কেন শিখবো, এটা আমাদের কি কি সুবিধা দিচ্ছে, শেখার প্রয়োজনটাই বা কি এসব নিয়ে জানার চেষ্টা করবো। আমরা যখন ওয়েব ডেভেলপমেন্ট শুরু করেছিলাম বুটস্ট্র্যাপ নিয়ে কাজ করিনি এমন মানুষ খুব কমই আছে। বুটস্ট্র্যাপ যেমন তাদের নিজস্ব ডিজাইন সিস্টেমের উপর ভিত্তি করে তৈরি করা হয়েছে, MUI তৈরি হয়েছে গুগলের ম্যাটেরিয়াল ডিজাইন নামক ডিজাইন সিস্টেম থিওরির উপর ভিত্তি করে। MUI মূলত আমাদের UI সাপোর্ট দিচ্ছে। এখন UI এর কি প্রয়োজন যদি আমাদের ম্যাটেরিয়ালাইজ সিএসএস থাকে। কারণ MUI এর যে ডিজাইন সে ডিজাইন অলরেডি ম্যাটেরিয়ালাইজ সিএসএসের মধ্যে আছে। তো সেই সিএসএসের ক্লাস কল করে দিলেই তো আশা করা যায় আমরা সেই ডিজাইন পাবো। হ্যাঁ, অবশ্যই আমরা তা পাবো। কিন্তু সমস্যা হলো রিয়্যাক্ট একটু অন্যভাবে চিন্তা করে। রিয়্যাক্টের সবকিছু ক্লাসকেন্দ্রিক না, কম্পোনেন্টকেন্দ্রিক। এটাই হলো পার্থক্য। এবং এই পার্থ্যক্যের কারণে আমরা MUI এর মতো একটা UI লাইব্রেরি ব্যবহার করি রিয়্যাক্টের জন্য। আমরা যে styled-component ব্যবহার করি সেখানে কি করি? কিছু সিএসএস লিখি। কিন্তু আল্টিমেটলি সেটা আমাদের একটা কম্পোনেন্ট রিটার্ন করছে। তার মানে যাই করি না কেন আমরা রিয়্যাক্টে দিনশেষে আমরা সেই কম্পোনেন্টই পাচ্ছি। MUI আমাদেরকে সেই কম্পোনেন্টই দিচ্ছে। ধরেন আমরা একটা কার্ড বানাতে চাইছি। তাহলে আমরা কিভাবে লিখতাম?

<div class='.card'>
    <div class='.card-body'></div>
</div>

এভাবেই তো লিখতাম। এখন MUI তেও এরকম কিছু এইচটিএমএল, সিএসএস লেখা আছে। কিন্তু দিনশেষে তারা আমাদের দিচ্ছে কম্পোনেন্ট। যদি এখন কার্ড বানাতে হয় আমরা সরাসরি <Card></Card> এভাবে কম্পোনেন্ট আকারে লিখতে পারবো। এই কনসেপ্টের উপর ভিত্তি করে রিয়্যাক্টের যত UI লাইব্রেরি আছে সব বানানো হয়েছে। অর্থাৎ আমাদের এখন আর সিএসএস লিখতে হবে না। আমরা ট্যাগ আকারে কম্পোনেন্ট ব্যবহার করেই কাজ করতে পারবো। আর যতটুকু মডিফিকেশন দরকার সেগুলোকে আমরা অ্যাট্রিবিউট আকারে করতে পারছি যেগুলোকে রিয়্যাক্টের ভাষায় বলে props. এভাবে MUI আমাদের সুন্দরভাবে গুছানো একটা UI প্রোভাইড করে। মোটামুটি একজন ডেভেলপারের একটা অ্যাপ্লিকেশন তৈরি করতে যা যা ফিচার লাগে প্রায় সবই MUI প্রোভাইড করার চেষ্টা করে। আর যেগুলো থাকবে না, সেগুলো তাদের ছোট ছোট কম্পোনেন্ট দিয়ে আমরা আমাদের মতো করে বানিয়ে ফেলতে পারি।

এখন যদি আমাদের MUI এর নিজস্ব ডিজাইন পছন্দ না হয় তাহলে কি করতে পারি। আমরা styled-components, emotion, MUI এর নিজস্ব সিস্টেম ব্যবহার করে আমাদের মতো করে UI আমরা ডিজাইন করে ফেলতে পারি। MUI যেহেতু একটু লাইব্রেরি তারা আমাদেরকে আমাদের মতো করে কাস্টমাইজ করার স্বাধীনতা দিয়ে রেখেছে।

যদি আমাদের থীম চেইঞ্জ হয় তাহলে তো সব জায়গায় ম্যানুয়েলি আমাদের থীম অনুযায়ী চেইঞ্জ করা সম্ভব না। সেক্ষেত্রে আমাদের দরকার একটা থীম। MUI আমাদেরকে একটা থীমও প্রোভাইড করে যার মাধ্যমে আমরা পুরো প্রজেক্টের থীম আমাদের মতো করে কাস্টমাইজ করতে পারি। শুধু একটা অবজেক্ট বানাতে হবে এবং ThemeProvider নামক context provider এর মাধ্যমে আমাদের থীম ব্যবহার করতে পারবো। একবার থীম কানেক্ট করে দিলে আমরা প্রজেক্টের যেকোনো জায়গা থেকে আমাদের থীমটা ব্যবহার করতে পারবো। যদি পরবর্তীতে কোনো জায়গায় পরিবর্তনের প্রয়োজন হয় আমরা এক জায়গায় পরিবর্তন করলেই বাকি সব জায়গায় সেই পরিবর্তন হয়ে যাবে।

এখন কখনও কখনও শুধু UI হলেই হয় না, সেই সাথে কিছু অ্যাকশনের প্রয়োজন হয়। ধরেন একটা Modal বা Drop-down menu. এগুলোতে অ্যাকশনের প্রয়োজন হয়। এসব অ্যাকশনও MUI আমাদেরকে প্রোভাইড করে রিয়্যাক্টের মতো করেই।

সবচেয়ে বড় যে সুবিধা MUI আমাদের দিচ্ছে সেটা হলো লেআউট। আমরা জানি UI বানানোই সব না। সেটাকে রেস্পন্সিভ করা লাগে। MUI এর মাধ্যমে আমরা সহজে রেস্পন্সিভ করতে পারি। তার জন্য আলাদাভাবে কোনো পরিশ্রম করা লাগে না।

তার মানে বেশিরভার ক্ষেত্রে আমরা MUI এ নিচের বিষয়গুলো দেখতে পাবো।

• কিছু Prebuild কম্পোনেন্ট।

• এই কম্পোনেন্টগুলোকে অ্যাকশনেবল করার জন্য কিছু হ্যান্ডলার ফাংশন।

• কিছু স্টেট। যা আমাদের নিজেদেরই নিতে হবে যাতে অ্যাপ্লিকেশনের কন্ট্রোল আমাদের হাতেই থাকে।

• আর কিছু প্রপ্স। কম্পোনেন্টের কিছু চেইঞ্জের জন্য আমাদের প্রপ্স পাস করতে হবে।

উপরের কথাগুলো মোটামুটি রিয়্যাক্টের জন্য যতো UI লাইব্রেরি বা ফ্রেমওয়ার্ক আছে সবগুলোর জন্যই প্রযোজ্য।

এরপর ক্লাসে যা দেখানো হয়েছে তা নিয়ে আর লেখার প্রয়োজন আছে বলে মনে হয় না। কারণ MUI এর ওয়েব পেইজের স্ট্রাকচার চেইঞ্জ হতে পারে। ভার্সন চেইঞ্জের কারণেও অনেক পরিবর্তন হতে পারে, যা এখন লিখলে তার সাথে নাও মিলতে পারে। তাই আমার পরামর্শ থাকবে আপনারা লেকচার দেখে কিভাবে ডকুমেন্টেশন ব্যবহার করতে হয় সেটা বুঝে নিন। এরপর যখন যেই ভার্সন আসবে সেভাবেই ডকুমেন্টেশন দেখে আপনারা MUI ব্যবহার করবেন। MUI সম্পর্কে জানার জন্য যা যা দরকার মোটামুটি সব আমি লিখে দিয়েছি। বাকিটা হলো কিভাবে ডকুমেন্টেশন ব্যবহার করে কাজ করতে হয় তা।

Source Code

এই লেকচারের সমস্ত সোর্স কোড আপনারা এই লিংক এ পাবেন।