تعني ، لقد تهيمن محادثات حول أطر JavaScript على أسماء شائعة مثل React (من الناحية الفنية مكتبة) ، next.js ، svelte ، Angular ، والمزيد.

هذه كلها أدوات رائعة ، لكن هل سمعت عن Aurelia 2؟
عندما صادفت أوريليا لأول مرة ، كان رد فعلي ، "ما هذا؟" ولكن بعد عامين من العمل معها ، أعتقد الآن أنه أحد أفضل الأطر هناك ، إن لم يكن الأفضل.

لماذا أعتقد ذلك؟

دعني أشرح. لقد انتقلت إلى Aurelia من React.js ، وفي البداية ، افترضت أنه مجرد إطار آخر من JavaScript. ومع ذلك ، كما كنت أعمق ، بدأت أدرك إمكاناتها الحقيقية وقوتها.

ستكون هذه المقالة بمثابة مقدمة لأوريليا 2 ، حيث سأعرض بعض مفاهيمها القوية ولماذا تبرز.

1. مجمع الحدث

أولاً هو مجمع الأحداث ، وهو مفهوم قد تكون على دراية به إذا كنت قد عملت في النظام الإيكولوجي C# ، ولكن إليك كيفية عمله في Aurelia:

يعمل مجمع الأحداث بشكل مشابه لأنماط المراسلة المستندة إلى الأحداث المستخدمة بشكل شائع في C#. إنه نظام حانة/فرعي يتيح لك نشر واشتراك الأحداث المخصصة في تطبيقات Aurelia الخاصة بك.

هذا يسهل فصل التواصل بين أجزاء مختلفة من تطبيقك. كما هو الحال في C#، حيث يتم استخدام مجمعي الأحداث أو الوسطاء لتبسيط معالجة الأحداث ، يتم الاستفادة من مجمع الأحداث في Aurelia من خلال الإطار نفسه لنشر الأحداث في مراحل مختلفة من دورة حياة التطبيق وخلال إجراءات محددة.

استيراد {ieventaggregator ، حل} من 'aurelia' ؛ تصدير فئة FirstComponent { readonly ea: ieventagggregator = desolve (ieventaggregator) ؛ مرتبط ب() { this.ea.publish ('ea_channel' ، 'payload') } }

import { IEventAggregator, resolve } from 'aurelia';

export class FirstComponent{

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.publish('ea_channel', ‘PAYLOAD’)
    }
 }

استيراد {ieventaggregator ، حل} من 'aurelia' ؛ فئة التصدير الثانية مكون { readonly ea: ieventagggregator = desolve (ieventaggregator) ؛ مرتبط ب() { this.ea.subscribe ('ea_channel' ، payload => { // افعل الأشياء داخل هذا رد الاتصال }) ؛ } }

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

مع هذا ، يمكننا تنفيذ بنية تعتمد على الحدث دون عناء ومعالجة وحل صداع الاقتران التي غالباً ما تصادف مع رد الفعل والأطر المماثلة.

2. حقن التبعية

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

تقدم Aurelia نظام DI قوي ومرن يبسط عملية توصيل أجزاء مختلفة من التطبيق الخاص بك. مع DI Aurelia ، تصبح التبعيات الإدارة وحقنها سلسة ، مما يؤدي إلى رمز أكثر نظافة وأكثر قابلية للصيانة.

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

3. التكوين الديناميكي

عنصر Aurelia يتيح التكوين الديناميكي من المشاهدات ونماذج العرض. إنه بمثابة عنصر مخصص ولكن دون الحاجة إلى اسم علامة محددة ، مما يسمح بمكونات واجهة المستخدم المرنة والقابلة لإعادة الاستخدام.

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

باستخدام

عنصر في الممارسة:

التطبيق الرئيسي

import { IEventAggregator, resolve } from 'aurelia';

export class SecondComponent {

    readonly ea: IEventAggregator = resolve(IEventAggregator);

    bound() {
        this.ea.subscribe('ea_channel', payload => {
            // Do stuff inside of this callback
        });
    }
 }

كيف يعمل:

• تكوين ديناميكي : تربط سمة component.bind ديناميكيًا كأنها نموذج العرض.

• تمرير المعلمات : تمرر السمة النموذجية.

فصل المخاوف

أحد الأسباب التي تجعلني أحب Aurelia 2 هو فصله النظيف للمخاوف من خلال نمط MVVM (Model-View-Viewmodel).

عرض

: تم فصل بنية واجهة المستخدم تمامًا عن المنطق. إنه يرتبط ببساطة بـ ViewModel لعرض البيانات والتقاط تفاعلات المستخدم.

viewModel

: هذا هو المكان الذي يحدث فيه كل المنطق. إنه يتحكم في البيانات ، ويتولى قواعد العمل ، ويقوم بتحديث العرض ، دون القلق بشأن كيفية عرضه.

نموذج

: يحتفظ Aurelia ببيانات التطبيق الأساسية منفصلة عن كل من العرض و ViewModel ، والحفاظ على الوضوح والتركيز.

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

خاتمة

في هذا المنشور ، ركزت على ثلاثة مفاهيم قوية فقط من Aurelia 2 - مجمع الحدث ، وحقن التبعية ، والتكوين الديناميكي - لكن هذه ليست سوى جزء صغير مما يقدمه الإطار.

Aurelia 2 مليئة بالميزات التي تساعد على بناء تطبيقات نظيفة وقابلة للتطوير وقابلة للصيانة.

للحصول على الصورة الكاملة والغطس بشكل أعمق في قدراتها ، أشجعك بشدة على استكشاف وثائق Aurelia 2 لفهم أكثر شمولاً.

PS: هذا هو أول مشاركة لي ، وآمل أن تكون قد أحببت ذلك!