Frontend Academy · درس

التصميم الذري: الذرات والجزيئات والكائنات

صنّف المكوّنات إلى ذرات وجزيئات وكائنات وقوالب وصفحات لإنشاء مفردات مشتركة بين التصميم والهندسة

التصميم الذري: الذرات والجزيئات والكائنات درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما التصميم الذري؟

التصميم الذري (Brad Frost، 2013) هو نموذج ذهني لتنظيم مكوّنات واجهة المستخدم في خمسة مستويات من التعقيد: الذرات، والجزيئات، والكائنات، والقوالب، والصفحات. ويمنح المصممين والمهندسين مفردات مشتركة.

الذرات — أصغر لبنات البناء

مكوّنات ذات غرض واحد لا يمكن تفكيكها أكثر. مثل الأزرار وحقول الإدخال والأيقونات والتسميات وعينات الألوان. وهي مجردة وقابلة لإعادة الاستخدام في أي سياق.

// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>

الجزيئات — مجموعات مكوّنات بسيطة

تجمع الذرات لتنفيذ وظيفة مفيدة. فـSearchBar يتكوّن من Input + Button + Icon. ويتكوّن FormField من Label + Input + ErrorMessage. وتظل هذه المكوّنات عامة الغرض.

function SearchBar({ onSearch }) {
  return (
    <div className="search-bar">
      <Input placeholder="Search..." />
      <Button onClick={onSearch}>
        <Icon name="search" />
      </Button>
    </div>
  );
}

الكائنات — أقسام معقدة

تكوينات أكبر تشكّل أقسامًا مميزة من الواجهة: مثل Header (شعار + شريط تنقل + شريط بحث + قائمة مستخدم)، وProductCard (صورة + عنوان + سعر + زر)، وSignupForm. وهي أكثر وعيًا بالسياق.

function Header({ user }) {
  return (
    <header>
      <Logo />
      <Navigation links={navLinks} />
      <SearchBar onSearch={handleSearch} />
      <UserMenu user={user} />
    </header>
  );
}

القوالب — هياكل الصفحات

مخططات بمستوى الإطار السلكي ترتب الكائنات من دون محتوى فعلي. يحتوي BlogTemplate على Header، وعنصر Main يضم مواضع Article، وعنصر Sidebar.

function BlogTemplate({ header, article, sidebar, footer }) {
  return (
    <div className="blog-layout">
      {header}
      <div className="main">
        <main>{article}</main>
        <aside>{sidebar}</aside>
      </div>
      {footer}
    </div>
  );
}

الصفحات — المحتوى الفعلي

قوالب تحتوي على محتوى فعلي. تعرض صفحة /blog/[slug] قالب BlogTemplate مع المقالة الفعلية، وعناصر Sidebar، والعناصر المحيطة بالواجهة.

بنية المجلدات

تنظّم فرق كثيرة المكوّنات بحسب المستوى.

src/components/
  atoms/
    Button.tsx
    Input.tsx
    Icon.tsx
  molecules/
    SearchBar.tsx
    FormField.tsx
  organisms/
    Header.tsx
    ProductCard.tsx
  templates/
    BlogTemplate.tsx
  pages/
    BlogPage.tsx

الفوائد

توفّر مفردات مشتركة بين المصممين والمطورين. وتشجّع على التركيب بدلًا من التكرار. وتسهّل بناء أنظمة التصميم. وتعزّز التفكير في أصغر وحدة قابلة لإعادة الاستخدام أولًا.

انتقاد: يصعب التصنيف الصارم

في الواقع، يكون الحد الفاصل بين الجزيء والكائن غير واضح. وينتهي الأمر بفرق كثيرة إلى جدالات حول موضع كل مكوّن، مما يقوّض هدف الوضوح.

بديل حديث: التنظيم بحسب الميزة

تفضّل العديد من قواعد React/Vue البرمجية الكبيرة التنظيم بحسب الميزة (auth/ وcheckout/ وdashboard/) بدلًا من المستويات الذرية الصارمة. ولا يزال التصميم الذري مناسبًا لطبقة نظام التصميم المشتركة.

التصميم الذري في Storybook

يتوافق Storybook جيدًا مع التصميم الذري؛ إذ تجعل الفئات الرئيسية Atoms وMolecules وOrganisms مكتبة المكوّنات سهلة التصفح.

متى تستخدم التصميم الذري؟

يناسب التصميم الذري: مكتبات أنظمة التصميم المشتركة بين عدة تطبيقات، والفرق الكبيرة التي تحتاج إلى نموذج ذهني مشترك، والمشاريع التي يشارك فيها المصممون بنشاط. وتجنّبه في: التطبيقات الصغيرة، والنماذج الأولية، وتطبيقات SPA كثيفة الميزات حيث يكون تجميع الملفات مع الميزة أكثر أهمية.

اختبار سريع

في التصميم الذري، ما نوع المكوّن الذي يمثله SearchBar المبني من Input + Button + Icon؟

مراجعة: التصميم الذري

خمسة مستويات: الذرات (Button وInput وIcon)، والجزيئات (SearchBar وFormField)، والكائنات (Header وProductCard)، والقوالب (التخطيطات)، والصفحات (المحتوى الفعلي). مفردات مشتركة وتفكير يضع التركيب أولًا. تعكس بنية المجلدات هذه الطبقات. يناسب التصميم الذري أنظمة التصميم المشتركة، بينما تتفوق المجلدات القائمة على الميزات غالبًا على التصميم الذري في شيفرة التطبيقات.

الأسئلة الشائعة

هل درس «التصميم الذري: الذرات والجزيئات والكائنات» مجاني؟

نعم — نص درس «التصميم الذري: الذرات والجزيئات والكائنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «التصميم الذري: الذرات والجزيئات والكائنات»؟

صنّف المكوّنات إلى ذرات وجزيئات وكائنات وقوالب وصفحات لإنشاء مفردات مشتركة بين التصميم والهندسة تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «التصميم الذري: الذرات والجزيئات والكائنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التصميم الذري: الذرات والجزيئات والكائنات
إعداد Monorepo باستخدام Turborepo
الواجهات الأمامية المصغّرة: Module Federation
هيكل المجلدات القائم على الميزات

← العودة إلى Frontend Academy