clean architecture front end
1.0.0
مرحبًا ، إليك مستودع لإرسال رؤيتي للهندسة المعمارية النظيفة (أولاً على المقدمة ، ثم في وقت لاحق) في إصدارات مختلفة.
لقد كتبت مقالًا لدعم أمثلة هذا المشروع: https://www.hexa-web.fr/blog/hexagonal-architecture-front-
بالنسبة لهذه الأمثلة ، اخترت استخدام Next.js بناءً على React ، ولكن النقطة الأساسية من هذه البنية هي أن تكون قادرًا على استخدامها بشكل مستقل عن الأطر والمكتبات المستخدمة (التبعيات الخارجية).
من أجل الحصول على مثال بسيط ، اخترت موضوعًا بسيطًا: قائمة TODO!
لمشاهدة المهام التي لا يزال يتعين القيام بها في المشروع ، انتقل إلى ملف /docs/todo.md
إذا كان لديك أي أسئلة أو اقتراحات أو أي شيء آخر ، فلا تتردد في الاتصال بي! وإذا ساعدك هذا المستودع ، ففكر في مشاركته مع معارفك.
أولاً ، قم بتثبيت التبعيات:
npm install
# or
yarn install-
ثم قم بتشغيل خادم التطوير:
npm run dev
# or
yarn devافتح http: // localhost: 3000 مع متصفحك لرؤية النتيجة.
-
لبدء اختبارات الوحدة:
jest-
لاختبار التطبيق عبر الإنترنت: https://front-end clean-architecture.netlify.app/
الهندسة المعمارية السداسية ، أو الهندسة المعمارية القائمة على الموانئ والمحولات ، هي نمط معماري يستخدم في مجال تصميم البرامج. يهدف إلى إنشاء أنظمة تعتمد على مكونات التطبيقات التي يتم ربطها بشكل فضفاض والتي يمكن توصيلها بسهولة ببيئة البرمجيات الخاصة بهم عن طريق المنافذ والمحولات. هذه المكونات معيارية وقابلة للتبديل ، مما يعزز اتساق المعالجة ويسهل أتمتة الاختبارات.
هناك ثلاثة أجزاء في الهندسة المعمارية النظيفة: جزء التطبيق (المنافذ والمحولات الأولية) ، والمجال (حالات الاستخدام ، ونماذج المجال ، إلخ) وجزء البنية التحتية (المنافذ والمحولات الثانوية).
تعتمد هذه البنية على نمط المنفذ / المحول ومبدأ انعكاس التبعية.
من خلال توثيقك على الهندسة المعمارية النظيفة (أو الهندسة المعمارية السداسية). ستجد أسماء مختلفة لهذه الأجزاء. الأسماء المختارة هنا شخصية ، والهدف هو أنها مفهومة.
تحدد حالات الاستخدامات تصرفات المستخدمين. الهدف ليس استخدام أي إطار أو مكتبات في هذه العناصر (من أجل الحفاظ على المنطق غير مقترن بهذه الأدوات).
في المقدمة ، يمكن تمثيلها بوظيفة ، من خلال الفصل المكتوب في JS أو TS. مع React ، من الممكن استخدام Redux لهذا الجزء.
في حالة استخدام Redux ، فإن الإجراءات هي حالات الاستخدام ، والدولة هي واحدة من النماذج ، ويتم استخدام المختارين لتعيين.
يتم استخدام المنفذ الأساسي لإنشاء عقد بين المحول الأساسي وحالات الاستخدام. لهذا ، يمكن إنشاء واجهة. في الممارسة العملية ، تعتبر حالة الاستخدام أيضًا منفذًا أساسيًا.
بعد ذلك ، يتم استخدام تنفيذ هذه الواجهات للحوار مع المجال: الأول هو ما نسميه المحولات الأساسية. هدفهم هو تشغيل تنفيذ حالات الاستخدام. على سبيل المثال في المقدمة ، يمكن أن تكون هذه المحولات هي مكونات React التي تؤدي إجراء ما (Redux أم لا).
يتم استخدام المنفذ الثانوي لإنشاء عقد بين المحول الثانوي وحالات الاستخدام. لهذا ، ننشئ عادة واجهة. يتم استخدام هذه الواجهة مباشرة في حالة الاستخدام.
نصائح: يمكنك استخدام حقن التبعية لذلك ، تسمح لك بعض مكتبات إدارة الدولة بالقيام بذلك. على سبيل المثال مع Redux-Thunk و Redux-Observable ، من الممكن اجتياز "oundarguments" التي ستكون متوفرة مباشرة في إجراءات Redux. في "الفانيليا" ، هناك أيضا تعارضات.
يسمى التنفيذ الثاني للواجهات (المنافذ) محولات ثانوية. يتم استدعاؤها من قبل حالات الاستخدام. على سبيل المثال ، يمكن أن تكون هذه المحولات هي طلبات HTTP ، والوصول إلى البيانات الموجودة في التخزين المحلي ، إلخ.
باللغة الإنجليزية :
باللغة الفرنسية:
