Atomic Design — মৌলিক বিষয়, UI-তে পরমাণু, অণু এবং জীব

Atomic Design কী?

Atomic Design হল শ্রেণিবদ্ধ ইন্টারফেস সিস্টেম তৈরির একটি পদ্ধতি, যেখানে প্রতিটি UI উপাদান পাঁচটি স্তরের একটির অন্তর্গত: পরমাণু (মৌলিক উপাদান), অণু (পরমাণুর সংমিশ্রণ), জীব (জটিল ব্লক), টেমপ্লেট (পৃষ্ঠার ওয়্যারফ্রেম) এবং পৃষ্ঠা (ডেটা সহ নির্দিষ্ট স্ক্রিন)। রসায়ন থেকে রূপক নেওয়া হয়েছে: পরমাণু অণুতে একত্রিত হয়, অণু জীবতে, জীব টেমপ্লেটে, টেমপ্লেট বিষয়বস্তুতে পূর্ণ হয় এবং পৃষ্ঠায় পরিণত হয়।

পদ্ধতিটি ওয়েব ডিজাইনার ব্র্যাড ফ্রস্ট 2013 সালে "পৃষ্ঠা চিন্তা" সমস্যার প্রতিক্রিয়া হিসাবে প্রস্তাব করেছিলেন — যখন প্রতিটি নতুন স্ক্রিন বিদ্যমান উপাদানগুলি বিবেচনা না করে শূন্য থেকে ডিজাইন করা হয়। "Atomic Design" (2016) বইয়ে, ফ্রস্ট বড় কোম্পানিগুলির প্রকল্পে পদ্ধতির বাস্তবায়ন বর্ণনা করেছেন: IBM, GE, Starbucks। Nielsen Norman Group (2022) অনুসারে, Atomic Design প্রস্তুত উপাদানগুলির পুনর্ব্যবহারের মাধ্যমে নতুন স্ক্রিন ডিজাইনের সময় 30–50% হ্রাস করে।

Atomic Design ততটা প্রযুক্তি নয় যতটা UI সংগঠনের দর্শন। এটি একটি নির্দিষ্ট ফ্রেমওয়ার্কের সাথে আবদ্ধ নয় এবং ওয়েব (React, Vue) এবং মোবাইল ডেভেলপমেন্ট (Jetpack Compose, SwiftUI) উভয় ক্ষেত্রেই প্রযোজ্য। IT Sectr-এ, আমরা ক্লায়েন্টদের জন্য ডিজাইন সিস্টেম তৈরি করতে Atomic Design ব্যবহার করি: আমরা ডিজাইন পর্যায়ে পারমাণবিক উপাদানগুলি চিহ্নিত করি এবং সেগুলিকে Compose/SwiftUI-তে কোড উপাদানে স্থানান্তর করি।

পাঁচটি স্তর: পরমাণু, অণু, জীব, টেমপ্লেট, পৃষ্ঠা

Atomic Design-এর প্রতিটি স্তর নিজস্ব সমস্যা সমাধান করে এবং দায়িত্বের একটি কঠোর ক্ষেত্র রয়েছে। পরমাণু হল ইন্টারফেসের ক্ষুদ্রতম বিল্ডিং ব্লক যা অর্থ হারানো ছাড়া আরও ভাঙা যায় না: বাটন, টেক্সট ফিল্ড, আইকন, লেবেল, চেকবক্স। পরমাণুতে কোনও ব্যবসায়িক যুক্তি নেই এবং প্রসঙ্গের উপর নির্ভর করে না। তারা মৌলিক ভিজ্যুয়াল বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে: রং, আকার, ব্যবধান, টাইপোগ্রাফি।

অণু হল দুই বা ততোধিক পরমাণুর সংমিশ্রণ যা সরল কার্যকরী একক গঠন করে। একটি লেবেল এবং ত্রুটি বার্তা সহ ইনপুট ফিল্ড একটি অণু। একটি ছবি, নাম এবং মূল্য সহ পণ্য কার্ড একটি অণু। অণুতে মৌলিক যুক্তি (ত্রুটি দেখান/লুকান) থাকতে পারে, কিন্তু ব্যবসায়িক প্রক্রিয়া থাকে না। অণু হল প্রথম স্তর যেখানে উপাদানগুলি বিভিন্ন স্ক্রিন জুড়ে পুনর্ব্যবহারযোগ্য হয়।

জীব হল অণু এবং পরমাণু দ্বারা গঠিত জটিল ইন্টারফেস ব্লক যা অ্যাপ্লিকেশনের একটি নির্দিষ্ট ফাংশন বাস্তবায়ন করে। একটি লগইন ফর্ম (ইমেইল ফিল্ড, পাসওয়ার্ড ফিল্ড, সাবমিট বাটন, "পাসওয়ার্ড ভুলে গেছেন" লিঙ্ক) একটি জীব। লোগো, অনুসন্ধান এবং নেভিগেশন সহ হেডার একটি জীব। জীবগুলিতে ব্যবসায়িক যুক্তি থাকতে পারে এবং API অ্যাক্সেস করতে পারে, তবে শুধুমাত্র তাদের ফাংশনের মধ্যে।

টেমপ্লেট হল পৃষ্ঠার ওয়্যারফ্রেম যা নির্দিষ্ট বিষয়বস্তু ছাড়া স্ক্রিনে জীবের বিন্যাস নির্ধারণ করে। টেমপ্লেট গ্রিড, কলাম, বিষয়বস্তু অঞ্চল নির্ধারণ করে — কোড স্তরে একটি ওয়্যারফ্রেম। টেমপ্লেটে কোনও ডেটা থাকে না, শুধুমাত্র প্লেসহোল্ডার থাকে। তারা বিষয়বস্তু পূরণের আগে পৃষ্ঠার কাঠামো মূল্যায়নের অনুমতি দেয়।

পৃষ্ঠা হল নির্দিষ্ট অ্যাপ্লিকেশন স্ক্রিন যেখানে টেমপ্লেট বাস্তব ডেটা দিয়ে পূর্ণ হয়। এই স্তরে, বাস্তব বিষয়বস্তু (দীর্ঘ স্ট্রিং, অনুপস্থিত ডেটা, ত্রুটি) সহ উপাদানগুলি কেমন দেখায় তা যাচাই করা হয়। পৃষ্ঠা হল একমাত্র স্তর যা শেষ ব্যবহারকারী দেখে। পৃষ্ঠা স্তরের পরিবর্তনগুলি পরমাণু, অণু এবং জীবকে প্রভাবিত করবে না — যদি কোনও উপাদান পরিবর্তন করার প্রয়োজন হয়, পরিবর্তনটি তার স্তরে করা হয়, এবং পৃষ্ঠা স্বয়ংক্রিয়ভাবে এটি গ্রহণ করে।

Atomic Design-এর সুবিধা এবং সীমাবদ্ধতা

সুবিধা — Atomic Design-এর সুবিধাগুলি ইন্টারফেস স্কেল করার সময় স্পষ্ট হয়। একটি একক উপাদান লাইব্রেরি ভিজ্যুয়াল ধারাবাহিকতা নিশ্চিত করে: একটি বাটন সমস্ত স্ক্রিনে একই রকম দেখায় কারণ এটি একই পরমাণু। ব্র্যাড ফ্রস্ট (2016) অনুসারে, Atomic Design বাস্তবায়নকারী সংস্থাগুলি প্রস্তুত অণু এবং জীবের পুনর্ব্যবহারের মাধ্যমে নতুন স্ক্রিন বিকাশের সময় 30–50% হ্রাস করে।

সীমাবদ্ধতা — Atomic Design অ্যাপ্লিকেশন অবস্থা কীভাবে পরিচালনা করতে হয় তা বর্ণনা করে না। পদ্ধতিটি শুধুমাত্র "UI উপাদানগুলি কীভাবে সংগঠিত করবেন" প্রশ্নের উত্তর দেয়, কিন্তু ব্যবসায়িক যুক্তি, রাউটিং বা ডেটা পরিচালনাকে সম্বোধন করে না। দ্বিতীয় সীমাবদ্ধতা হল সীমানা নির্ধারণের অসুবিধা: একটি অণু কোথায় শেষ হয় এবং একটি জীব কোথায় শুরু হয়? বাস্তবে, সীমানা অস্পষ্ট, এবং বিভিন্ন দল একই উপাদানকে ভিন্নভাবে শ্রেণিবদ্ধ করতে পারে। ডিজাইন টোকেন এবং উপাদান ক্যাটালগে (Storybook, Jetpack Compose Preview) নিয়ম প্রতিষ্ঠা করার সুপারিশ করা হয়।

তৃতীয় সীমাবদ্ধতা হল ছোট প্রকল্পের জন্য অত্যধিক বিমূর্ততা। যদি একটি অ্যাপ্লিকেশন 5টি স্ক্রিন নিয়ে গঠিত হয়, তাহলে পরমাণু এবং অণুর একটি শ্রেণিবিন্যাস তৈরি করা অপ্রয়োজনীয় কাজ। Atomic Design তখনই উপকারী হয় যখন স্ক্রিনের সংখ্যা 20 ছাড়িয়ে যায় এবং উপাদানগুলি বিভিন্ন পৃষ্ঠায় পুনর্ব্যবহৃত হয়।

Atomic Design বনাম Feature-Sliced Design

Atomic Design এবং Feature-Sliced Design (FSD) বিভিন্ন সমস্যার সমাধান করে এবং একসাথে ব্যবহার করা যেতে পারে। Atomic Design হল UI উপাদানগুলি সংগঠিত করার একটি পদ্ধতি, FSD হল ব্যবসায়িক স্তর এবং সম্পূর্ণ অ্যাপ্লিকেশন সংগঠিত করার একটি পদ্ধতি। Atomic Design প্রশ্নের উত্তর দেয় "কীভাবে UI-কে পুনর্ব্যবহারযোগ্য অংশে ভাঙবেন", FSD উত্তর দেয় "ব্যবসায়িক বৈশিষ্ট্যগুলির চারপাশে কোড কীভাবে সংগঠিত করবেন"। তারা প্রতিযোগিতা করে না: আপনার কাছে features এবং entities স্তর সহ একটি FSD কাঠামো থাকতে পারে এবং প্রতিটি স্তরের ভিতরে UI উপাদানগুলি সংগঠিত করতে Atomic Design ব্যবহার করতে পারেন।

সাধারণ সংমিশ্রণ: FSD অ্যাপ্লিকেশনের মডুলার কাঠামো (স্তর, স্লাইস) সংজ্ঞায়িত করে, Atomic Design প্রতিটি স্লাইসের ভিতরে UI উপাদানগুলির অভ্যন্তরীণ কাঠামো সংজ্ঞায়িত করে। উদাহরণস্বরূপ, feature.auth স্লাইসে Atomic Design নিয়ম অনুসারে একত্রিত অণু (LoginForm, PasswordInput) এবং জীব (AuthPage) থাকে। শেয়ার্ড স্তরে সমস্ত বৈশিষ্ট্য জুড়ে পুনর্ব্যবহৃত পরমাণু (Button, Input, Label) থাকে।

মোবাইল অ্যাপ্লিকেশনে Atomic Design: Compose এবং SwiftUI

Jetpack Compose এবং SwiftUI উপাদান সংমিশ্রণের মাধ্যমে স্বাভাবিকভাবেই Atomic Design শ্রেণিবিন্যাস সমর্থন করে। পরমাণু Compose-এ মৌলিক @Composable ফাংশন: AppButton, AppTextField, AppCheckbox। প্রতিটি ফাংশন কাস্টমাইজেশন প্যারামিটার (রং, আকার, অবস্থা) গ্রহণ করে এবং কোনও ব্যবসায়িক যুক্তি ধারণ করে না। পরমাণুগুলি শেয়ার্ড স্তরে সংজ্ঞায়িত হয় এবং UI-কিট হিসাবে রপ্তানি করা হয়।

অণু হল @Composable ফাংশন যা একাধিক পরমাণুকে একত্রিত করে: LabeledTextField (লেবেল + ইনপুট ফিল্ড + ত্রুটি বার্তা), ProductCard (ছবি + নাম + মূল্য)। অণুতে মৌলিক অবস্থা (ফিল্ড বৈধতা) থাকতে পারে, কিন্তু API বা ViewModel অ্যাক্সেস করে না। এগুলি বিভিন্ন জীবে পুনর্ব্যবহৃত হয়।

জীব হল বৈশিষ্ট্য স্তরে @Composable ফাংশন: LoginForm (ইমেলের জন্য LabeledTextField + পাসওয়ার্ডের জন্য LabeledTextField + সাবমিট AppButton + পুনরুদ্ধার লিঙ্ক)। জীবগুলি Intent ফাংশনের মাধ্যমে ViewModel-এর সাথে কাজ করে এবং ব্যবসায়িক যুক্তি ধারণ করতে পারে। SwiftUI-তে, @ViewBuilder এবং কাস্টম View কাঠামোর মাধ্যমে একই রকম শ্রেণিবিন্যাস তৈরি করা হয়।

SwiftUI-তে, একটি পরমাণু হল কাস্টম View কাঠামো AppButton, একটি অণু হল HStack-এ লেবেল সহ ইনপুট ফিল্ড, একটি জীব হল লগইন ফর্ম। এই কাঠামোটি সমস্ত স্ক্রিন জুড়ে উপাদানগুলির পুনর্ব্যবহারের অনুমতি দেয় — একটি পরমাণু (বাটনের রং) পরিবর্তন করলে স্বয়ংক্রিয়ভাবে সমস্ত স্ক্রিনে প্রয়োগ হয়। ডিজাইন সিস্টেমের সাথে Atomic Design-এর সংমিশ্রণ প্রতিটি স্ক্রিনের ম্যানুয়াল নিয়ন্ত্রণ ছাড়াই ইন্টারফেসের ধারাবাহিকতা নিশ্চিত করে।