ما زال AngularJS في تطبيقك؟ استخدامات لا يراها المترجم

انتهى الجزء 4 بحذف آمن: يتبدّل المسار، وتُزال المكتبة القديمة، وإذا حذفتها قبل الأوان أوقفك المترجم (compiler) بخطأ واحد. وثبّت الجزء 5 سلوك الشاشة القديمة باختبارات تفتح عنوانها (URL). لكن في كلتا الشبكتين فجوة.

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

إطاران وشاشة واحدة

في المستودع التجريبي ركن هجين (hybrid). شاشة المستفيدين مكتوبة بـ AngularJS 1.8، ومركّبة داخل تطبيق Angular 22 عبر @angular/upgrade. فعّل زر «Framework map» في العرض الحي وسترى ذلك بنفسك: صندوق برتقالي لـ AngularJS داخل غلاف Angular الفيروزي، وداخل الصندوق البرتقالي صناديق فيروزية صغيرة. هذه مكوّنات Angular تعيش داخل قالب (template) من AngularJS.

انقر للتكبير

هكذا ينمو التطبيق الهجين في الواقع. تبدأ الشاشات القديمة باستخدام مكوّنات Angular الجديدة قبل أن تختفي هي نفسها:

// libs/angularjs/beneficiaries/src/lib/beneficiaries.module.ts
.directive('atlasAmount', downgradeComponent({ component: Amount }))
.factory('accountsStore', downgradeInjectable(AccountsStore))

وفي مكان ما داخل نص قالب من AngularJS: <atlas-amount [value]="b.sentMad">.

البناء الأخضر الذي يكذب

اطلب من وكيل أن ينظّف الكود، فيبحث بـ grep عن Amount. يجد الاستيراد أعلاه، وربما بضعة قوالب Angular، ويستنتج أنه يعرف كل موضع يستخدمه. لكنه لا يعرف. فقالب AngularJS يستخدم وسماً بصيغة kebab-case داخل نص، والخدمة تُحقن باسم بين علامتي تنصيص. ولا يشير أي استيراد في TypeScript إلى أيٍّ منهما.

جرّبت ذلك في المستودع التجريبي. غيّر اسم التسجيل من 'atlasAmount' إلى 'atlasMoney'، وهو تنظيف من النوع الذي يجريه الوكيل دون أن يستأذن. ينجح typecheck. وينجح lint:arch. وينجح بناء الإنتاج. أما على الشاشة، فكل مبلغ في الجدول فارغ. يعامل AngularJS الوسم <atlas-amount> على أنه عنصر مجهول ولا يعرض شيئاً، دون أي خطأ.

في Angular الخالص، الخطأ نفسه يعني بناءً أحمر. أما في التطبيق الهجين، فهو خلل صامت في شاشة مصرفية.

الخطوة صفر: احصر الاستخدامات قبل الخطة

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

يدخل هذا الجدول في طلب الدمج قبل أي كود. كل صف فيه موضع استخدام لا يراه المترجم، وكل تغيير لاسم أو لمُدخل (input) فيه يحتاج إلى اختبار يعرض شاشة AngularJS. في المستودع التجريبي، يكشف اختبار هجين واحد تغيير الاسم السابق: expected [ '', '' ] to deeply equal [ '-3 000,00 MAD', '-250,00 MAD' ].

قسّم قبل أن تنقل

الدرس الثاني من كود AngularJS القديم: الشاشات كبيرة. خدمة المستفيدين في المستودع التجريبي تخلط أربع مهام في ملف واحد: قراءة المخزن، والقواعد (هل رقم الحساب البنكي صحيح، وهل هذا المستفيد جديد)، والتنسيق، وعمل على الـ DOM مثل وضع التركيز على حقل. ويحمل المتحكّم خمس مسؤوليات. هذه حصيلة عشر سنوات من الميزات التي أُضيفت حيث وُجد لها مكان، وهي الحالة العادية.

انقلها كما هي، وستحصل على العقدة نفسها بصياغة Angular. لذلك يطلب ملف المهمة التقسيم أولاً: تصبح القواعد دوالّ نقية (pure functions) لها اختباراتها الخاصة، ويأتي التنسيق من مكتبة المجال (domain) التي تضمّه أصلاً (كانت للخدمة القديمة نسختها الخاصة من منسّق رقم الحساب البنكي، وابتعد مجموعها في الترويسة عن formatMad)، وينتقل عمل الـ DOM إلى القالب، ويُقرأ المخزن مباشرة. ثم ابنِ بجانب القديم، وبدّل المسار، واحذف أخيراً، تماماً كما في الجزء 4.

سطر واحد لـ Angular 22

إذا كان تطبيقك zoneless، كما هي تطبيقات Angular الجديدة افتراضياً، يرفض UpgradeModule أن يبدأ: NG0908: In this configuration Angular requires Zone.js. ولا تحتاج إلى إعادة zone.js. أضف اكتشاف التغييرات (change detection) بلا zone.js إلى الوحدة (NgModule) التي تستورد UpgradeModule، فيحصل AngularJS على دورة $digest بعد كل دورة تحديث في Angular:

@NgModule({ imports: [UpgradeModule], providers: [provideZonelessChangeDetection()] })
export class BeneficiariesUpgradeModule {}

مع بداية الأسبوع

• تطبيق هجين؟ اجعل الوكيل يحصر كل downgradeComponent و downgradeInjectable ومن يستخدمها في AngularJS قبل أن يخطط لأي شيء.
• احتفظ باختبار واحد على الأقل يعرض كل شاشة AngularJS. فهو الفحص الوحيد الذي يقرأ نصوص القوالب.
• قسّم المتحكّم والخدمة المتضخّمين قبل نقلهما.

التمرين: الوحدة 2b في المستودع التجريبي، مع الركن الهجين وزر «Framework map» والمهمة 006. البداية: git switch -c m2b/you main. الحل المرجعي: origin/track1/m2b-angularjs-solution.

كل خطوة في هذا المسار حتى الآن تنتهي باختبارات كتبها الوكيل. أما الجزء الأخير فيتناول كيف تقرؤها، وما الذي أضافه الترحيل كله في المحصلة.

المسار 1، الجزء 6 من السلسلة المجانية المرافقة لورشة سريع وآمن: الذكاء الاصطناعي في قاعدة كود Angular الخاصة بك.