react atomic design
1.0.0
هذا نموذج نموذجي لمنهجية التصميم الذري باستخدام بعض الأشياء الرائعة، مثل Storybook وFlow وCSS Modules. لا تتردد في الاختبار والتغيير والتكيف مع كل شيء.
إقرأ المقال كاملا
يساعد Atomic Design، المعروف شعبيًا في عالم التصميم، على بناء أنظمة تصميم متسقة وقوية وقابلة لإعادة الاستخدام. بالإضافة إلى ذلك، في عالم React وVue والأطر التي تحفز عملية التقسيم، يتم استخدام Atomic Design دون وعي؛ ولكن عند استخدامها بالطريقة الصحيحة، تصبح حليفًا قويًا للمطورين.
يأتي اسم التصميم الذري من فكرة فصل المكونات في الذرات والجزيئات والكائنات الحية والقوالب والصفحات، كما في الصورة أعلاه. ولكن ما هي مسؤوليات كل جزء منفصل؟
الذرات هي أصغر المكونات الممكنة، مثل الأزرار والعناوين والمدخلات أو منصات ألوان الأحداث والرسوم المتحركة والخطوط. يمكن تطبيقها في أي سياق، عالميًا أو ضمن مكونات وقوالب أخرى، بالإضافة إلى وجود العديد من الحالات، مثل هذا المثال للزر: معطل، أو تحويم، أو أحجام مختلفة، وما إلى ذلك.
وهي تكوين واحد أو أكثر من مكونات الذرات. هنا نبدأ في تكوين مكونات معقدة وإعادة استخدام بعض تلك المكونات. يمكن أن يكون للجزيئات خصائصها الخاصة وتخلق وظائف باستخدام الذرات، التي ليس لها أي وظيفة أو فعل في حد ذاتها.
الكائنات الحية هي مزيج من الجزيئات التي تعمل معًا أو حتى مع الذرات التي تشكل واجهات أكثر تفصيلاً. عند هذا المستوى، تبدأ المكونات في الحصول على الشكل النهائي، ولكن لا يزال من المؤكد أنها مستقلة ومحمولة وقابلة لإعادة الاستخدام بما يكفي لإعادة استخدامها في أي محتوى.
في هذه الحالة نتوقف عن تكوين المكونات ونبدأ في تحديد سياقها. علاوة على ذلك، تقوم القوالب بإنشاء علاقات بين الكائنات الحية والمكونات الأخرى من خلال مواضع ومواضع وأنماط الصفحات ولكنها لا تحتوي على أي نمط أو لون أو مكون. لهذا السبب يبدو وكأنه إطار سلكي.
الصفحات هي أجزاء التنقل في التطبيق، حيث يتم توزيع المكونات في قالب واحد محدد. تحصل المكونات على محتوى حقيقي وهي مرتبطة بالتطبيق بأكمله. في هذه المرحلة، يمكننا اختبار كفاءة نظام التصميم لتحليل ما إذا كانت جميع المكونات مستقلة بما فيه الكفاية أو إذا كنا بحاجة إلى تقسيمها إلى أجزاء أصغر.
عندما بدأنا في استخدام التصميم الذري داخل React كان علينا تعديل بعض قواعد المنهجية للتأكد من إعادة استخدام المكونات قدر الإمكان، وأنها كانت عديمة الحالة، وبدون أنماط للمواضع وهوامش محددة للغاية لتجنب أي آثار جانبية في صفحات التطبيق.
لذلك، مع كل مكون جديد، سألنا أنفسنا: "هل هذه المكونات عامة بما يكفي لتجنب التحديد و/أو التعليمات البرمجية المتكررة في أي سياق يتم استخدامها؟"
لذلك تمكنا من كتابة بعض القواعد:
| البرنامج النصي | وصف |
|---|---|
$ yarn start | ابدأ تشغيل خادم حزمة ويب بسيط |
$ yarn dev | إنشاء خادم للتطوير على المنفذ 5000 |
$ yarn storybook | ابدأ Storybook بالقصص المستوردة |
$ yarn flow | التحقق من صحة أنواع التدفق |
@danilowoz
@dlitee
معهد ماساتشوستس للتكنولوجيا
