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 سلائس میں مالیکیول (LoginForm، PasswordInput) اور جاندار (AuthPage) شامل ہیں جو Atomic Design کے قواعد کے مطابق جمع کیے گئے ہیں۔ مشترکہ تہہ میں تمام خصوصیات میں دوبارہ استعمال ہونے والے ایٹم (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 کا ڈیزائن سسٹم کے ساتھ امتزاج ہر اسکرین کے دستی کنٹرول کے بغیر انٹرفیس کی مستقل مزاجی کو یقینی بناتا ہے۔