الصيف الآن هو وقت العام الذي تقام فيه مؤتمرات وفعاليات أخرى في جميع أنحاء العالم. يطغى المبرمجون في هذا الوقت حرفيًا على المعلومات الجديدة ، والتي عادة ما يصعب استيعابها.
يشبه عالم التطوير في الواجهة الأمامية القطار الذي يتحرك بدون توقف. نعلم جميعًا مدى صعوبة مواكبة هذا القطار. تستغرق مشاهدة مقاطع الفيديو الخاصة بالمؤتمرات وقتًا طويلاً ، ونتيجة لذلك ، يكون من الواضح أن الكثير منا ، بعد عمل المكتب ، يفضلون مشاهدة الأفلام على Netflix.
يقول مؤلف المادة ، التي ننشر ترجمتها ، لهذا السبب قرر مساعدة كل من يريد فهم ابتكارات Angular. هنا سنتحدث عن الوضع الحالي لـ Angular ، وعن الميزات الجديدة لهذا الإطار ، وعن الاتجاهات الحالية.
حول التوسع الزاوي
وفقًا للبيانات المقدمة في ng-conf 2019 بواسطة Brad Green ، وهو عضو في فريق التطوير Angular ، نما نطاق Angular بنحو 50٪ على مدار العام!
من الواضح أن هذه البيانات قد تتأثر بحقيقة أن العديد من المشاريع في طور الانتقال من Angular 1.X إلى الإصدارات الأحدث من الإطار. لكن 50 ٪ لا يزال مؤشرا رائعا.
الزاوي لا تنمو بسرعة مثل Svelte أو Vue. لا يستخدم هذا الإطار على نطاق واسع مثل React. ولكن على عكس ما يمكنك قراءته حول الأطر الأخرى على الموارد مثل Reddit أو Twitter ، فإن Angular في صحة جيدة ويستخدمها ملايين من المطورين والفرق.
الزاوي لديه بنية تحتية كبيرة وديناميكية.
على الرغم من أن Angular لديها العديد من الأدوات المضمنة المفيدة التي أنشأها فريق التطوير الأساسي ، إلا أن نظامها البيئي ، مجتمع من المتحمسين الذين يساهمون في تطويره ، كبير للغاية. إنها ، بالإضافة إلى ذلك ، ممثلة بمشاريع ذات جودة عالية للغاية.
جنبا إلى جنب مع الإطار الأساسي ، يمكنك استخدام الكثير من الأدوات المثيرة للاهتمام. وهي نتحدث عن ما يلي:
- التكامل العميق مع أدوات ممتازة ، وتطوير ديناميكي. من بينها ، يمكن الإشارة إلى TypeScript و RxJS. تطوير هذه التقنيات له تأثير إيجابي مباشر على الزاوي.
- أنواع مختلفة من المكتبات لإدارة حالة التطبيق.
- أدوات لتحليل وتحسين جودة الرمز. مثل Codelyzer .
- مكتبات عناصر واجهة المستخدم والمكونات والتوجيهات وخطوط الأنابيب وما إلى ذلك.
- مجموعة كبيرة من الإضافات لمختلف IDEs.
- المكتبات وأطر اختبار التطبيقات.
- وثائق تفصيلية عالية الجودة يتم العمل عليها من قِبل كل من أعضاء المجتمع والفريق الزاوي. يتضمن ذلك إرشادات عملية وأدلة ومواد تدريب وكتب ودورات فيديو. على الرغم من أن هذا هو العنصر الأخير في هذه القائمة ، إلا أنه لا يقل أهمية عن العناصر الأخرى.
في الأقسام التالية ، سنركز على بعض الأدوات المهمة بشكل خاص والتي يمكنك استخدامها عند تطوير مشاريع Angular.
CLI الزاوي
ngAngular CLI وعملية التحديث الزاوي بسيطة للغاية
هذه ليست كلمات فارغة.
هنا يمكنك العثور على قصة جيدة حول كيفية ترقية مشروع BlueWeb ، الذي يخدم سنويًا نصف مليار مستخدم ، من Angular 7 إلى Angular 8 في يوم عمل واحد. هذا إنجاز رائع ، بالنظر إلى أن الانتقال من الإصدار الثاني إلى الإصدار الرابع من Angular استغرق 30 يومًا من نفس المشروع.
هذا يثبت قيمة كبيرة من الزاوي CLI. يمكن أن يؤدي استخدام هذه الأداة إلى رفع الإنتاجية إلى مستوى لم أقابله شخصيًا من قبل.
في أيامنا هذه ، أصبح من الصعب للغاية تخيل العمل بدون CLI Angular.
▍ أداة الرياضيات
أداة Angular Schematics هي شيء من المرجح أن يستخدمه مطورو Angular يوميًا. على سبيل المثال ، أنا متأكد من أنك تستخدم هذا الأمر غالبًا:
ng generate component my-component
يعتمد على أداة Schematics المدمجة في Angular CLI.
ربما يكون الأمر جديدًا بالنسبة لك للمطورين الفرصة
لإنشاء قواعد خاصة بهم في الرياضيات. استخدامها يسهل العمل مع أجزاء التعليمات البرمجية المستخدمة بشكل متكرر.
بناة ▍API
تتيح لك واجهة برمجة تطبيقات API -
توسيع أو توسيع الفرق الحالية . على سبيل المثال ، يمكنك إنشاء فريق يقوم بإجراء الاختبارات باستخدام Jest و Cypress ، بدلاً من استخدام Jasmine و Protractor. يمكنك ، على سبيل المثال ، استخدام linter بديل.
ميزات جديدة مثيرة للاهتمام من الإطار
في وقت كتابة هذه المادة ، تم بالفعل إصدار الإصدار 8 من Angular ، والذي يحتوي على العديد من التحسينات والميزات الجديدة.
لا يوجد هنا من شأنه أن يغير بشكل خطير الطريقة التي يتم بها استخدام هذا الإطار. عادةً ما يُنظر إلى بيان مماثل بشأن إصدار جديد من الأداة على أنه خبر سار. ولكن في Angular 8 ، هناك العديد من التحسينات غير المرئية ، إذا جاز التعبير ، بالعين المجردة. بفضلهم ، أصبحت المشروعات الزاويّة أصغر وأسرع. تجعل هذه التحسينات عملية تطوير التطبيق الزاوي أكثر متعة من ذي قبل. بالإضافة إلى ذلك ، يحتوي الإصدار الجديد من الإطار على نظام تجسيد جديد جاهز للاستخدام بالكامل تقريبًا.
loading تحميل التفاضلية
قد يبدو "التحميل التفاضلي" ، بناءً على اسم هذه التكنولوجيا ، شيئًا معقدًا للغاية ، ولكنه في الحقيقة ليس كذلك. باختصار ، بفضل هذه الميزة ، يقوم المترجم بإنشاء مجموعتين. واحد للمتصفحات الحديثة. لا يوجد كود polyfill في ذلك. والثاني هو للإصدارات القديمة من المتصفحات.
تقوم معظم المتصفحات الحديثة بتنزيل حزم حديثة. والمتصفحات الأقدم التي تحتاج إلى تجميعات تنزيل polyfill المصممة خصيصًا لهم
هذا ابتكار مفيد للغاية. نظرًا لأنه من المحتمل أن يعمل معظم المستخدمين في أحدث إصدارات المتصفحات ، فإن هذا يؤدي إلى حقيقة أن الحزم ذات polyfill ، أكبر من الحزم الحديثة ، لا يستخدمها سوى عدد صغير من المستخدمين.
ebWeb العمال
ربما تكون قد سمعت بالفعل عن عمال الويب ، لذلك لن نتعامل مع شرح جوهر هذه التكنولوجيا. لكنك قد لا تعرف مدى سهولة دمج عمال الويب في التطبيقات في الإصدار Angular الجديد.
هنا يمكنك قراءة المزيد حول هذا الموضوع.
▍ أدوات CDK
CDK عبارة عن مجموعة أدوات تم إصدارها بواسطة فريق يقوم بتطوير مكونات Angular. في ذلك يمكنك أن تجد التجريدات المستخدمة من قبل
Angular Material ، والتي هي مستقلة عن الأنماط.
على سبيل المثال ، بفضل CDK ، لدى المطور توجيهات تسمح لك بتنفيذ الميزات التالية:
- العمل مع الكائنات في نمط "السحب والإفلات".
- استخدم مساحات النص التي يتم تغيير حجمها تلقائيًا.
- النوافذ المنبثقة.
- التمرير الظاهري.
تعد CDK أداة مفيدة للغاية نظرًا لحقيقة أن معظم التطبيقات يمكنها استخدام تجريدات عالية الجودة على نطاق واسع ، يطبق كل منها وظائف محدودة فقط. هذا أفضل بكثير من الاستخدام الواسع وغير المبرر دائمًا للمكونات الكاملة. Angular Material هي مجموعة رائعة من المكونات ، ولكن قوة CDK هي أنها تتيح للمطور إنشاء مكوناته الخاصة من لبنات البناء الأساسية.
▍ اللبلاب تقديم المحرك
اللبلاب هو تطور جديد مثير جدا للاهتمام ، والذي هو محرك التقديم. لم يكتمل العمل على اللبلاب بعد ، يتم تعطيل هذا المحرك افتراضيًا. ولكن ، بدءًا من Angular 7 ، يمكن بالفعل تشغيله واستخدامه. من المتوقع أن يكون اللبلاب المحرك الرئيسي للتقديم في Angular 9.
إليك ما يمكنك توقعه من محرك Ivy كامل المواصفات:
- تقليل حجم الحزم.
- قوالب التصحيح.
- تجميع أسرع للمشروع واختبار أسرع.
- تصحيح الأخطاء الموجودة.
إذا تحدثنا عن تصحيح الأخطاء ، فإليك هنا لقطة شاشة يمكنك من خلالها رؤية نقطة توقف التشغيل في وحدة تحكم Chrome.
تصحيح التعليمات البرمجيةكما ترى ، فإن توجيه
ngForOf يوفر لنا معلومات حول القيمة التي تم تمريرها.
منصات الزاوي والمحمولة
▍Ionic
أيوني هو إطار لتطوير التطبيقات النقالة. على الرغم من أن مكوناته الأساسية يتم إنشاؤها باستخدام Stencil ، إلا أنها توفر للمطوّرين أدوات تجريدية تسمح باستخدام Ionic مع الزوايا والأطر الأخرى.
▍NativeScript
NativeScript هو إطار أصلي لتطوير تطبيقات الجوال يشبه React Native. إنه يتميز بالتكامل العميق مع Angular - جنبًا إلى جنب مع دعم Vue والقدرة على استخدامه للتطوير في جافا سكريبت خالص. لسوء الحظ ، لم تكن تجربتي معه ناجحة بشكل خاص. لا أستطيع وضعه على قدم المساواة مع React Native. ومع ذلك ، إذا كنت جادًا في تطوير تطبيقات الهاتف المحمول ، فجرّب NativeScript.
تجريب
▍ الياسمين والمنقلة
لا يحتاج الياسمين والمنقلة إلى مقدمة. هذه هي الأدوات القياسية لاختبار التطبيقات الزاوي. يتم اختبارها جيدًا بمرور الوقت ، ويتم تحديثها بانتظام ، وتعمل بشكل جيد مع Angular.
est العدالة والسرو
أصبح اختبار التطبيقات الزاوية باستخدام Jest و Cypress ممكنًا بفضل الأدوات الجديدة التي تستند إلى API Builders والتي تعد جزءًا من Angular CLI.
Jest عبارة عن إطار اختبار وحدة قائمة على الياسمين. تم تطويره على Facebook. هذا هو الإطار القياسي لاختبار مشاريع React ، يتم توزيعه على نطاق واسع بسبب سرعته. كثير من الناس يفضلون استخدامه على الياسمين. إذا كنت تميل إلى Jest أيضًا - يمكنك الآن استخدامه لاختبار التطبيقات الزاوية.
السرو هو إطار اختبار تطبيق يحظى باحترام كبير. ليس من قبيل الصدفة أن يعاملها مجتمع التنمية بشكل جيد للغاية. وهي مستقلة عن السيلينيوم أو WebDriver. يتيح لك Cypress العمل مع سجلات الفريق ، ويعرف كيفية إدارة حركة مرور الشبكة. إنه مستقر تمامًا ، لذلك يمكنك أن تتوقع أن تكون النتائج التي تم الحصول عليها من خلال مساعدتها مفهومة تمامًا ويمكن التنبؤ بها.
Library أدوات اختبار مكتبة الزاوي
Angular Testing Library هي مجموعة من الأدوات لاختبار مكونات واجهة المستخدم مع التركيز على إعادة إنتاج إجراءات المستخدم.
هذا يعني أن هذه المكتبة تضغط على المبرمج للتأكد من أنه لا يعمل مع المكونات برمجياً. يهدف إلى اختبار سلوك المكون. تنفذ المكتبة الإجراءات التي يقوم بها المستخدمون عادة.
على سبيل المثال ، عند العمل باستخدام أدوات من هذه المكتبة ، لا يتم استخدام هذه الإنشاءات:
myComponent.onClick();
بدلاً من ذلك ، يتم محاكاة السلوك الطبيعي للمستخدم:
const { getByText, click } = await render(CounterComponent, { componentProperties: { counter: 5 } }); click(getByText('+'));
إدارة الدولة
▍NgRx
NgRx هي مكتبة لإدارة حالة التطبيقات ، تم إنشاؤها تحت تأثير الأفكار المضمنة في Redux. NgRx على الأرجح مكتبة إدارة الحالة الأكثر استخدامًا في التطوير الزاوي. يشير اسم المكتبة إلى أنه يستخدم بجدية تدفقات RxJs.
▍NGXS
NGXS هي مكتبة بديلة لإدارة الحالة في تطبيقات Angular ، على غرار Redux. إذا قارنت NGXS و RxJS ، اتضح أن ميزات NGXS هي أنه يستخدم الكثير من الطبقات والديكورات. يتم ذلك لتقليل مقدار رمز الغلاية. من المحتمل أن تكون ميزة NGXS هذه حاسمة عند اختيار مكتبة لإدارة الحالة إذا اعتاد شخص يبحث عن مثل هذه المكتبة على استخدام الفصول الدراسية.
▍Akita
أكيتا هي مكتبة إدارة الدولة التي وضعتها Datorama. تستند هذه المكتبة أيضًا إلى RxJS. إذا قارنتها بالمكتبتين السابقتين ، اتضح أن ميزتها هي أنه يمكن استخدامها في المشاريع التي لا تستخدم Angular فيها. هذا يعني أن اختيار مكتبة Akita على المدى الطويل يمكن أن يؤدي إلى تحسين فرص إعادة استخدام رمز المشروع.
take ربما فقط تأخذ RxJs؟
يمكنني تقديم إجابة إيجابية على السؤال المطروح في عنوان هذا القسم. كل هذا يتوقف على ما إذا كنت تحب المكتبات التي تذكرنا بـ Redux ، وما إذا كان المشروع يحتاج إلى مكتبة لإدارة الحالة. إذا رغبت في ذلك ، يمكنك إنشاء خدمات تخزن الحالة باستخدام أدوات
RxJS القياسية.
مكتبات مكونات واجهة المستخدم
▍StoryBook
ستوريبوك ليست في الحقيقة مكتبة لمكونات واجهة المستخدم. هذه هي الأداة التي تسمح لك بإنشاء مكونات معزولة وتجعل من الممكن دراسة المكونات ومتغيراتها.
هذه أداة رائعة في السابق ، كان متاحًا فقط لمطوري React. أنا أحسدهم بعد ذلك. لكن الآن يمكن للمطورين الزاويين استخدامه ، لذلك لا يسعني إلا أن أذكرها.
ng مادة حلقية
سنقول هنا بضع كلمات عن مكتبة
Angular Material سيئة السمعة ، والتي تعطي أيدي مطور حديث مجموعة لطيفة من المكونات المصممة لأحدث إصدار من Angular.
الخلفية للتطبيقات الزاوي
▍Firebase
Firebase هي عبارة عن منصة لتطوير التطبيقات مملوكة لشركة Google. نتيجة ذلك هي وجود مكتبة رسمية لـ
Firebase و Angular -
AngularFire . تستخدم هذه المكتبة RxJS obsables لدفق البيانات. تم دمجها بعمق وكفاءة مع الزاوي.
▍GraphQL
ربما تعتقد أن متعة العمل مع GraphQL متاحة فقط لمبرمجي React. إذا كان الأمر كذلك ، فأنت مخطئ. هناك نسخة من مكتبة
أبولو لل Angular كذلك. ما يمكنك إنشاؤه باستخدام هذه المكتبة هو بديل رائع لـ Firebase. Apollo هو لأولئك الذين يفضلون العمل مع GraphQL.
▍NestJS
NestJS هو إطار ويب لـ Node.js مصمم لتطوير تطبيقات الخادم. من الأمثلة إلى ذلك ، يمكننا أن نستنتج أن المفاهيم الأساسية لل Angular كان لها تأثير كبير عليها. هذه هي الوحدات ، وحدات التحكم ، الناقلات ، وهلم جرا. إذا كنت تحب الزاوي ، فأنت ربما تحب NestJS كذلك.
إذا كنت تستخدم
مساحات عمل Nx ، فإن إنشاء إطار لتطبيق مكدس كامل يستند إلى Angular و NestJS هو مسألة تنفيذ أمر واحد في وحدة التحكم.
النتائج
نتيجة لذلك ، يمكننا القول أن النظام البيئي الهائل الذي تطور حول Angular يوفر لكل من يريد أدوات عالية الجودة وموثوقة لحل مجموعة واسعة من المشاكل.
بالطبع ، لا يمكنني أن أخبر هنا عن عشرات المكتبات والأدوات المفضلة لدي. لو كنت قد فعلت هذا ، فإن هذه المواد ستكون بلا نهاية. لكنني آمل أن يكون هذا المقال قد قدم لك لمحة عامة عن ظاهرة تطوير الشبكة الحديثة تسمى Angular. أرجو أن تجد هنا شيئًا ، في المستقبل ، يمكنك استخدامه في مشاريعك.
أعزائي القراء! ما الذي يعجبك أفضل (أو لا يعجبك) في Angular 8؟
