- بواسطة x32x01 ||
طبعًا أنت عارف إن المتصفح مبيفهمش غير لغة واحدة في الآخر، وهي الـ JavaScript. يعني مهما كتبت كود بلغة زي TypeScript أو حتى HTML وCSS، لازم في النهاية الكلام ده كله يتحول لـ JavaScript عشان المتصفح ينفذه ويطلع الموقع على الشاشة.
وده بيحصل عن طريق حاجة اسمها الـ Compiler (أو الـ Transpiler في بعض الحالات زي TypeScript). ولكن في Angular، الـ compilation ده ممكن يحصل بطريقتين مختلفتين، وكل طريقة لها مميزات وعيوب.
تعال نتكلم عن الـ AOT Compiler والـ JIT Compiler. لو فاهم الفرق بينهم وميزة كل واحد فيهم، هتعرف تختار الطريقة الصح والأفضل لمشروعك، ودي حاجة ممكن تفرق معاك جدًا في الـ performance وتخلي التطبيق بتاعك أسرع...
قبل ما ندخل في التفاصيل، لازم نفهم الأول الـ Compiler بيعمل إيه. ببساطة، الـ Compiler هو اللي بياخد الكود اللي أنت بتكتبه (زي الـ TypeScript والـ HTML والـ CSS) ويحوله لحاجة المتصفح يفهمها، يعني JavaScript.
في Angular، الـ templates بتاعتك (الـ HTML اللي في الـ components) بتتحول لكود JavaScript عشان المتصفح ينفذه. والـ Compiler هو اللي بيعمل الحركة دي.
لكن ملحوظة صغيرة: بالنسبة لـ TypeScript، العملية اسمها "transpilation" لأنها بتحول من لغة قريبة لـ JavaScript مش لكود آلة زي الـ compilation التقليدي. لكن في سياق Angular، بنقول "Compiler" على العملية كلها.
السؤال هنا: امتى بيحصل الكلام ده؟ وده اللي هيفرق بين الـ AOT والـ JIT.
الـ JIT، ومعناه “في الوقت المناسب”، هو الطريقة الافتراضية اللي Angular بيستخدمها لما تعمل build للتطبيق بتاعك. يعني إيه؟ يعني لما بتعمل ng serve مثلًا وتشغل التطبيق على الـ localhost، الـ JIT بيستنى لما التطبيق يتحمل في المتصفح، وبعدين يبدأ يحوّل الكود بتاعك (الـ templates والـ TypeScript) لـ JavaScript جوا المتصفح نفسه.
يعني الـ compilation بيحصل “on the fly”، أو “في السكة”. لكن للتوضيح، الـ JIT مش بيعني إن مفيش compilation خالص في مرحلة الـ build، لكنه بيخلّص التحويل الأساسي في المتصفح.
مميزات الـ JIT
1- سريع في التطوير: بيخليك تشوف التغييرات بسرعة من غير ما تعمل build كامل لكل تعديل، فمناسب جدًا وأنت بتشتغل على الكود.
2- سهل الاستخدام: ما بيحتاج منك تفكير كتير في إعدادات إضافية، بتشتغل على طول.
3- مثالي للتجربة: لو بتعمل prototype أو بتجرب حاجة جديدة، الـ JIT بيخليك تشوف النتيجة فورًا، وده بيساعد في الـ debugging.
عيوب الـ JIT
1- بطء في التحميل: بما إن الـ compilation بيحصل في المتصفح، فالمستخدم هيحس إن التطبيق بياخد وقت أكتر عشان يفتح أول مرة، خصوصًا لو التطبيق كبير.
2- حجم أكبر: الـ JIT بيحمل مكتبة الـ compiler مع التطبيق، وده بيزود حجم الـ bundle.
3- غير مثالي للـ production: لأنك عايز تطبيقك يكون سريع وخفيف لما تطلعه للناس، مش يستنى يتعمل له compile في المتصفح.
وده بيحصل عن طريق حاجة اسمها الـ Compiler (أو الـ Transpiler في بعض الحالات زي TypeScript). ولكن في Angular، الـ compilation ده ممكن يحصل بطريقتين مختلفتين، وكل طريقة لها مميزات وعيوب.
تعال نتكلم عن الـ AOT Compiler والـ JIT Compiler. لو فاهم الفرق بينهم وميزة كل واحد فيهم، هتعرف تختار الطريقة الصح والأفضل لمشروعك، ودي حاجة ممكن تفرق معاك جدًا في الـ performance وتخلي التطبيق بتاعك أسرع...
يعني إيه Compiler؟
قبل ما ندخل في التفاصيل، لازم نفهم الأول الـ Compiler بيعمل إيه. ببساطة، الـ Compiler هو اللي بياخد الكود اللي أنت بتكتبه (زي الـ TypeScript والـ HTML والـ CSS) ويحوله لحاجة المتصفح يفهمها، يعني JavaScript.في Angular، الـ templates بتاعتك (الـ HTML اللي في الـ components) بتتحول لكود JavaScript عشان المتصفح ينفذه. والـ Compiler هو اللي بيعمل الحركة دي.
لكن ملحوظة صغيرة: بالنسبة لـ TypeScript، العملية اسمها "transpilation" لأنها بتحول من لغة قريبة لـ JavaScript مش لكود آلة زي الـ compilation التقليدي. لكن في سياق Angular، بنقول "Compiler" على العملية كلها.
السؤال هنا: امتى بيحصل الكلام ده؟ وده اللي هيفرق بين الـ AOT والـ JIT.
الـ JIT Compiler (Just-In-Time) - التحويل وقت التشغيل
الـ JIT، ومعناه “في الوقت المناسب”، هو الطريقة الافتراضية اللي Angular بيستخدمها لما تعمل build للتطبيق بتاعك. يعني إيه؟ يعني لما بتعمل ng serve مثلًا وتشغل التطبيق على الـ localhost، الـ JIT بيستنى لما التطبيق يتحمل في المتصفح، وبعدين يبدأ يحوّل الكود بتاعك (الـ templates والـ TypeScript) لـ JavaScript جوا المتصفح نفسه.يعني الـ compilation بيحصل “on the fly”، أو “في السكة”. لكن للتوضيح، الـ JIT مش بيعني إن مفيش compilation خالص في مرحلة الـ build، لكنه بيخلّص التحويل الأساسي في المتصفح.
مميزات الـ JIT 
1- سريع في التطوير: بيخليك تشوف التغييرات بسرعة من غير ما تعمل build كامل لكل تعديل، فمناسب جدًا وأنت بتشتغل على الكود.2- سهل الاستخدام: ما بيحتاج منك تفكير كتير في إعدادات إضافية، بتشتغل على طول.
3- مثالي للتجربة: لو بتعمل prototype أو بتجرب حاجة جديدة، الـ JIT بيخليك تشوف النتيجة فورًا، وده بيساعد في الـ debugging.
عيوب الـ JIT 
1- بطء في التحميل: بما إن الـ compilation بيحصل في المتصفح، فالمستخدم هيحس إن التطبيق بياخد وقت أكتر عشان يفتح أول مرة، خصوصًا لو التطبيق كبير.2- حجم أكبر: الـ JIT بيحمل مكتبة الـ compiler مع التطبيق، وده بيزود حجم الـ bundle.
3- غير مثالي للـ production: لأنك عايز تطبيقك يكون سريع وخفيف لما تطلعه للناس، مش يستنى يتعمل له compile في المتصفح.