ما معمارية الواجهات الأمامية؟
الدرس 4 من 38 · الأساسيات · 5 دقيقة و39 ثانية
الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.
الموارد
التفريغ النصي
[00:03] وهنا سؤال آخر بمليون دولار. ما هي معمارية الواجهات الأمامية؟ لذا، إليك التعريف الذي نستخدمه سابقًا للحديث عن معمارية البرمجيات. وأحد الأشياء الجيدة في هذا التعريف هو أنه يمكننا تبنيه للحديث عن معمارية الواجهات الأمامية أيضًا من خلال إضافة الواجهة الأمامية في مكانين حتى نتمكن من تعريف معمارية الواجهات الأمامية على أنها مجموعة من القرارات حول كيفية تنظيم طبقة الواجهة الأمامية لدينا لتعزيز هذه الصفات عالية الجودة.
[00:29] أعلم أنه لا يزال هناك الكثير من الكلمات، بل إنها كلمات أكثر الآن. لذلك إذا كنت تريد النسخة الأكثر إيجازًا، فيمكننا استدعاء رالف جونسون الداخلي الخاص بنا ونقول إن معمارية الواجهات الأمامية تدور حول أشياء الواجهة الأمامية المهمة. أيا كان ذلك.
[00:43] لذا فإن الشيء الرئيسي الذي نتحدث عنه الآن هو كيف يمكننا تعريف كلمة الواجهة الأمامية؟ وكان من السهل جدًا التحدث عن الواجهة الأمامية والخلفية، دعنا نقول قبل عشر أو 15 عامًا، لأنك إذا ركضت على العميل، فقد كانت الواجهة الأمامية. إذا كنت تعمل على الخادم، كان الخلفية كان ذلك واضحا.
[00:59] ولكن بطبيعة الحال في الوقت الحاضر الأمور ليست بهذه البساطة. لدينا أشياء تعمل على كل من العميل والخادم، ولدينا أشياء أيضًا هي أدوات واجهة أمامية أكثر تطوراً تعبر الحدود تقريبًا إلى الواجهة الخلفية أيضًا. لذلك أعتقد في الوقت الحاضر أنه من الأدق بكثير التفكير في تعريف الواجهة الأمامية والخلفية كطيف بدلاً من ذلك كشيئين متعاكسين.
[01:22] على الجانب الأمامي من الطيف، لدينا أشياء مثل الوصول و HTML و JavaScript من جانب العميل وعلى الجانب الخلفي من الطيف، لدينا أشياء مثل قواعد البيانات أو واجهات برمجة التطبيقات أو، كما تعلمون، Kubernetes، أيا كان، أيا كان Kubernetes، والتي بالمناسبة، إذا كنا سنستمر في الحديث عن Kubernetes يجب علينا على الأرجح معرفة ما هو. لذلك، أعني، أعطني دقيقة واحدة هنا. ما هو كوبيرنيتيس؟ حسناً لذلك هو مثل.
[01:58] على أي حال، لذلك العودة إلى الطيف لدينا. لدينا الآن أشياء من الواضح أنها في المنتصف، عندما نفكر في أي إطار حديث يحتوي على عميل ومكون خادم مثل Next.JS أو Nuxt تقع في الوسط. سأقول أيضًا أشياء مثل مكونات React Server التي تعبر هذه الحدود بالكامل في هذه المنطقة.
[02:17] لذلك بالنسبة لهذه الدورة بالذات، فإن تعريفنا للواجهة الأمامية أو ما نعنيه بالواجهة الأمامية يكمن في سأقول حول هذا المجال من الطيف. إذن أين نبقى واضحين من الحواف. لذلك لن نتحدث عن، كما تعلمون، CSS، على سبيل المثال، لن نتحدث أيضًا عن قواعد البيانات. لذلك سنبقى في هذه المنطقة الوسطى، ولكن أكثر نحو الواجهة الأمامية للطيف.
[02:40] الآن، ماذا عن هذا الرجل، مع ذلك؟ هل يمكننا استخدام هذه الأبعاد الأربعة للهندسة المعمارية لتحديد معمارية الواجهات الأمامية أيضًا؟ حسنا، نعم. نعم، يمكننا.
[02:56] لذلك دعونا نرى بعض الأمثلة على كيف يمكن أن تبدو معماريتان مختلفتان من خلال تطبيق هذه الأبعاد الأربعة، والنظر من خلال عدسة هذه الأبعاد الأربعة. المعمارية، رقم واحد، قد يكون لدينا نمط من الامتيازات الصغيرة، وهذا مثال على النمط المعماري الذي قد نختاره لهذه المعمارية بالذات.
[03:11] ثم بعض الخصائص المميزة التي قد ندعمها أو بعض سمات الجودة التي قد نرغب في إعطاء الأولوية لقابليتنا للتوسعة وإمكانية النشر والصيانة. ربما هذه هي شركتنا الأكبر التي لديها المئات من مطوري الواجهة الأمامية وفرق متعددة، ونحن نريد التأكد من أن قاعدة الشيفرة تتسع مع نمو فرقهم وأن الناس يمكنهم الانتشار دون، كما تعلمون، الدخول في أصابع قدم بعضهم البعض حتى لا يكون هناك تعارض بين الفرق عند إصدار الإصدارات.
[03:42] بعض القرارات المعمارية التي قد نتخذها في هذه البنية هي، على سبيل المثال، أننا سنشارك الحالة العالمية مع الإشارات وأنه يمكننا تكوين جانب العميل الصغير. هذه هي الطريقة التي سنختار بها الجمع بين جميع واجهاتنا الصغيرة معًا باستخدام الأداء العالي للعميل والمكونات المنطقية أو اللبنات الأساسية لعمارتنا يمكن أن تكون نماذج ومجموعات ومناظر وقوالب وفصول. لذلك قد يستخدم هذا نوعًا من إطار MVC لبناء طبقة الواجهة الأمامية، والتي أعرف أنها ليست شائعة جدًا، ولكن هذا مجرد مثال.
[04:15] قد تستخدم المعمارية الثانية تطبيقًا أحادي البنية مبنيًا على مكونات خادم React. ذكرنا React هنا بسبب استخدام مكونات الخادم تحديدًا؛ إذ تمنح التطبيق شكلًا معماريًا مختلفًا إلى حدّ يكاد يجعلها معمارية مستقلة، ولذلك نتعامل معها كنمط خاص.
[04:32] الخصائص أو أنشطة الجودة التي قد نروج لها مع هذه البنية هي الأداء والمرونة والموثوقية. ربما لديك فريق أصغر يرغب في التحرك بسرعة ونحن نهتم بأن يكون هذا التطبيق سريعًا وموثوقًا به أيضًا.
[04:47] بعض القرارات التي نتخذها في هذه البنية هي، على سبيل المثال، مشاركة الحالة مع متجر في هذه الحالة أو لتحوير البيانات المستخدمة في إجراءات الخادم. وقد تشمل اللبنات الأساسية لدينا مكونات العميل ومكونات الخادم والخطافات والخدمات وما إلى ذلك.
[05:03] إذاً هاتان البنيتان، قد نبني نفس التطبيق بالضبط باستخدام هاتين البنيتين ستبدوان مختلفتين تماماً. لذلك بالنسبة للمستخدم النهائي، قد تبدو التطبيقات متشابهة تمامًا. قد تكون متطابقة، في الواقع، ولكن تحت غطاء محرك السيارة نعرف أنها لا يمكن أن تكون أكثر اختلافًا وكيف نتخذ هذه القرارات؟
[05:22] كيف نختار عبر العدد اللانهائي من المجموعات التي يمكننا الاختيار من بينها؟ الخصائص المعمارية والأسلوب والقرارات التي نتخذها؟ هذا هو بالضبط ما سنقوم بتغطيته في بقية الدورة، وهذا ما نقوم به في وظائفنا كمهندسين معماريين.