الانتقال المدعوم بالذكاء الاصطناعي من Angular إلى React باستخدام الواجهات الأمامية المصغرة

التحدي

تم تطوير النظام القديم بالكامل باستخدام Angular 12. وفي إطار استراتيجيته الجديدة، قرر العميل الانتقال إلى استخدام React في جميع عمليات تطوير الواجهة الأمامية المستقبلية. وكان التحدي الرئيسي هو تمكين عملية انتقال تدريجية تتيح لمكونات Angular وReact التعايش والتطور معًا دون توقف عن العمل أو إجراء تعديلات جوهرية على قاعدة الكود.

نهجنا: لماذا نستخدم GenAI في عملية الترحيل من Angular إلى React

ونظراً للمتطلبات الأولية والإطار الزمني المحدود نسبياً، اقترحنا استخدام نموذج للذكاء الاصطناعي التوليدي (GenAI) لتسريع عملية التحويل.

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

وقد أدى هذا النهج إلى عملية ترحيل أسرع وأكثر موثوقية.

الخطوة 1 – إعداد بنية الواجهات الأمامية المصغرة

بدأنا بتنفيذ بنية الواجهات الأمامية المصغرة (Microfrontends) باستخدام إطار عمل «Single-SPA»، مما سمح بتشغيل وحدات Angular وReact جنبًا إلى جنب في نفس بيئة التطبيق. وقد أتاح هذا الإعداد للفرق ترحيل الميزات تدريجيًّا دون تعطيل النظام ككل.

الخطوة 2 – ضمان الترحيل التدريجي للميزات

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

الخطوة 3 – طرح CodePilot لتسريع عملية الترحيل

لتسريع عملية الترحيل، قمنا بتطوير ونشر أداة داخلية تُدعى CodePilot، والتي تعمل بواسطة GPT-4 عبر واجهة برمجة تطبيقات OpenAI. وقدمت CodePilot اقتراحات للترحيل من Angular إلى React تم إنشاؤها بواسطة الذكاء الاصطناعي، مما ساعد المطورين على العمل بسرعة وكفاءة أكبر.

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

الخطوة 4 – دمج الذكاء الاصطناعي بشكل آمن ومتوافق مع المعايير

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

النتائج والإنجازات

تتيح البنية الهجينة (الواجهات الأمامية المصغرة) التسليم المستمر، وتقلل من مخاطر التطوير، وتوفر مسارًا منظمًا نحو التحديث الكامل. وقد أدى دمج الأدوات المدعومة بتقنية GPT-4 إلى تعزيز إنتاجية المطورين، وتقوية اتساق البنية، وتسريع عملية الترحيل بشكل كبير.