المقارنة بين الأبطال Angular مقابل Angular مقابل Vue

إعداد مشروع

أسرع طريقة لبدء المشروع عن طريق استخدام CLI المقدمة من مؤلفي الأطر. كلاهما يأتي مع خدمة جيدة جداً؛ ومع ذلك، هناك بعض الاختلافات القليلة أي, Vue يأتي مع المزيد من الخيارات، وبالتالي، يمكنك تخصيص مشروع حسب احتياجاتك منذ البداية بشكل صحيح. يمكنك اختيار إصدار 1TP5555Tسواء كنت بحاجة إلى استخدام التوجيه أو معالجات CSS المسبقة أو إعداد مُقدِّمات CSS أو إعداد مُقدِّمات مباشرةً. كما يتيح لك أيضًا تحديد ما إذا كنت تريد إعداد اختبارات (وحدة أو E2E).

Angular يأتي مع مولد يتيح لك إنشاء مكونات وخدمات وواجهات وتوجيهات مباشرةً من وحدة التحكم، وهو أمر مفيد جدًا من واقع خبرتي حيث لا حاجة لإعداد المجلدات والملفات والمجلدات الزائدة يدويًا الكود يدويًا، خاصةً عند استخدام نمط MVC. يأتي Typescript خارج الصندوق مع Angular ويضغط عليك نوعاً ما لاستخدامه. إذا لم تكن قد فعلت ذلك بعد، فإليك مقدمة مفيدة عن سبب وجوب تجربته - يمكنك الاطلاع عليها هنا.

في البداية Angular's Angular's CLI يسألك فقط عن التوجيه أو المعالجات المسبقة لـ CSS المفضلة التي، بالمقارنة مع Vueلا يترك لك مساحة كبيرة لتقرر بشأن بنية وأسلوب تطبيقك. ولكن إذا كنت ستتبع الاصطلاح الذي يطلب منك استخدامه، فإن CLI ستقودك على طول الطريق.

هيكل المشروع

Vue يستخدم SFC (مكونات ملف واحد) مما يجعل من السهل جدًا على المطور الجديد البدء في استخدام إطار العمل وإيجاد موطئ قدم له في الشيفرة البرمجية.

التوجيهات

Vue يأتي أيضًا خارج الصندوق مع توجيهات مثل "v-إذا، v مقابل"، وهو أمر بديهي جدًا للاستخدام لأنه تقريبًا نسخة من Angular منها. Vue يستخدم نفس الاصطلاح لربط البيانات ثنائي الاتجاه (فقط عن طريق البادئة بـ، أي v- في "v-model") وإضافة @/v- على للإشارة إلى أننا نتفاعل مع شيء ما. Angular يفصل ذلك بالإشارة إلى الطريقة التي نسلكها باستخدام الأقواس لربط الأحداث والأقواس المربعة لربط الخصائص، أي، "(تغيير)، [ngStyle]، [(ngModel)]،]".

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

الفعاليات

في هذه الحالة Vue مرة أخرى بحل أكثر سهولة؛ أي لإصدار حدث من المكوّن التابع إلى مكوّنه الأم، كل ما عليك فعله هو (باستخدام Vue 3 تكوين API ) خذ أسلوبًا من كائن السياق في الإعداد وبكل بساطة ابعث ما تحتاجه في الوقت الحالي:

إعداد(الدعائم، { انبعاث }) { مكون المكونYouWantYouWantToToToSomewewhere = () => { انبعاث('customNameOfYourEvent'، dataYouWantToPass)؛ } } }

يمكنك أيضًا القيام بذلك مباشرةً في القالب كاستجابة لحدث آخر.

في Angular، تحتاج أولاً إلى تعريف EventEmitter على النحو التالي:

@إخراج() CustomNameForYourEmitter = جديد EventEmitter();

ثم تحتاج إلى استدعاء أسلوب انبعاث على باعث الحدث:

هذا.customNameForYourEmitter.emit(this.theDataYouWantToPass);

الفتحات/إسقاط المحتوى

في كلا الإطارين، يمكنك بسهولة نقل المحتوى (الفردي والمتعدد) من المكوّن الأصل إلى المكوّن التابع له فقط بإضافة html إضافي داخل العلامات التابعة، مع اختلافات طفيفة:

Vue:

'<<'' 

Angular:

افتراضي:
    

الفتحة المسماة:

<p yourname>
   هذه فتحة مسماة
  </p>
  <p>هذه فتحة افتراضية</p>

ومع ذلك، إذا كنت تريد تصيير بعض أجزاء تطبيقك بشكل مشروط, Vue أكثر بديهية من Angular ويتيح لك القيام بذلك بشكل أسرع عن طريق إضافة ت-إذا التوجيه إلى <template> والتي تتيح لك تصيير الأجزاء المطلوبة حاليًا فقط.

  >

في حين أن نغ-محتوى يتم تقديمها دائمًا، تحتاج في هذه الحالة إلى استخدام قالب نانوغرام، وأنشئ لاحقًا توجيهك المخصص الخاص بك:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  المحدد: '[customDirectiveDirectiveName]'
})
تصدير فئة CustomDirective {
  مُنشئ(عام templateRef: TemplateRef) {}}
}

وبسبب الاسم الذي تطلقه على قالب نانوغرام ستعرف سمة Angular ما يجب تقديمه:

أيضًا، داخل المكوِّن، تريد عرض القالب الخاص بك ليتم استخدامه في @ContentChild للحصول على القالب المناسب:

@ContententChild(CustomDirective) محتوى (CustomDirective): CustomDirective;

الخدمة مقابل المتجر

Angular في جوهره يشجعك على استخدام نمط تصميم MVC حيث يمكنك استخدام الخدمات للنموذج. لهذا السبب، تحتاج إلى تعلم نمط الحقن التبعي لتشغيل البيانات بحرية في تطبيقك. فهو يتيح لك فصل التأثيرات الجانبية الخاصة بك، أي مكالمات واجهة برمجة التطبيقات واستخدام نفس المنطق في المشروع بأكمله عن طريق حقن الأجزاء التي تحتاجها في الوقت الحالي، مما يجعله أيضًا نهجًا معياريًا.

Angular يأتي أيضًا مع إطار عمل Ngrx/المخزن المبني على نمط Redux في حال أردت استخدام نهج أكثر تفاعلية مع مراصد RxJs. يأتي مع الإجراءات التي تُستخدم لإرسال الأحداث الفريدة من المكونات و/أو الخدمات، والتأثيرات التي تتعامل مع التأثيرات الجانبية أو الإجراءات غير المتزامنة التي تريد تنفيذها، والمخفضات التي تُغيِّر حالتك.

في Vue، فإن الطريقة الشائعة هي استخدام مكتبة Vuex لإدارة الحالة والتي تأتي أيضًا مع أدوات مثل الإجراءات والتغيرات والحاصلات، تمامًا مثل Ngrx/المخزن، لمساعدتك في إدارة وتنظيم حالة تطبيقك. يمكنك وضع وحدات نمطية من خلال تعيين مخازن مختلفة لطرق العرض الخاصة بك، أي مخزن مستخدم أو مخزن عربة التسوق، ولكن يمكن أن يؤدي ذلك إلى مشاكل في تباعد الأسماء، إلا إذا كنت تستخدم موزع الأسماء: صحيح في إعلان المتجر الخاص بك.

فيما يلي مقارنة بين النهج القائم على الخدمات ونهج Vuex عندما تكون المهمة هي جلب بعض المنتج البيانات الخاصة بمتجرك:

@Injectable() // مزخرف للإشارة إلى أننا نريد استخدامه في DI لاحقًا
تصدير صنف ProductsService {
  منتجات خاصة: منتج[] = [];

  مُنشئ (الخلفية الخاصة: BackendService) { } }

  getProducts() { {
    هذا.backend.getAll(منتج).then( (المنتجات: منتج[]) => {
      / / افعل ما تشاء بمنتجاتك
    });
    إرجاع this.products;
  }
}

ثم، في المكوِّن، نحقن خدمتنا في المكوِّن ليتم استخدامها:
مُنشئ(خدمة خاصة: HeroService) { } }

في Vue، نقوم ببساطة بإرسال إجراء يقوم بإجراء مكالمة خلفية لنا:

إرسال(getAllProducts)

وفي الإجراءات.ts ملف نعرّف فيه إجراءً:

الإجراءات: {
getAllProducts ({التزام })؛) {
    التزام("setProducts"، في انتظار getProducts()؛) ؛) // جلب البيانات ووضع النتائج في المتجر
}}

جلب البيانات

مع Vueيمكنك استخدام Axios/Fetch أو أي مكتبة تريد استخدامها، فالأمر بسيط ومباشر حقًا - كل ما عليك فعله هو التعامل مع المكالمات غير المتزامنة بالوعود أو أي نهج يناسبك.

جرب {
http.get('https://url.to.get.data')
    .then(res => res.json()))
    .then(data => console.log('do كل ما هو مطلوب')))
} الالتقاط (e) {
    //تعامل مع الخطأ
}

Angular تأتي مع مكتبة HttpClient التي تستخدم الملاحظات مما يقودك إلى ميزة أخرى - لاستخدامها بشكل صحيح و/أو معالجة البيانات، تحتاج إلى تعلم RxJs. مجددًا، قد يكون من الصعب جدًا أن تتقن استخدام هذه البنية المجردة بطلاقة وتشعر بالإلمام بها في البداية.

يمكنك استخدام Axios إذا كان هذا هو ما تريد القيام به ولكن كما تقول صفحة Axios GitHub: "Axios مستوحاة بشكل كبير من خدمة $http المقدمة في Angular'

خاص getAllItems(): باطل {
هذا.http
.get('https://url.to.fetch.data')

.pipe(
نتف('النتائج'),
النقر(console.log('قم بأي تأثير جانبي تريد استخدامه هنا')
catchError((error)) => {
        //تعامل مع الخطأ
})
)
.subscription((result:ResultType[]))
    //عملية نهائية على ناتج معين
)
}

خلاصة القول

| Vue | Angular |
| ———– | ———– |
| لا يدفعك لاتباع قواعد صارمة للغاية | يتطلب استخدام المكونات/الخدمات المستندة إلى الفئات |
| منحنى تعليمي مسطح، من السهل البدء به | منحنى تعليمي عالٍ (Typescript، RxJs، حقن التبعية) |
| هناك الكثير من الأشياء التي يجب تهيئتها أثناء إعداد المشروع | ليس هناك الكثير لإعداده مقدمًا ولكنه يتيح لك إنشاء بنية المشروع من خلال وحدة التحكم |
| إطار عمل مجتمعي قائم على كل من Angular وReact | تم إنشاؤه وصيانته بواسطة Google |
| لم يتم تضمين الكثير، تحتاج إلى تثبيت مكتبات خارجية | إدارة الحالة، HttpClient المضمنة في الإطار |

اقرأ المزيد:

JavaScript ميت تمامًا. شخص ما على الإنترنت

نشر واجهة برمجة تطبيقات GraphQL/منغودب باستخدام وظائف Netlify

كيف تقتل مشروعاً بممارسات الترميز السيئة