زمان بنينا “الصفحات”. home.html، about.html، contact.html. إذا أردت تغيير لون الزر، كان عليك تحرير 50 ملفًا. واليوم، نقوم ببناء الأنظمة. صاغ براد فروست مصطلح التصميم الذري. إنه يؤطر واجهة المستخدم كتسلسل هرمي بيولوجي. إنه يتماشى تمامًا مع الهندسة القائمة على المكونات (React، Vue، Svelte). إذا كنت لا تستخدم هذا، فمن المحتمل أن تكون قاعدة التعليمات البرمجية الخاصة بك عبارة عن فوضى معكرونة من الأنماط غير المتناسقة. أنت تقوم بنسخ فئات CSS بدلاً من استيراد المكونات.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

لماذا يفرض قانون ميزون التصميم الذري

نحن لا نبني “مواقع الويب”. نحن نبني “المنتجات”. المنتجات تعيش لمدة 5 سنوات. بدون نظام التصميم، يتعفن المنتج. التصميم الذري هو اللقاح ضد “UI Rot”. إنه يجبر المطورين على التفكير في “الأنماط” وليس “الصفحات”. إنها تتيح لنا توسيع نطاق الفريق. يمكن لـ 10 مطورين العمل على نفس التطبيق دون أن يتدخل بعضهم البعض.

1. التسلسل الهرمي

الذرات

أصغر اللبنات. ولا يمكن تقسيمها أكثر دون التوقف عن العمل.

أمثلة: <Button>، <Input>، <Label>، <Icon>، <ColorSwatch>.

الكود:

زر ثابت = ({ متغير، أطفال }) => {
  إرجاع <button className={`btn-${variant}`}>{children}</button>
}

الذرات لها أنماط عالمية ولكن ليس لها منطق تطبيقي.

الجزيئات

ترتبط مجموعات من الذرات معًا لتعمل كوحدة واحدة.

مثال: <SearchForm> (الإدخال + الزر).
مثال: <ProductCard> (الصورة + العنوان + السعر + الزر).
الفلسفة: افعل شيئًا واحدًا جيدًا. قد يكون للجزيء حالة واجهة مستخدم محلية (“isOpen”)، ولكن نادرًا ما يكون له منطق عمل.

الكائنات الحية

انضمت مجموعات من الجزيئات لتشكل قسمًا متميزًا من الواجهة.

مثال: <Header> (الشعار + التنقل + SearchForm + CartIcon).
مثال: <ProductGrid> (قائمة بطاقات المنتجات).
الحالة: غالبًا ما تتحكم الكائنات الحية في “الحالة المحلية” أو تتواصل مع واجهة برمجة التطبيقات (API). إنها المكونات “الذكية”.

القوالب

كائنات على مستوى الصفحة تضع المكونات في التخطيط.

مثال: <MainLayout> (الرأس + الشريط الجانبي + المحتوى + التذييل).
السياق: يحددون الشبكة، وليس المحتوى. إنهم يتعاملون مع الاستجابة.

الصفحات

حالات محددة من القوالب ذات المحتوى الحقيقي.

مثال: الصفحة الرئيسية، صفحة تفاصيل المنتج. تقوم الصفحات بتوصيل جهاز التوجيه بالمتجر (Redux/Zustand) وتمرير البيانات إلى الكائنات الحية.

2. ما أهمية هذا الأمر بالنسبة لجودة التعليمات البرمجية

قابلية إعادة الاستخدام

إذا قمت ببناء ذرة <زر> جيدة، فإنك تستخدمها 1000 مرة. إذا قمت بإصلاح خطأ في الزر (على سبيل المثال، إضافة أداة تحميل دوارة)، يمكنك إصلاحه في 1000 مكان على الفور. هذا هو الرافعة المالية.

الاتساق

(راجع اتساق العلامة التجارية). لا يتعين على المطورين تخمين “ما الحشو الذي يحتاجه هذا الزر؟”. إنهم فقط يستوردون <Button>. يفرض نظام التصميم قواعد العلامة التجارية. لا توجد “بيكسلات مارقة”.

منطق الفصل والعرض

الذرات/الجزيئات: المكونات “الغبية”. يأخذون الدعائم (“العنوان”، “الصورة”) ويقدمون واجهة المستخدم. إنهم لا يعرفون شيئًا عن واجهة برمجة التطبيقات (API) الخاصة بك.
الكائنات/الصفحات: حاويات “ذكية”. يقومون بإحضار البيانات (“useQuery”) وتمريرها. وهذا يجعل الاختبار سهلا. يمكنك اختبار واجهة المستخدم عبر Storybook دون الاستهزاء بواجهة برمجة التطبيقات.

3. التنفيذ: هيكل الدليل

لا تتخلص من كل شيء في /components. تنظيم حسب المنطق:

سرك/
  المكونات/
    ui/ # الذرات (الزر، الإدخال) - "القاعدة"
    الكتل/ # الجزيئات (بطاقة المنتج، البطل)
    الأقسام/ # الكائنات (الرأس والتذييل)
    تخطيطات/ # قوالب
  الصفحات/ # الطرق

يخبر هذا الهيكل المطور الجديد بالمكان الذي يجب أن يبحث فيه بالضبط.

4. رموز التصميم: الحمض النووي

الذرات تحتاج إلى قيم. الألوان، التباعد، الطباعة. هذه هي رموز التصميم. قم بتخزينها في ملف تكوين (Tailwind Config أو CSS Variables).

:الجذر {
  --اللون الأساسي: #FF5733؛
  --تباعد-MD: 16px;
}

الآن، يستخدم مكون React الخاص بك var(—spacing-md)، وليس 16px`. إذا كنت ترغب في تغيير العلامة التجارية للموقع؟ تغيير ملف واحد. تحديثات الموقع بالكامل. الرموز هي العقد بين التصميم والهندسة.

5. سير عمل القصص المصورة

لا يمكنك بناء ذرات داخل الصفحة. هناك الكثير من الضوضاء. أنت بحاجة إلى “مختبر”. القصص المصورة هو ذلك المختبر. يمكنك إنشاء <Button> بشكل منفصل. يمكنك اختبار جميع حالاته: التحويم، معطل، التحميل، خطأ. عليك التأكد من أنه يمكن الوصول إليه. فقط عندما يكون مثاليًا، يمكنك وضعه في التطبيق. التطوير المدفوع: أنشئ واجهة المستخدم في Storybook أولاً. قم بتوصيله بالبيانات الثانية.

6. نموذج الحوكمة (من يملك الذرات؟)

من المسموح له بتغيير <الزر>؟ إذا قام الجميع بتغييره، فإنه ينكسر. ** فريق نظام التصميم **. في المؤسسات الكبيرة، يمتلك مهندسون محددون “مكتبة واجهة المستخدم”. مهندسو المنتج * يستهلكون * المكتبة. إذا كان مهندس المنتج يحتاج إلى متغير زر جديد، فإنه يقوم بإجراء علاقات عامة إلى المكتبة. تتم مراجعته من أجل الاتساق وسهولة الوصول. وهذا يمنع “الانجراف المكون”.

6. مشكلة الكائنات الحية (أين أضع هذا؟)

أصعب جزء في التصميم الذري هو المنطقة الرمادية. “هل هذا جزيء أم كائن حي؟” قاعدة قانون المنزل:

إذا كان لديه منطق عمل (استدعاءات واجهة برمجة التطبيقات (API)، اتصال مسترجع)، فهو كائن.
إذا كان عرضيًا بحتًا (الدعائم داخل واجهة المستخدم خارج)، فهو جزيء.
إذا كان يحتوي على كائن حي، فيجب أن يكون قالبًا أو صفحة. (يجب ألا تحتوي الكائنات الحية على كائنات حية أخرى لتجنب “جحيم حفر الدعامة”).

7. اختبار الانحدار البصري (لوني)

يعمل التصميم الذري بشكل أفضل مع الاختبار المرئي. وبما أن لديك مكتبة من الذرات، فيجب عليك التأكد من أنها لن تنكسر. نحن نستخدم لوني (بواسطة Storybook).

يقوم CI/CD ببناء القصص المصورة.
يأخذ اللوني لقطات شاشة لكل مكون.
يقوم بمقارنة بكسل مقابل بكسل مع الفرع “الرئيسي”.
إذا تم تغيير البكسل، فسيفشل البناء. يمنحك هذا الثقة لإعادة بناء CSS. “لقد قمت بتغيير المساحة المتروكة عمومًا. هل قمت بكسر زر الدفع؟” سوف يخبرك لوني.

8. موقع التوثيق (الارتفاع صفر)

Storybook مخصص للمطورين. يحتاج المصممون إلى ارتفاع صفر. إنه يتزامن مع Figma وStorybook. يعرض:

التصميم (الشكلا).
الكود (رد الفعل).
ما يجب فعله وما لا يجب فعله (إرشادات الاستخدام). هذا هو المصدر الوحيد للحقيقة. وبدون ذلك، يتباعد المطورون والمصممون.

9. المكونات المركبة (التفاعل المتقدم)

كيف يمكنك بناء جزيئات معقدة مثل “القائمة المنسدلة”؟ تمرير 50 خاصية (isOpen، onClose، item1، item2) أمر قبيح. استخدم نمط المكون المركب.

<القائمة المنسدلة>
  <Dropdown.Trigger>فتح</Dropdown.Trigger>
  <القائمة المنسدلة>
    <Dropdown.Item>تحرير</Dropdown.Item>
    <Dropdown.Item>حذف</Dropdown.Item>
  </Dropdown.Menu>
</ المنسدلة>

الأصل <Dropdown> يحتفظ بالحالة (السياق). يقرأ الأطفال الدولة. هذا يبقي ذراتك نظيفة وقابلة للتركيب.

10. عناصر النمط مقابل عناصر التصميم (تصميم واجهة برمجة التطبيقات)

هل يجب أن تسمح بـ style={{ MarginTop: 10 }} على ذراتك؟ لا. إذا سمحت بأنماط عشوائية، فسيستخدم المطورون قيمًا عشوائية. “أحتاج إلى 13 بكسل هنا.” الاستراتيجية: تقييد الدعائم على السمة. <Box هامش = "md" color = "أساسي" /> وهذا يجبر المطورين على الالتزام برموز التصميم. يزيل “فتحة الهروب”. القيد يولد الاتساق.

11. رموز التصميم في Tailwind (إستراتيجية التكوين)

Tailwind هو Atomic CSS، لكنه يحتاج إلى Atomic Design. لا تستخدم قيمًا عشوائية (w-[123px]). قم بتكوين الرموز المميزة الخاصة بك في “tailwind.config.js”.

الموضوع: {
  الألوان: {
    أساسي: "var(--color-primary)"، // يعين متغير CSS
  },
  التباعد: {
    md: "فار(--تباعد-md)"،
  }
}

الآن، يجب على المطورين استخدام bg-primary وp-md. لا يمكنهم فعليًا استخدام ألوان خارج العلامة التجارية إذا التزموا بالتكوين. هذه هي “هندسة الدرابزين”.

12. الاستنتاج

التصميم الذري ليس فقط للمصممين. إنه النموذج العقلي لهندسة الواجهة الأمامية الحديثة. إنه يحول الفوضى إلى نظام. فهو يحول “الصفحات” إلى “أنظمة”. فهو يسمح لك بالشحن بشكل أسرع وبجودة أعلى وخوف أقل. ابدأ بالتفكير في الذرات.

كود السباغيتي؟

نقوم بإعادة هيكلة قواعد التعليمات البرمجية القديمة إلى بنيات ذرية قابلة للتطوير باستخدام React وTailwind.

تصميم واجهة المستخدم الخاصة بي. قم بتوظيف مهندسينا.