Angular 10 - ما يجب أن تعرفه عنه

نشرت: 2020-10-07

أصدرت Angular مؤخرًا إصدارًا جديدًا في 24 يونيو 2020. ولم يتم طرحه إلا بعد 4 أشهر من إصدار الإصدار 9.0 من Angular. أحدث إصدار من Angular 10 هو إصدار تجريبي - مما يعني أن فريق Angular يقترب من الإصدار النهائي لأحدث إصدار من إطار العمل هذا الذي طورته Google والموجه للطباعة.

إذا كنت مطور ويب أو شخصًا يتطلع إلى تطوير تطبيق ويب لعملك ، فيجب أن تعرف ما الذي يقدمه هذا الإصدار الجديد. نظرًا لأن الإصدار التجريبي قد تم طرحه في غضون 4 أشهر من إصدار الإصدار الأخير ، فقد تتساءل عما إذا كان هذا الإصدار ناجحًا أم خاطئًا! نحن هنا لمساعدتك في العثور على الجواب. دعنا نلقي نظرة فاحصة على الميزات الرئيسية للزاوية 10.

ميزات Angular 10

على الرغم من أن فريق Angular أكد أن الإصدار الأخير سيركز بشكل أساسي على أدوات الجودة والنظام البيئي بدلاً من تقديم عدد كبير من الميزات الجديدة ، فقد أجرينا دراسة مكثفة وقدمنا ​​لك قائمة شاملة بالعروض القيمة التي يمكنك توقعها من الإصدار . دعنا نتحقق من ذلك بعد ذلك.

  • منتقي النطاق الزمني الجديد

تم تجهيز Angular Material UI Component Library الآن بمنتقي نطاق زمني جديد. لست متأكدا ما هذا؟ يمكن إرفاق منتقي النطاق الزمني بصفحات الويب. تنبثق التقويمات لاختيار الأوقات أو التواريخ أو أي فترة زمنية محددة مسبقًا مثل "آخر 20 يومًا".

إذا كنت تريد أن يختار المستخدمون نطاقًا من التواريخ بدلاً من تاريخ واحد فقط ، فيمكنك استخدام منتقي نطاق التاريخ ومكونات إدخال نطاق التاريخ والنطاق.

  • إعدادات اختيارية أكثر صرامة

يحتوي Angular 10 على إعداد مشروع أكثر صرامة أثناء إنشاء مساحة عمل جديدة باستخدام ng new. بمجرد تمكين هذه العلامة ، ستقدم بعض الإعدادات الجديدة في مشروعك مثل تحسين إمكانية الصيانة ، والسماح لـ CLI بإجراء تحسين متقدم في تطبيقك ، مما يساعد على اكتشاف الأخطاء في وقت مبكر ، وما إلى ذلك.

فيما يلي نطاق عمل أساسي للعلامة الصارمة:

-تحول نوع القالب إلى التحقق الصارم
- التمكين الصارم أكثر في TypeScript
-تكوين قواعد الفحص لمنع استخدام "أي" كإقرار نوع
-تقليل الميزانيات الافتراضية للحزمة

  • تحذيرات حول CommonJS Imports

يؤدي استخدام تبعية معبأة مع CommonJS إلى جعل الحزم كبيرة وبالتالي يؤدي إلى إبطاء التطبيق. يحذر Angular 10 المطورين بمجرد أن يسحب التصميم إحدى هذه الحزم. بهذه الطريقة ، يمكنهم إعلام تبعياتهم بأنهم يفضلون حزمة وحدة ECMAScript (ESM).

  • التحديثات

تم إدخال بعض التحديثات الرئيسية على تبعيات Angular لتتزامن مع نظام JavaScript البيئي. هذه كالتالي:

- تم تحديث TypeScript إلى TypeScript 3.9. يساعد الفريق على العمل على تحسين الأداء والاستقرار.
تم تحديث -TSLint إلى الإصدار 6
تم تحديث -TSLib إلى الإصدار 2.0

كما تم تحديث تخطيط المشروع. لذلك ، يمكنك رؤية ملف tsconfig.base.json جديد في Angular 10. هذا الملف يدعم بشكل أفضل IDEs ، وبناء نوع حل أداة ، وتكوينات الحزمة.

بخلاف ذلك ، فإن أحدث إصدار من Angular يمكّن أشياء مثل تسريع المحول البرمجي وتجارب التحرير والإصلاحات الفورية والإكمال.

  • تحسين أداء دول مجلس التعاون الخليجي

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

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

  • دمج عدة ملفات

يدعم أحدث إصدار من Angular دمج مستندات الترجمة المتعددة دون أي متاعب. في الإصدارات السابقة ، كان من الممكن تحميل ملف واحد فقط. الآن يمكن للمستخدمين تحديد مستندات متعددة لكل لغة ويمكن دمج المعاملات من جميع الملفات بواسطة معرف الرسائل. سيتم وضع الوثيقة الأكثر أهمية أولاً مع الترجمات الاحتياطية لاحقًا.

  • مهلة القفل غير المتزامن

شيء آخر مثير للاهتمام حول Angular 10 هو أنه تم تكوين مهلة قفل Async في هذا الإصدار. هذا يدعم ملف ngcc.config.js لضبط تأخيرات إعادة المحاولة ومحاولات إعادة المحاولة في AsyncLocker. يتيح اختبار التكامل للمطورين مراقبة المهلة واستخدام ملف ngcc.config.js لتقليل فترة المهلة ومنع الاختبار من أن يستغرق وقتًا طويلاً. لا عجب في أن المتخصصين في شركة تطوير تطبيقات الويب يرحبون بأحدث إصدار من Angular بارتياح كبير!

  • جهاز التوجيه

يمكن أن يعود حارس CanLoad إلى UrlTree في أحدث إصدار Angular. يقوم حارس CanLoad الذي يعيد UrlTree بإبطال أي تنقل متطور ويساعد بدوره على إعادة التوجيه. يتطابق هذا مع السلوك الحالي مع حراس CanActivate المتاح - تتم إضافة هذه أيضًا هنا. ومع ذلك ، لا ينتج عن ذلك أي تأثير على التحميل المسبق.

  • تجميع

يجمع Ahead-of-Time (AOT) تطبيقًا ومكتباته في وقت الإنشاء. هذه ممارسة شائعة منذ Angular 9. يمكنها تحويل الرموز أثناء وقت الإنشاء حتى قبل تنزيل المتصفح وتشغيل هذا الرمز لاحقًا. وبطبيعة الحال ، يضمن هذا عرضًا أسرع في المتصفح. يزيل المحول البرمجي طلبات AJAX المنفصلة للملفات المصدر عن طريق تضمين قوالب HTML الخارجية وأوراق أنماط CSS داخل تطبيق JavaScript.

هناك بعض التغييرات الواضحة التي تم إجراؤها في AOT في Angular 10:

1. يساعد تجميعها التدريجي في الوصول إلى أوقات بناء أفضل
2. مع رمز تم إنشاؤه متوافق للغاية مع اهتزاز الشجرة ، يمكنه الوصول إلى أحجام بناء أفضل
3. يمكّنك الإصدار من استكشاف العديد من الميزات الجديدة مثل التحميل البطيء للمكون بدلاً من الوحدات النمطية أو البرمجة الوصفية أو المكونات ذات الترتيب الأعلى ، وأحدث نظام لاكتشاف التغيير لا يعتمد على Zone.js ، إلخ.

  • علة ثابتة

في هذا الإصدار ، تم إجراء عدد من إصلاحات الأخطاء. يتضمن ذلك إزالة أي مثيل غير معنون للنطاق في المحول البرمجي ، وحل الأخطاء المتعلقة بالترحيل أثناء استيراد رمز غير موجود ، وتحديد الوحدات النمطية المتأثرة بالتجاوزات في TestBed ، وغيرها. علاوة على ذلك ، هناك أيضًا حل بديل في جوهر إصلاح خطأ Terser Inlining.

  • مشاركة مجتمعية أفضل

لدى Angular بالفعل مجتمع مطور عالمي كبير يقدم باستمرار عروض قيمة لمشاريع Angular عبر الطيف بأكمله. تخطط المنظمة نفسها مؤخرًا لاعتماد استراتيجيات وإجراء استثمار لتقوية المجتمع وجعل النظام الأساسي أفضل.

  • الإهلاك والإزالة

لم يعد تنسيق الحزمة الزاوي يتضمن حزم FESM5 أو ESM5 بعد الآن. يتيح لك هذا توفير 119 ميغابايت من وقت التنزيل والتثبيت أثناء تشغيل تثبيت الغزل أو تثبيت npm في مكتبات وحزم Angular. يمكن تجاهل هذه التنسيقات نظرًا لأن أي خفض مستوى لمساعدة ES5 يتم إجراؤه في نهاية عملية التطوير.

علاوة على ذلك ، أوقفت مؤسسة Angular أي دعم للمتصفحات القديمة مثل IE9 و 10 و Internet Explorer Mobile.

  • تغييرات أخرى

يجلب Angular 10 بعض التغييرات الرائدة. على سبيل المثال ، يتم تحديث المنطق في المراسلات لتنسيق فترات اليوم التي تمتد إلى ما بعد منتصف الليل. إذا كان التطبيق الخاص بك يستخدم formatDate أو DatePipe أو حتى رموز التنسيق b و B ، فسوف يتأثر بهذا التغيير.

تغيير آخر هو أن أي محلل يقوم بإرجاع EMPTY سيلغي التنقل. يجب على المطورين تحديث أدوات الحل ببعض القيمة المحددة مثل الافتراضي! فارغ.

لا تحتوي Angular NPM على بعض تعليقات jsdoc لدعم التحسينات المتقدمة لـ Closure Compiler. يجب على أولئك الذين يستخدمون Closure Compiler أن يستهلكوا بشكل أفضل حزم Angular المبنية مباشرة من المصادر بدلاً من استهلاك الإصدارات المنشورة على NPM. لفترة مؤقتة ، يمكن للمستخدمين استخدام خط أنابيب البناء الحالي.

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

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

كيفية التحديث إلى Angular 10

للترقية إلى أحدث إصدار من Angular ، يمكنك استخدام الأمر التالي:

ng update @ angular / cli @ angular / core

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

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