الـ AOT Compiler في Angular وأهم مميزاته

الجزء الثاني: AOT Compiler في Angular - كل اللي محتاج تعرفه ​

لو قريت الجزء الأول من المقال عن الفرق بين JIT و AOT في Angular (ولو ما قرتش لسه، ممكن تفتح المقال الأول من هنا:
الفرق بين AOT و JIT في Angular ) - هتلاقي إننا في الجزء الأول شرحنا الـ JIT ووضحنا ليه مش مثالي للإنتاج.

دلوقتي نخش في AOT Compiler ونشوف المزايا والعيوب، وكمان إزاي تختار الأنسب لمشروعك.

---

إيه هو AOT Compiler بالضبط؟​

AOT معناها Ahead-Of-Time، يعني إن Angular بيحوّل الكود (الـ TypeScript + القوالب templates) لـ JavaScript قبل ما التطبيق يتشغّل في المتصفح.
يعني التحويل بيحصل في وقت الـ build (أثناء عملية البناء)، مش وقت التشغيل في المتصفح.

لما تستخدم AOT، التطبيق اللي يوصل للمستخدم هيكون بالفعل مُحوَّل وجاهز للتنفيذ بكفاءة، مش محتاج يعمل compile أثناء التشغيل.

---

مميزات استخدام AOT في التطبيقات الإنتاجية​

1. سرعة تحميل أولى أفضل (Faster First Load)
   لأن معظم التحويلات تمت بالفعل، المتصفح مش محتاج يعمل compile وقت التشغيل، فالأداء الأولي هيكون أسرع.
2. حجم Bundle أقل
   لأن المكتبة الضخمة الخاصة بـ Compiler مش هتبقى مضمنة في الكود اللي بيتوزع، وده بيقلل حجم التطبيق النهائي.
3. اكتشاف الأخطاء في وقت الـ build
   أي أخطاء في القوالب أو روابط الـ templates هتطلعلك أثناء البناء، مش وقت التشغيل، وده بيخلي التجربة أكثر استقرارًا.
4. أداء أفضل في الإنتاج
   الكود يكون أخف، التنفيذ أسرع، والتحميل أسرع - كل ده يخلي التطبيق أكثر سلاسة للمستخدمين النهائيين.
5. أمان أفضل
   بعض الأكواد الحساسة أو مترجمة بشكل خاطئ ما تفضلش موجودة في الكود النهائي وقت التشغيل، لأن معظمها تم التعامل معه مسبقًا.

---

عيوب أو تحديات AOT​

• بناء أبطأ أثناء التطوير
  لأن كل الترجمة بتحصل أثناء build، فعملية ng build بتاخد وقت أطول مقارنة بـ JIT في وضع التطوير.
• قد تحتاج تهيئة إضافية
  ممكن تلاقي بعض المكتبات أو الحزم اللي مش متوافقة تمامًا مع AOT، و تحتاج تعدل في إعدادات tsconfig أو تضيف Decorators صحيحة.
• المرونة أقل للتجربة الحية
  لو عايز تغير بسرعة وتشوف تأثير فوري، هتحتاج تعيد build كل مرة - مش زي JIT اللي بيشغَّل on the fly.

---

متى تستخدم AOT ومتى تفضل JIT؟​

الحالة	الاختيار الأفضل
تطبيق إنتاج حقيقي Users كتير	AOT
تطبيق صغير أو تطبيقة تجريبية (Prototype)	JIT
لو عايز build ما يكونش بطيء جدًا أثناء التطوير	JIT أثناء التطوير + AOT للـ production
لو عندك مكتبات مش متوافقة مع AOT	ممكن تستخدم JIT مؤقتًا أو تهيئ المكتبة

كثير من المشاريع الكبيرة بتشتغل بهيك مزيج: تطوير بـ JIT علشان السرعة والراحة، وعند وقت النشر تستخدم AOT عشان الأداء وسلاسة التطبيق عند المستخدمين.

ازاي تفعل AOT في مشروع Angular؟​

لو عندك مشروع Angular موجود، تقدر تشغّل build بـ AOT بهذه الطريقة:

ng build --aot

أو في ملف angular.json تضيف في الـ configurations:

"configurations": {
  "production": {
    "buildOptimizer": true,
    "aot": true,
    "optimization": true,
    ...
  }
}

وبعدين تستخدم:

ng build --configuration=production

كده الكومبيلر هيشتغل بـ AOT في وقت البناء، والتطبيق النهائي يطلع جاهز بكفاءة عالية.

لو أنت وصلت للجزء ده، يُفضل ترجع تشوف الجزء الأول عشان تفهم الأساسيات عن JIT وكيفية تحويل الكود وقت التشغيل.
المقال الأول موجود هنا: الفرق بين AOT و JIT في Angular