يسعى العصر الرقمي دائما للحصول على تكنولوجيا أحدث وأكثر ابتكارا يمكن أن تجعل العالم مكانا أفضل. التعديلات التي نلاحظها في التكنولوجيا الحالية ليست سريعة فحسب ، بل هي أسية. وكما قال أحدهم ذات مرة: “من حين لآخر تتحول التكنولوجيا الجديدة والمشكلة القديمة والفكرة الكبيرة إلى ابتكار”. يمكن تعريف AngularJS على أنه أحد الثورات في هذا العالم الذي تحركه التكنولوجيا ، وستنطلق هذه المقالة لاستكشاف إطار عمل AngularJS وشرح كيفية مراقبة التطبيقات بشكل صحيح للأداء.
في الوقت الذي تم فيه إنشاء AngularJS ، كان هناك بالفعل العديد من الأطر المتاحة التي تمت كتابتها بلغة جافا سكريبت واستخدمت نمط وحدة تحكم عرض النموذج ، ولكن ما جعل AngularJS تبرز عن غيرها هو ميزاتها الفريدة والقوية المفيدة لمصمم الويب أو مصمم تجربة المستخدم ، مما يساعدهم على إنشاء تطبيقات غنية من صفحة واحدة (SPAs).
AngularJS: مزايا وعيوب
مزايا
فيما يلي مزايا AngularJS ، التي لفتت انتباه المطورين في جميع أنحاء العالم بسرعة.
- مفتوح المصدر. AngularJS هو إطار عمل نقي قائم على جافا سكريبت قائم على MVC متاح لأي شخص بتكلفة معقولة. نظرا لأن هذا مفتوح المصدر ، يمكن للمستخدمين إجراء تعديلات وفقا لمتطلباتهم لإرضاء العميل.
- جوجل المدعومة. هذا مفتوح المصدر يتم الحفاظ عليه من قبل مطوري Google ومجتمع من المطورين والمؤسسات لمعالجة العديد من التحديات التي تواجهها في تطوير تطبيقات الصفحة الواحدة.
- إطار عمل MVC / MVVM القائم. ينفذ AngularJS بنية MVC / MVVC. MVC / MVVC لتقف علي وحدة تحكم عرض النموذج / وحدة تحكم عرض عرض النموذج. هذه البنية يمكن أن تجعل التطبيق الضخم سهل التطوير أو سهل الفهم. هناك العديد من المزايا لهذا الإطار ، مثل عملية تطوير أكثر مرونة ، والقدرة على تقديم طرق عرض متعددة ، والبيانات التي يتم توزيعها. هذه الميزة يمكن أن تعزز التمثيل المرئي وتجعل التطبيق المعقد خفيفا جدا لفهمه. يمكن اعتبار هذه البنية مثالية عند تطوير تطبيق كبير ، لأن هذا يوفر أساسا قويا لأداء التطبيق.
- ربط البيانات في اتجاهين. واحدة من الميزات الأكثر إقناعا من AngularJS. ربط البيانات في اتجاهين ليس أكثر من التكامل بين طريقة العرض والنموذج. تحدث تحديثات البيانات أو استرجاعها من مخزن البيانات الأساسي تلقائيا بشكل أو بآخر. عندما يتم تحديث مخزن البيانات ، تعكس واجهة المستخدم البيانات المحدثة أيضا. يسمح لك بإزالة المنطق من جانب شاشة الواجهة الأمامية. تسمح هذه التقنية بتغليف البيانات الحقيقية وتقليل تعقيد التعليمات البرمجية.
- تطبيقات الصفحة الواحدة (SPAs). تشتهر AngularJS بميزتها في بناء SPAs. SPAs هي تطبيقات الويب التي تقوم بتحميل الوحدة بأكملها دفعة واحدة ويتم تحديثها ديناميكيا أثناء اتصال المستخدم بالتطبيقات دون إعادة تحميل مستمرة للصفحة. باستخدام SPAs ، يمكنك تقليل الحمل على الخادم بكفاءة وتحسين سرعة التحميل للحصول على تجربة مستخدم أفضل. كونها أسرع من التطبيقات التقليدية ، تعد هذه ميزة رائعة للشركات التي تريد أن تعمل تطبيقات الويب الخاصة بها بسرعة وسلاسة.
- يمكن تخصيصها وتوسيعها. بسبب بعض السمات المضمنة ، يمكن تمديد AngularJS. يمكن للمرء إنشاء توجيهات مخصصة بسرعة عند الضرورة. يمكن للمستخدمين إلحاق الميزة أو إزالتها وتغيير التوجيهات التي يمكن أن تلبي الطلب.
- نماذج بيانات كائنات جافا سكريبت القديمة البسيطة (POJO). تستخدم نماذج البيانات في AngularJS كائنات جافا سكريبت القديمة العادية (POJO) ، مما يعني أن AngularJS لا يحتاج إلى أي طرق أخرى للحصول على الضبط والضبط. نظرا لهذه الوظيفة ، لا توجد متطلبات إضافية لربط AngularJS بمصادر بيانات إضافية لإضافة طريقة getter و setter. هذا يجعل AngularJS مرضيا ذاتيا.
- التبعية Injectioj. هذه هي عملية حقن الوظائف التابعة في الوحدة النمطية التي أعطيت للمكون من قبل. تتم هذه العملية برمتها في وقت التشغيل. يعمل استخدام حقن التبعية على تحسين المكونات من خلال جعلها أكثر توافقا وقابلية لإعادة الاستخدام وقابلة للصيانة والاختبار.
- ميزات إضافية. والقائمة تطول وتطول. تشمل المزايا الأخرى بنية بسيطة ، وسهلة الاختبار ، واستخدام التوجيهات ، وقوالب HTML بسيطة ، ونماذج أولية سريعة ، وصفحات ويب سريعة الاستجابة ، وإعادة استخدام التعليمات البرمجية ، والتطوير الموازي.
مساوئ
- تسرب الذاكرة. يعتمد AngularJS على جافا سكريبت بحتة وكانت مشكلة تسرب الذاكرة دائما مشكلة في جافا سكريبت. يمكن أن يؤدي ذلك إلى مشكلات هائلة ، مثل تعطل التطبيقات ، وزيادة تأخيرات الاستجابة ، والتباطؤ.
- القضايا الأمنية. يمكن اعتبار هذا الإطار أقل أمانا بسبب عدم التحقق من التفويض والمصادقة. المصادقة هي التحقق من صحة المستخدم والتفويض هو التحقق مما إذا كان المستخدم لديه أذونات للوصول إلى البيانات فقط بعد ذلك يمكننا منح إذن لذلك. لا يوفر AngularJS أيا من هذه الميزات.
- إطار معقد. لديها تسلسل هرمي متعدد الطبقات ومعقد عندما يتعلق الأمر بالإطار. يحتاج المطورون إلى الغوص لفهم ما يحدث على الواجهة الأمامية وكيف تتشكل العملية برمتها. ما لم يكن المطور من ذوي الخبرة ، فإن هذا الإطار مزعج للغاية لفهمه.
- تعتمد جافا سكريبت. يعتمد كليا على جافا سكريبت. كما لو أننا نزيل جافا سكريبت من الشفرة ، فستكون صفحة ويب HTML الأساسية فقط مع أي وظيفة.
قياس أداء تطبيقات AngularJS
بعد النظر في إيجابيات وسلبيات ، حان الوقت الآن لفهم التقنيات التي يمكنك من خلالها تحسين أداء AngularJS.
- حلقات. أولا ، تجنب الحلقات إذا كان من الممكن إدارة المنطق باستخدام $map أو $filter. إذا كان مطلوبا استخدام الحلقات ، فتأكد من الإعلان عن جميع المكالمات والتهيئة خارج الحلقة. هذا الاحتياط الصغير يمكن أن يقلل من مساحة الذاكرة ويمكن أن يزيد من سرعة التطبيق الخاص بك
- نطاق متغير وجمع القمامة. قم بتحديد نطاق جميع المتغيرات حسب حاجتك إليها ، وبإحكام قدر الإمكان. استفد من جامع البيانات المهملة جافا سكريبت لتحرير ذاكرة المتغيرات غير المرغوب فيها في أقرب وقت ممكن. هذا هو السبب الأكثر شيوعا لمشاكل التطبيق. فقط تأكد من أنه عندما يتم إنهاء وظيفة معينة ، يجب ألا يكون هناك أي مراجع أخرى متاحة.
- إزالة بيانات التصحيح. يجب عليك إزالة بيانات التصحيح بعد استخدامها لأن هذا يمكن أن يؤدي إلى انخفاض أداء التطبيق الخاص بك عند النظر في عناصر DOM.
- الحد من استخدام ng-show واستخدام ng-if/ng-switch بدلا من ذلك. في AngularJS، يقوم توجيه ng-show بتبديل خاصية عرض CSS على عنصر. من ناحية أخرى ، يزيل ng-if العنصر من DOM إذا كان الشرط خاطئا ويلحق فقط عندما يكون الشرط صحيحا. يمكن أيضا استخدام التوجيه لأن هذا بديل ل ng-if بنفس الأداء.
- دورة الهضم. هو أفضل مقياس لأداء التطبيق الخاص بك. يمكنك اعتبار ذلك حلقة تقوم بمراجعة ومراقبة جميع المتغيرات الموجودة. كلما كانت دورة الهضم أقصر ، كلما كان طلبك أسرع. يجب أن يكون هذا هو هدفك للحصول على دورة هضم أقصر إذا كنت تقوم بإنشاء تطبيق.
- قلل من عدد المشاهدين. عند تطبيق ربط البيانات ، يمكنك إنشاء $watchers جديد في دورة الملخص. يجب عليك أيضا تجنب إضافة الوظائف والكائنات إلى قائمة المراقبين. يمكن أن يؤدي ذلك إلى إبطاء أداء تطبيقك في الزحف.
- استخدام Console.time. لتصحيح أخطاء تطبيقك ، يعد console.time واجهة برمجة تطبيقات رائعة يوفرها Chrome.
- $cacheFactory # الاستخدام. إذا كان هناك شرط لتخزين البيانات التي ستكون مطلوبة لإعادة الحساب في المستقبل ، فاستخدم توجيها $cacheFactory .
مراقبة تطبيقات AngularJS
في الماضي ، كان لدينا أدوات مثل YSlow أو Google Page Speed التي ساعدتنا على مراقبة تحميل الصفحة. أعطانا بعض الأفكار العامة حول سبب تحميل التطبيقات ببطء. ثم إذا نظرنا إلى البدائيات الأساسية ، فقد كانت هناك واجهات برمجة تطبيقات تم إنشاؤها لمراقبة الأداء ، مما يأخذنا أعمق قليلا حول كيفية أداء التطبيق في الوقت الفعلي. فيما يلي أمثلة لبعض واجهات برمجة التطبيقات.
واجهة برمجة تطبيقات توقيت التنقل
تساعدنا واجهة برمجة تطبيقات توقيت التنقل ، التي تستخدمها معظم خدمات RUM التقليدية (مراقبة المستخدم الحقيقي) ، على الحصول على مزيد من البصيرة في الأداء. من خلال دمج هذا في تطبيقنا ، يمكننا أن نرى متى بدأ طلب الصفحة ومقدار الوقت الذي يستغرقه. ولكن مع ذلك ، يركز هذا أيضا على تحميل الصفحة.
واجهة برمجة تطبيقات توقيت الموارد
في وقت لاحق ، كان لدينا واجهة برمجة تطبيقات توقيت الموارد. من خلال دمج واجهة برمجة التطبيقات هذه ، يمكننا رؤية وقت فردي لتحميل كل مورد ، مثل أوراق أنماط معينة أو صورة. مرة أخرى ، يتعلق الأمر كله بتحميل الأصول أو تهيئة الصفحة.
لكن المحرمات هنا هي أن جميع الأدوات ، أو واجهات برمجة التطبيقات ، تدور حول جانب الخادم وجميع focu عند تحميل الصفحة الأولي. بمجرد تحميل المتصفح لصفحة الويب ، فلن يكون لدينا العديد من الأدوات المتاحة لإعطاء المزيد من الرؤى.
لقد تغيرت الويب
ما يحدث الآن هو أن الويب ليس مستندا فحسب ، بل يعمل أيضا كتنقل. لذلك ، تغيرت الطريقة التي نستخدم بها المتصفح بسرعة كبيرة. لذكر مثال هنا، انتقل إلى Netflix. الآن أداء التطبيق لتحميل الصفحة الأولى لا يعني أي شيء. لأن كل الإجراء مستمر بعد تحميل الصفحة. لذلك يحتاج الأداء الآن إلى قياس ما يحدث بعد تحميل الصفحة. لكن الأدوات في الوقت الحاضر تركز أكثر على كيفية تقديم الصفحة الأولى بشكل أسرع ، وليس على التطبيق الأمثل عند تشغيل التطبيق.
كما نوقش سابقا ، تعد مراقبة التطبيقات جزءا مهما من عملك. شيء أساسي مثل تحميل الصفحة الأولي ، كما نوقش سابقا ، يمكن أن يصبح حافزا لعميل مفقود وبيع. عندما تكون المنافسة على بعد نقرة واحدة فقط ، حتى القضايا الصغيرة يمكن أن تكون ضارة بسمعة العلامة التجارية.
المراقبة الاصطناعية: الجواب في عصر اليوم
توفر المراقبة الاصطناعية ، والمعروفة أيضا باسم المراقبة النشطة أو الاستباقية ، للمستخدمين القدرة على مراقبة أداء
تطبيقات Angular JS
ومواقع الويب وخدمات الويب الأخرى والبنية التحتية من عقد الشبكة العالمية على فترات زمنية مختلفة. ويمكن استخدام هذه البيانات للعثور على المجالات التي تتطلب مزيدا من التحسين.
تمنح المراقبة الاصطناعية المستخدمين القدرة على فحص مواقع الويب والتطبيقات بحثا عن الأداء البطيء وتحديد المشكلات قبل تعرض المستخدمين لأي مشاكل. أي أخطاء أو أخطاء تؤثر على أداء المستخدمين الحقيقيين يمكن أن تكون ضارة بالعمل. يمكن للمراقبة الاصطناعية محاكاة
معاملات المستخدم وبرمجتها
، مما يسمح لك بتتبع وفحص ومحاكاة كل نقرة وانتقاد. يمكن أن يساعدك ذلك في تحسين استراتيجيتك وتحديد الخطوات داخل عملية المعاملة التي لا تعمل على النحو المنشود ، دون التأثير سلبا على المستخدمين الفعليين. تتيح لك المراقبة الاصطناعية تعيين السيناريوهات بأكملها التي هي المسار أو الوظيفة من خلال معاملة نصية للتطبيق الخاص بك لتحديد العيوب التي يمكن أن يواجهها المستخدم أثناء التفاعل مع التطبيق الخاص بك. تقوم هذه البرامج النصية بزيارة موقع الويب / التطبيق بشكل دوري (على سبيل المثال ، كل 15-20 دقيقة) وتسجيل كل معاملة.
إنه متميز عن تقنيات المراقبة الأخرى لأنه لا يتراكم بيانات المستخدم الحقيقية ، ولكنه بدلا من ذلك يحاكي نشاط المستخدم الحقيقي لجمع رؤى يمكن تحليلها لاحقا لتحسين الأداء. يتطلب من المستخدمين كتابة / برمجة الرموز ونشر تلك البرامج النصية للمراقبة. الرؤى التي تم تحليلها ليست لمستخدم حقيقي ، ولكنها تحاكي جميع معاملات المستخدم النصية لضمان عمل جميع الوظائف التي تم تنفيذها بشكل صحيح.
يمكن تشغيل المراقبة الاصطناعية من أجهزة مختلفة ، من مواقع جغرافية مختلفة وحتى من خلال متصفحات مختلفة. في هذا العصر الذي نسعى فيه جاهدين لتحقيق أداء عال ، فإن سرعة تحميل الصفحة الأولية ليست بنفس أهمية الرحلة الكاملة للمستخدم النهائي. هذا يسمح لك بمحاكاة العمليات التجارية وأنشطة المستخدم من مناطق جغرافية متنوعة.
تمنحك المراقبة الاصطناعية إجابات على السؤال أدناه:
- هل التطبيق قيد التشغيل؟
- هل يعمل التطبيق كما هو متوقع؟
- هل يستطيع المستخدمون تسجيل الدخول والوصول وتنفيذ الخطوات اللازمة؟
- هل العملاء قادرون على العثور على ما كانوا يبحثون عنه؟
- هل تعمل خدمات/واجهات برمجة التطبيقات التابعة لجهات خارجية ولا تنشئ أي حواجز أمام زيارات المستخدم النهائي؟
كما ذكرنا بالفعل ، فإن AngularJS هو إطار عمل قائم على جافا سكريبت ، لذلك يتم تحميل كل صفحة لكل مكالمة خدمة يتم الاعتناء بها بواسطة مكالمات جافا سكريبت / أجاكس ، والتي تلعب جافا سكريبت دورا حاسما. لذلك ، للحصول على تجربة مستخدم أفضل ، نحتاج إلى التأكد من أن جافا سكريبت خالية من الأخطاء وأن جميع الإضافات تعمل كما هو متوقع ولا تسبب أي أخطاء يمكن أن تؤدي إلى تعطل التطبيق أو تدهور تجربة المستخدم. من خلال تنفيذ
مراقبة تطبيقات الويب
، فإننا نضمن بشكل استباقي الكشف عن أي عيوب في شفرة جافا سكريبت الخاصة بنا ، مثل أخطاء جافا سكريبت أو مشكلات الأمان أو تسرب الذاكرة ، بحيث يمكن حلها بسرعة ولا تؤثر على المستخدمين الحقيقيين. من خلال المراقبة الاصطناعية ، يمكن للشركات مراقبة أصول الويب والشبكة بسهولة وسرعة أكبر والحصول على تنبيهات عندما لا تعمل الأمور كما هو مخطط لها. نظرا لتعدد الاستخدامات الذي توفره المراقبة الاصطناعية ، يجب على الشركات اعتبارها واجهة لضمان تجربة المستخدم الكاملة: التوافر والأداء ووقت التشغيل والوظائف.
ابدأ في مراقبة أداء تطبيق الويب AngularJS اليوم باستخدام Dotcom-Monitor.
جربه مجانا لمدة 30 يوما
.
