Angular {{AOT vs JIT}} vs React مترجم: الجزء الأول

لنبدأ بمقارنة المترجم الفوري والمترجم

المحول البرمجي من X إلى Y هو برنامج يقوم بترجمة أي برنامج p من لغة ما X إلى برنامج مكافئ معنويا p ′ في بعض اللغات Y بطريقة يتم حفظ دلالات البرنامج ، أي أن الترجمة الشفهية p ′ مع مترجم فوري بالنسبة إلى Y ، سوف تسفر عن نفس النتائج وسيكون لها نفس التأثيرات عند تفسير p مع مترجم X.

مترجم === المترجم

مترجم مقابل مترجم

مترجم اللغة A هو برنامج يقوم بتنفيذ أي برنامج مكتوب بلغة X بحيث ينفذ التأثيرات ويقيم النتائج على النحو المنصوص عليه في مواصفات X.

المعترض === الجلاد

مترجم في الزاوي 1

مترجم عام

مترجم AngularJS 1.x وهو ذو طبيعة عامة تمامًا يعمل مع أي قالب عن طريق إجراء مجموعة من العمليات الحسابية الديناميكية. نظرًا لهذه الطبيعة ، فإن JavaScript Virtual Machine يكافح من أجل تحسين الحساب على المستوى الأدنى. السبب الرئيسي وراء ذلك هو:

"لا يعرف VM أشكال الكائنات التي توفر سياقًا لمنطق التحقق من القذرة (على سبيل المثال النطاق المزعوم) ، فهي تخبئ الكثير من المخازن المؤقتة المضمنة مما يؤدي إلى إبطاء التنفيذ"

المجمعين في الزاوي 2 ++

JIT

في المرحلة الأولى من تطبيق Angular 2 عند تمهيد الملف في المستعرض ، يقوم برنامج التحويل البرمجي JIT بالكثير من العمل (تحليل قوالب المكونات في كل مرة يفتح المستخدم فيها صفحة الويب ، جزء يحول قوالب HTML إلى رمز قابل للتشغيل) لتحليل المكونات في التطبيق في وقت التشغيل وتوليد رمز في الذاكرة. عندما يتم تحديث الصفحة ، يتم إلقاء كل العمل الذي تم إنجازه ، ويقوم برنامج التحويل البرمجي JIT بالعمل مرة أخرى. وكان هذا يؤدي إلى نكسة كبيرة AOT

تدفق الأحداث مع تجميع في الوقت المناسب

  • تطوير التطبيق الزاوي مع TypeScript وتجميع التطبيق مع Tsc.
  • تجميع → تصغير → نشر
  • عند العميل → قم بتنزيل جميع أصول JavaScript → Bootstraps Angular → Angular تمر بعملية تجميع JiT → يتم تقديم التطبيق
نظرة عامة على حزمة JIT

عثمان

المحول البرمجي يحول كود TS إلى كود JS (تم بالفعل ترجمة هذا JS للزاوي أيضًا). الآن ، يتم تجميع رمز JS المترجم مرة أخرى من خلال المتصفح مرة أخرى بحيث يمكن تقديم HTML. وبالتالي فإن ميزات الزاوي قد تم الاهتمام بها بالفعل بواسطة برنامج التحويل البرمجي AOT ، وبالتالي فإن المتصفح لا داعي للقلق كثيرًا بشأن اكتشاف التغيير وإنشاء المكونات وحقن التبعية.

تجميع AOT

وبالتالي نقوم بنقل الترجمة خارج وقت التشغيل (المستعرض) إلى إنشاء التعليمات البرمجية المصدر. يحدث هذا التجميع مرة واحدة فقط في وقت البناء ولم نعد بحاجة إلى شحن المترجم الزاوي وقوالب HTML في الحزمة.

في Angular 5+ ، سوف تكون قادرًا على إهمال JiT والانتقال إلى AoT الكامل ، حتى في بنيات التطوير !!!

تدفق الأحداث مع تجميع Ahead-of-Time

  • تطوير التطبيق الزاوي باستخدام TypeScript → تجميع التطبيق مع ngc → يؤدي تجميع القوالب باستخدام المحول البرمجي الزاوي ويولد (عادة) TypeScript
  • تجميع كود TypeScript لجافا سكريبت → تجميع → تصغير → نشر
  • Client → قم بتنزيل جميع الأصول → bootstraps الزاوي وعروض التطبيق
AOT حزمة نظرة عامة

ميزات AOT

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

مترجم في رد الفعل

يدعم JSX كلاً من Babel و TypeScript منذ بداية الوقت الذي جعل التكامل مع JavaScript بناءً سهلًا ولا يتفاعل مع الإصدار الذي يستخدمه كل من Babel و TypeScript والذي يعد مصدر قلق أقل.

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

لإعلام المترجم React ما هو المكون الجذر للتطبيق الخاص بك ، يجب عليك استخدام دالة عمومية Prepack تسمى __optimizeReactComponentTree (MyRootReactComponent). على سبيل المثال في كود التسجيل الخاص بك (قبل تجميعه ونقله إلى Prepack) ، يمكنك القيام بما يلي:

// MyComponent.js
استيراد رد من "رد فعل" ؛
الطبقة MyComponent يمتد React.Component {
  يجعل() {
    return  Hello world! ؛
  }
}
// __optimizeReactComponentTree معروف فقط بـ Prepack
/ / لذلك نحن نلفها في شرطية حتى لا يزال الرمز يعمل
// لاختبار التنمية المحلية دون Prpeack
إذا (شامل .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent)؛
}
module.exports = MyComponent؛

تتفاعل React مع شفرة JavaScript التي تتعامل مع DOM الظاهري بينما تقوم Angular بتجميع شفرة JavaScript التي تتعامل مع DOM مباشرة. لا يوجد فهم عميق لكل من الزاوي ويتفاعل على مستوى الشفرة. يتيح استكشاف المزيد على مدونتي القادمة. :)