Angular هو إطار عمل تطبيقات الويب مفتوح المصدر الرائد من Google المصمم لتطوير تطبيقات فعالة ومتطورة من صفحة واحدة (SPAs). إنها منصة تطوير شاملة قادرة على بناء تطبيقات ويب تقدمية حديثة وتطبيقات مثبتة على الهاتف المحمول وسطح المكتب عبر Mac و Windows و Linux. بصرف النظر عن نظامها البيئي القوي للتطوير ، توفر Angular هيكلا نظيفا خارج الصندوق يمكن المطورين من اتباع أنماط التصميم لبناء المشاريع وتوسيع نطاقها وصيانتها. وهذا يسمح للمطورين بمزج المكونات ومطابقتها بسهولة، مما يؤدي إلى تصميم تطبيق سلس مع مكونات منفصلة.
ومع ذلك ، فإن كتابة التعليمات البرمجية فقط لإنشاء تطبيق Angular يمكن أن يؤدي لاحقا إلى مشكلات في الأداء وأوقات تحميل بطيئة. إن العمل مع أحدث الميزات من إطار العمل وإعادة تنظيم هيكل المشروع والملفات والتعليمات البرمجية بجد ليست سوى عدد قليل من الإجراءات التي يقوم بها المطورون لتحسين الأداء العام. تتطلب التوقعات العالية اليوم لأوقات التحميل بسرعة البرق من المطورين الانتباه إلى مجالات أخرى ، مثل وقت الإنشاء والنشر ، وتقنيات تحسين التعليمات البرمجية ، والاستراتيجيات التشغيلية لمراقبة مقاييس التطبيق أثناء وقت التشغيل من أجل تحسين أداء التطبيقات.
مشكلات عند تحديد أداء التطبيق وأوقات التحميل
نظرا لأن Angular هو إطار حديث قائم على الكتابة المكتوبة يوفر صفحات ويب ديناميكية ، فإنه يوفر بعض التحديات في مراقبة أدائه ووقت التحميل. من المزعج قياس وقت تقديم محتوى جديد على الصفحة بدقة لأن SPAs لا تؤدي إلى تشغيل تنقل جديد في المتصفح بمجرد تحميل صفحة الويب. لذلك ، لن توفر أدوات مراقبة HTTP (وكذلك أدوات مراقبة واجهة برمجة التطبيقات) مقاييس مهمة لتحسين أوقات التحميل نظرا لأن Angular لا يؤدي إلى تشغيل طلبات مستعرض جديدة إلى الخادم.
بالإضافة إلى ذلك ، على الرغم من أن استجابات HTTP تحدد نتيجة الطلب المرسل بواسطة صفحة ويب ، إلا أنها تقصر في فهم أوقات التحميل الحقيقية عندما يتم تحليل ملفات JavaScript المضمنة والموارد المرتبطة بها وتنفيذها وتقديمها حتى يتمكن المستخدمون من التفاعل الكامل مع الصفحة. من الضروري أن يكون لديك نهج مختلف حول كيفية اختبار ومراقبة أحداث جافا سكريبت في المتصفح من أجل الحصول على أوقات تحميل دقيقة من جانب العميل.
أدوات لتحسين أوقات التحميل
يقدم Angular قائمة بالأدوات والتقنيات التي يمكن أن تساعد في تقليل وقت تحميل التطبيق ومراقبة أدائه بمرور الوقت ، خاصة بعد أن يكون التطبيق قد توسع بما يكفي للتعامل مع العديد من الحسابات الثقيلة. بعض هذه التقنيات التي يمكن أن تساعد في تقليل وقت التحميل الأولي للتطبيق وتسريع التنقل في الصفحة هي تجميع Fore-of-Time (AoT) وتقسيم التعليمات البرمجية ووحدات التحميل المسبق. سنناقش هذه التقنيات بمزيد من التفصيل.
تجميع في وقت مبكر
هناك طريقتان رئيسيتان لتجميع تطبيق Angular: Just-in-Time (JiT) ، الذي يقوم بتجميع التطبيق في متصفح الويب في وقت التشغيل و Fore-of-Time (AoT) ، والذي كما ينص الاسم ، يقوم بتجميع التطبيق في وقت الإنشاء. يقوم برنامج التحويل البرمجي AoT بتجميع التعليمات البرمجية HTML و TypeScript أثناء عملية الإنشاء قبل أن يقوم مستعرض الويب بتنزيلها.
يساعد على تسريع عملية العرض عن طريق تقليل الوقت الذي يستغرقه التطبيق للتمهيد بشكل كبير. وبهذه الطريقة ، يقوم متصفح الويب بتحميل التعليمات البرمجية القابلة للتنفيذ مما يسمح له بعرض التطبيق على الفور دون الحاجة إلى انتظار التطبيق لتجميعه. علاوة على ذلك ، تقلل التعليمات البرمجية المجمعة مسبقا من عدد الطلبات غير المتزامنة إلى مصادر خارجية عن طريق إضافة تلك الموارد ، مثل قوالب HTML و CSS الخارجية ، داخل التطبيق. وبالتالي ، فإن التعليمات البرمجية المجمعة تخفف من طلبات AJAX المنفصلة لتلك الملفات. لذلك ، تصبح تجربة المستخدم أكثر سلاسة وأسرع.
تقسيم التعليمات البرمجية
باختصار ، يفصل تقسيم التعليمات البرمجية حزم جافا سكريبت الخاصة بالتطبيق بطريقة لا تخاطر بميزات التطبيقات. يحافظ على التحكم في شفرة جافا سكريبت الرئيسية خلال وقت التحميل الأولي. يمكن إجراء تقسيم التعليمات البرمجية على مستويات مختلفة داخل التطبيق ، مثل نقاط الدخول والوحدات النمطية المحملة ديناميكيا والتعليمات البرمجية المشتركة بمساعدة SplitChunksPlugin مع منع تكرار التعليمات البرمجية.
هناك طريقتان رئيسيتان لتقسيم التعليمات البرمجية في تطبيق Angular: تقسيم التعليمات البرمجية على مستوى المكون وتقسيم التعليمات البرمجية على مستوى المسار. الفرق الرئيسي بين النهجين هو أن تقسيم التعليمات البرمجية على مستوى المكون يحمل المكونات الفردية بكسل ، حتى بدون ملاحة الطريق ، في حين أن تقسيم التعليمات البرمجية على مستوى الطريق يحمل الطرق الفردية بكسل. على أي حال ، يمكن اختبار كلا النهجين بالنظر إلى TTI الخاص بالتطبيق (وقت التفاعل). TTI هو مؤشر أداء رائع للمقارنة به لأنه يقيس مقدار الوقت الذي يستغرقه التطبيق ليكون مستجيبا. بمعنى آخر ، كم من الوقت يستغرق تحميل التطبيق حتى يتمكن المستخدم من التفاعل معه.
وحدات التحميل المسبق
وحدات التحميل المسبق هي تقنية مقدمة في تطبيقات Angular تسمح بتحميل الوحدات في أقرب وقت ممكن باتباع القواعد المعمول بها. يمكن تحميل الوحدات مسبقا في نفس الوقت ، عند حدوث حدث معين أو مجرد عدد قليل محدد حسب الظروف. لدى المطورين إمكانية التحقق من مقدار الوقت الذي يستغرقه تحميل الوحدة النمطية والقيمة المتأصلة لاستخدام استراتيجية التحميل المسبق. تشبه وحدات التحميل المسبق في Angular إلى حد كبير التحميل الكسول باستثناء أنه يتم تحميل وحدات التطبيقات مباشرة بعد تحميل جميع الوحدات النمطية المحملة بعناية بنجاح. وبهذه الطريقة ، يتم تجاهل زمن الوصول المحتمل عندما ينتقل المستخدم إلى وحدة نمطية محملة بكسولة مع الاستمرار في الاستفادة من التحميل الأولي الأسرع للتطبيق لأنه يتم تحميل وحداته الأولية أولا.
استراتيجيات التحميل المسبق الافتراضية ل Angular هي PreloadAllModules و NoPreloading. الأول يعني أن جميع الوحدات القابلة للتحميل الكسولة يتم تحميلها مسبقا بينما يقوم الأخير بتعطيل أي تحميل مسبق. في حالة استخدام PreloadAllModules ، قد تواجه التطبيقات عنق الزجاجة إذا كان التطبيق يحتوي على عدد كبير من الوحدات. عندها عند النظر في استراتيجية مخصصة للتحميل المسبق يمكن أن تكون مفيدة.
قد يكون مفهوم استخدام استراتيجية التحميل المسبق المخصصة أكثر منطقية في سيناريو المؤسسة. على سبيل المثال ، يمكن أن يكون التحميل المسبق أولا لأغلى الوحدات النمطية على تلك الأقل تكلفة للموارد نهجا يمكن للمطورين استخدامه. علاوة على ذلك ، فإن اللحظة التي يتم فيها تحميل الوحدات مسبقا لها أيضا دور مهم في تقليل أوقات التحميل.
تحميل اختبار التطبيقات الزاوية الخاصة بك مع LoadView
يقترح LoadView حلا مبتكرا وشاملا للتعامل مع قيود أدوات مراقبة HTTP وتعزيز الأدوات التي يمتلكها مطورو Angular اليوم للتحكم في تطبيقاتهم ومراقبتها وتحسينها على جانب العميل. LoadView عبارة عن نظام أساسي لاختبار التحميل قائم على السحابة يوفر مراقبة اختبار الإجهاد لمواقع الويب وتطبيقات الويب وواجهات برمجة التطبيقات من خلال محاكاة الآلاف من الاتصالات المتزامنة في الوقت الفعلي ، مما يساعد على تحديد الاختناقات والتحقق من الأداء العام.
بعد إنشاء حساب ، يمكن للمطورين اختبار مواقع الويب وتطبيقات الويب الخاصة بهم عن طريق إنشاء جهاز ، يخزن موقع الويب أو التطبيق المراد اختباره. من خلال اختيار خيار موقع الويب ، يمكن لمطوري Angular اختبار وقت التحميل الأولي لصفحة الهبوط أو تسجيل الدخول الخاصة بتطبيقهم عن طريق تكوين سيناريو يحاول فيه آلاف المستخدمين الوصول إلى الصفحة في وقت واحد. من ناحية أخرى ، من خلال اختيار خيار تطبيق الويب ، يمكن لمطوري Angular برمجة واختبار وقت التحميل لحالات استخدام محددة لتطبيقهم.
على سبيل المثال ، ملء نموذج ، والتنقل عبر المسارات داخل التطبيق ، وفرز البيانات المحملة من الخادم ، وبشكل عام ، قياس TTI لتطبيقهم. يتيح LoadView للمستخدمين تخصيص نوع تحميل الاختبار الخاص بهم بثلاث طرق مختلفة إلى جانب خطة تنفيذ تقوم بإعداد عدد الاتصالات التي سيتم إنشاؤها على مدار فترة. بالإضافة إلى ذلك ، يأخذ LoadView خطوة أبعد من ذلك من خلال إمكانية ترتيب التوزيع الجغرافي للمستخدمين الافتراضيين المتصلين بموقع الويب.
يوفر LoadView للمهندسين طريقة فعالة وفعالة من حيث التكلفة لأتمتة عملية اختبار الحمل مقارنة بالطرق التقليدية. لا مزيد من الاستثمارات المكلفة والعمليات التي تستغرق وقتا طويلا. لا داعي للقلق بشأن المطورين والمختبرين بشأن البقاء ضمن الميزانيات المخصصة وإعداد البنية التحتية. يمكنهم التركيز على ما يفعلونه بشكل أفضل ، وهذا هو تنفيذ الاختبارات. من خلال الاختبارات الحقيقية المستندة إلى المستعرض، ترتبط النتائج والرؤى مباشرة برحلات المستخدم، مما يضمن قدرة تطبيقاتك على الصمود أمام سيناريوهات ذروة التحميل.
أخيرا ، لدى LoadView القدرة على عرض تقارير متعمقة كاملة عن نتائج المحاكاة. يمكن أن يعرض تمثيلا رسوميا لخطة تنفيذ السيناريوهات لإنشاء اتصالات المستخدم الظاهري ومتوسط وقت الاستجابة لكل مستخدم وعدد الأخطاء لكل جلسة عمل حدثت أثناء تنفيذ السيناريو. تتيح هذه المخططات وبيانات الأداء الفرصة للنظر في معلومات مفصلة عن لحظة معينة من المحاكاة للحصول على نظرة ثاقبة مهمة حول وقت التحميل لكل عنصر تم تقديمه إلى الصفحة. هذا مفيد للغاية لتطبيقات Angular لأنه يسمح للمطورين باتخاذ إجراءات بشأن عناصر محددة قد تؤخر TTI للتطبيق. بهذا المعنى ، يملأ LoadView هذا الفراغ في اختبار أحداث JavaScript ومراقبتها بدقة لاختبار وقت التحميل على جانب العميل ، وبالتالي ، يصبح أحد الأصول القوية التي يجب أن يمتلكها مطورو الواجهة الأمامية تحت حزامهم.
الاستنتاج: أداء تطبيق الويب الزاوي
ترفع المطالب الحالية المستوى من حيث الأداء لتطبيقات الويب الحديثة. يجب أن تضع فرق DevOps اليوم في اعتبارها أن أوقات استجابة التطبيقات و TTI للتطبيق تصبح عاملا محوريا للتطبيقات الجديدة للحصول على فرصة للمنافسة في السوق. في أكثر الأحيان ، يجب على مطوري Angular تقييم تقنيات تقليل وقت الحمل باستمرار مثل تجميع AoT وتقسيم التعليمات البرمجية واستراتيجيات التحميل المسبق عند تصميم التطبيقات ، وكذلك اتخاذ خطوة إلى الأمام. قم باختبار ومراقبة العمليات والمقاييس من جانب العميل باستمرار باستخدام LoadView لضمان أفضل تجربة للمستخدم وأداء للتطبيق.
لمزيد من المعلومات، تفضل بزيارة موقع LoadView على الويب واشترك في الإصدار التجريبي المجاني. ستتلقى 20 دولارا أمريكيا في أرصدة اختبار الحمل لمساعدتك على البدء .
مراقبة تطبيقات الويب الزاوية
للحصول على أداء ما بعد النشر لتطبيقات Angular الخاصة بك ، تأكد من التحقق من حل مراقبة موقع الويب وتطبيق الويب الخاص بنا ، Dotcom-Monitor. يأتي حل Dotcom-Monitor مزودا بجميع الميزات والفوائد التي تحتاجها لمراقبة تطبيقات الويب Angular الخاصة بك ، مثل المتصفحات الحقيقية والتنبيهات في الوقت الفعلي وتقارير الأداء ولوحات المعلومات ، وبالطبع ، مسجل الويب EveryStep للمساعدة في مراقبة خطوات المستخدم والمعاملات الهامة. والأفضل من ذلك ، يمكن نقل البرامج النصية التي تم تسجيلها لاختبار الحمل الخاص بك تطبيقات الويب Angular إلى منصة المراقبة ، لذلك ليست هناك حاجة لإعادة تسجيل البرامج النصية. يستخدم الحلان نفس الواجهة ، لذا فإن الارتداد بين كلا الحلين سهل وسهل. جرب مراقبة تطبيقات الويب لتطبيقات Angular الخاصة بك مجانا.