الفرق بين AOT و JIT في Angular بالتفصيل

ليه أصلاً محتاج Compiler في Angular؟​

بص يا باشمهندس، المتصفح في الآخر مبيفهمش غير JavaScript فقط. يعني مهما كتبت كود بـ TypeScript أو HTML أو CSS، لازم كله يتحول في النهاية لـ JavaScript عشان المتصفح يعرف يشتغل ويعرض الموقع.

وهنا بييجي دور الـ Compiler أو أحيانًا الـ Transpiler (زي TypeScript). في Angular تحديدًا، عندنا طريقتين مختلفتين بيتم بيهم التحويل ده:

• AOT Compiler (Ahead-Of-Time)
• JIT Compiler (Just-In-Time)

كل واحدة ليها مميزات وعيوب، وهنعرف دلوقتي الفرق بينهم وليه الاختيار الصح ممكن يفرق جامد في أداء تطبيقك

---

يعني إيه Compiler في Angular؟​

الـ Compiler ببساطة هو اللي بياخد الكود اللي كتبته - سواء TypeScript أو HTML أو CSS - وبيحوّله لحاجة المتصفح يقدر يفهمها وينفذها.

في Angular، كمان الـ templates اللي في الـ components بتتحول بنفس الطريقة لكود JavaScript.
وده اللي بيخلي المتصفح يعرض كل حاجة زي ما المفروض تكون

ملاحظة: التحويل من TypeScript لـ JavaScript بيُعتبر “Transpilation” مش “Compilation” بالمعنى التقليدي، بس في Angular المصطلح العام اللي بنستخدمه هو “Compile”.

---

الـ JIT Compiler (Just-In-Time) - التحويل وقت التشغيل​

الـ JIT أو "في الوقت المناسب" هو الوضع الافتراضي اللي Angular بيستخدمه أثناء التطوير، يعني لما تعمل ng serve وتشغل التطبيق على localhost.

الـ Compilation هنا بيحصل في المتصفح نفسه أثناء التشغيل، مش قبل كده. يعني التطبيق بيشتغل وبعدين يبدأ يكمّبيل الكود on the fly

---

مميزات الـ JIT Compiler​

1. سرعة أثناء التطوير: تقدر تشوف التغييرات فورًا من غير build جديد.
2. سهولة الاستخدام: مفيش إعدادات معقدة أو خطوات إضافية.
3. مناسب للتجارب: مثالي لو بتعمل prototype أو بتجرب فكرة جديدة بسرعة.

---

عيوب الـ JIT Compiler​

1. بطء التحميل الأول: لأن التحويل بيتم جوه المتصفح.
2. حجم ملفات أكبر: بيحتاج يحمّل مكتبة الـ Compiler مع التطبيق.
3. غير مناسب للـ Production: بيقلل الأداء وسرعة فتح التطبيق عند المستخدمين.

---

والبديل الأفضل: AOT Compiler (Ahead-Of-Time)​

الـ AOT بيعمل العكس تمامًا - بيكمبيل الكود قبل ما التطبيق يتشغّل.
يعني كل حاجة بتتحول لـ JavaScript أثناء الـ build مش وقت التشغيل.
وده بيخلي التطبيق أخف، أسرع، وجاهز للـ production

(هنتكلم عنه بالتفصيل في الجزء الجاي من السلسلة )
الـ AOT Compiler في Angular وأهم مميزاته