هل تريد جعل موقع Angular الإلكتروني سريعًا وسهل الاستخدام قدر الإمكان؟ لقد وصلت إلى المكان المناسب.
ما هو Angular؟
Angular هو إطار عمل لإنشاء واجهات المستخدم. ويوفّر وحدات أساسية لمساعدتك في إعداد تطبيق قابل للصيانة والتوسّع بسرعة. يتيح Angular للمطوّرين إنشاء تطبيقات تعمل على الويب أو الأجهزة الجوّالة أو أجهزة الكمبيوتر المكتبي.
ما الذي تتضمّنه هذه المجموعة؟
تركّز هذه المجموعة على خمسة جوانب رئيسية لتحسين تطبيق Angular:
- تحسين أداء تطبيقك لزيادة معدّل الإحالات الناجحة وتفاعل المستخدمين
- تحسين موثوقية تطبيقك على الشبكات الضعيفة من خلال التخزين المؤقت لمواد العرض باستخدام مشغّل خدمات Angular
- جعل تطبيقك قابلاً للاكتشاف من قِبل محركات البحث وبرامج التتبّع الخاصة بوسائل التواصل الاجتماعي باستخدام العرض المُسبق والعرض من جهة الخادم
- جعل تطبيقك قابلاً للتثبيت لتوفير تجربة مستخدم مشابهة لتجربة تطبيق iOS/Android
ستصف كل مشاركة في المجموعة أساليب يمكنك تطبيقها مباشرةً على تطبيقاتك.
ما الذي لا تتضمّنه هذه المجموعة؟
تفترض هذه المجموعة أنّك على دراية بـ Angular وTypeScript. إذا لم تكن واثقًا من معرفتك بهما بعد، يمكنك الاطّلاع على مستندات TypeScript ودليل البدء باستخدام Angular على angular.io.
بدء مشروع
تتيح لك واجهة سطر الأوامر (CLI) في Angular إعداد تطبيق Angular بسيط من جهة العميل بسرعة. يتضمّن هذا المنشور مقدمة قصيرة عن واجهة سطر الأوامر، بينما تعرض المنشورات الأخرى في المجموعة كيفية إضافة الميزات المتقدّمة، مثل العرض من جهة الخادم ودعم النشر.
إعداد واجهة سطر الأوامر
للبدء، ثبِّت واجهة سطر الأوامر على مستوى العالم وتأكَّد من أنّ لديك أحدث إصدار من خلال تنفيذ الأوامر التالية:
npm i -g @angular/cli
ng version
تأكَّد من أنّ الأمر الأخير يعرض الإصدار 8.0.3 أو إصدارًا أحدث.
بدلاً من ذلك، إذا كنت لا تريد تثبيت واجهة سطر الأوامر على مستوى العالم، يمكنك تثبيتها محليًا وتشغيلها باستخدام الأمر 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 Service Worker
- العرض المُسبَق للمسارات باستخدام واجهة سطر الأوامر في تطبيقات Angular
- العرض من جهة الخادم باستخدام Angular Universal
- إضافة بيان تطبيق ويب باستخدام Angular CLI