البدء: تحسين تطبيق Angular

هل تريد جعل موقعك الإلكتروني المستند إلى Angular سريعًا وسهل الاستخدام قدر الإمكان؟ لقد وصلت إلى المكان المناسب.

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

تركّز هذه المجموعة على خمسة مجالات رئيسية لتحسين تطبيق Angular:

  • تحسين أداء تطبيقك لزيادة الإحالات الناجحة وتفاعل المستخدمين
  • تحسين موثوقية تطبيقك على الشبكات ذات الأداء المنخفض من خلال ذاكرة التخزين المؤقت المُسبَق لملفات الأصول باستخدام مشغّل خدمات Angular
  • جعل تطبيقك قابلاً للاكتشاف لمحرّكات البحث وبرامج تتبُّع وسائل التواصل الاجتماعي باستخدام العرض المُسبَق والعرض من جهة الخادم
  • إتاحة تثبيت تطبيقك لتقديم تجربة مستخدم مشابهة لتجربة استخدام تطبيق iOS/Android

ستصف كل مشاركة في المجموعة تقنيات يمكنك تطبيقها مباشرةً على تطبيقاتك.

ما هي العناصر غير المضمّنة في هذه المجموعة؟

تفترض هذه المجموعة أنّك على دراية بإطار عمل Angular وTypeScript. إذا لم تكن واثقًا من استخدامهما بعد، يمكنك الاطّلاع على مستندات TypeScript ودليل البدء باستخدام Angular على angular.io.

بدء مشروع

تتيح لك واجهة سطر أوامر Angular (CLI) إعداد تطبيق Angular بسيط من جهة العميل بسرعة. يقدّم هذا المنشور مقدّمة قصيرة عن واجهة برمجة التطبيقات، بينما توضّح المشاركات الأخرى في المجموعة كيفية إضافة ميزات أكثر تقدمًا، مثل العرض من جهة الخادم ودعم عمليات النشر.

إعداد سطر الأوامر

للبدء، ثبِّت واجهة برمجة التطبيقات على مستوى النظام وتأكَّد من أنّ لديك أحدث إصدار من خلال تنفيذ الأوامر التالية:

npm i -g @angular/cli
ng
--version

تأكَّد من أنّ الأمر الأخير يعرض الإصدار 8.0.3 أو إصدارًا أحدث.

بدلاً من ذلك، إذا كنت لا تريد تثبيت واجهة برمجة التطبيقات (CLI) على مستوى النظام، يمكنك تثبيتها على الجهاز وتشغيلها باستخدام الأمر npx:

npm i @angular/cli
npx ng
--version

إنشاء المشروع

لإنشاء عملية تنفيذ مشروع جديدة:

ng new my-app

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

بعد اكتمال عملية الإعداد بنجاح، ابدأ تطبيقك من خلال تشغيل:

cd my-app
ng serve

من المفترض أن تتمكّن الآن من الوصول إلى تطبيقك على http://localhost:4200.

ما هي الخطوات التالية؟

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

  • تقسيم الرموز على مستوى المسار في Angular
  • ميزانيات الأداء باستخدام Angular CLI
  • استراتيجيات التحميل المُسبَق للمسارات في Angular
  • تحسين ميزة رصد التغييرات في Angular
  • إنشاء قوائم افتراضية كبيرة باستخدام Angular CDK
  • التخزين المؤقت المُسبَق باستخدام "مشغّل خدمات Angular"
  • مسارات التقديم المُسبَق باستخدام واجهة سطر الأوامر في Angular
  • العرض من جهة الخادم باستخدام Angular Universal
  • إضافة بيان تطبيق ويب باستخدام Angular CLI