نظرا للتنوع الهائل في تقنيات الويب المدمجة الموجودة في صفحات الويب الحديثة ، يمكن أن تكون مراقبة الأداء واختبار الحمل مهمة صعبة. ستبحث هذه المقالة في خصوصيات مراقبة تطبيقات الويب الديناميكية والعناصر الأخرى التي يجب مراعاتها عند اختيار النوع المناسب من أداة أو حل المراقبة.
صفحات الويب الديناميكية مقابل صفحات الويب الثابتة
يمكن تقسيم جميع أنواع أنواع صفحات الويب إلى مجموعتين رئيسيتين: ثابتة وديناميكية.
باختصار ، صفحة الويب الثابتة هي صفحة HTML تم إنشاؤها على جانب الخادم في نموذج جاهز للاستخدام. بشكل عام ، يتم تنفيذ إنشاء الصفحة باستخدام لغات البرنامج النصي من جانب الخادم مثل ASP و PERL و PHP وما إلى ذلك. عندما يقدم مستعرض طلبا إلى عنوان URL، يعرض الخادم مستند HTML يتضمن بالفعل محتوى نصيا ورسوميا لصفحة الويب في الاستجابة.
من ناحية أخرى ، فإن النوع الأكثر شيوعا من صفحات الويب أو التطبيقات اليوم ديناميكي. لتنفيذ العناصر الديناميكية ، يتم استخدام أحدث أطر عمل جافا سكريبت مثل Rereact و Vue و Angular JS و Knockout و Ember في تطوير الويب.
تجلب صفحات الويب الديناميكية المحتوى الخاص بإجراءات المستخدم أثناء التشغيل على عنوان URL ثابت. المحتوى الديناميكي أكثر تعقيدا في هيكله. لا يتم استلام الصفحات من الخادم في مستندات HTML الجاهزة للاستخدام ولكن يتم إنشاؤها لكل طلب جديد على كمبيوتر العميل. في كل مرة ينقر فيها المستخدم على زر أو ينفذ أي إجراء آخر على صفحة الويب (التنقل بين علامات التبويب ، وملء نماذج الويب ، وما إلى ذلك) ، يقوم المتصفح بتنفيذ عدة خطوات قبل إعادة كتابة محتوى الصفحة في النافذة:
- تحليل مستند HTML إلى نموذج كائن المستند (DOM)؛
- عمليات CSS;
- ينفذ جافا سكريبت المضمنة.
Сhallenges من مراقبة التطبيقات المستندة إلى جافا سكريبت
أثناء مراقبة أداء صفحة الويب الثابتة ، تبحث أدوات المراقبة من خلال استجابة HTTP المستلمة من الخادم المستهدف. في كل مرة يتفاعل فيها المستخدم مع صفحة ويب ثابتة ، يتصل المتصفح بالخادم ويتلقى HTML جاهزا في الاستجابة. نظرا لأن كل المحتوى الذي يجب عرضه للمستخدم تم إنشاؤه بالفعل وتضمينه في الاستجابة على جانب الخادم ، يمكن للأدوات التحقق من صحة المحتوى ومقاييس تحميل الصفحة.
ومع ذلك ، توفر أطر جافا سكريبت الحديثة بعض التحديات عندما يتعلق الأمر بمراقبة صفحات الويب الديناميكية.
التحقق من صحة المحتوى والوظائف
لا تقوم صفحات الويب المستندة إلى جافا سكريبت، والمعروفة باسم
تطبيقات الصفحة الواحدة
(SPAs)، بإجراء تنقل جديد في المتصفح بمجرد تحميلها. يتضمن مستند HTML الأولي ملفات JavaScript التي يتم تشغيلها في أي أحداث مستعرض ويستدعي الخادم لبيانات JSON. سيتم استخدام هذه البيانات لتحديث HTML الأولي وتغيير محتوى الصفحة ديناميكيا في نافذة المتصفح.
في الوقت نفسه ، يمكن أن تتضمن SPAs والتطبيقات التي تحتوي على عناصر مضمنة من iFrame محتوى مضمنا تابعا لجهة خارجية ، مثل أقسام الإعلانات والتحليلات والأدوات (خرائط Google ومقاطع فيديو YouTube وما إلى ذلك). لعرض مثل هذا المحتوى، تقوم المتصفحات بتحليل شفرة HTML الخاصة بالصفحة ثم تنفيذ البرامج النصية التابعة لجهات خارجية. بعد ذلك ، تجلب البرامج النصية التابعة لجهات خارجية المحتوى لعرضه على الصفحة.
من حيث المراقبة ، يجعل هذا من الصعب تحديد متى تم تحميل محتوى جديد على الصفحة بالضبط (تحميل صورة ، وفتح مربع حوار ، وما إلى ذلك) لأنه لا يوجد حدث تم إنشاؤه ومرئي لأدوات المراقبة المستندة إلى HTTP.
تحديد أوقات تحميل الصفحة الفعلية والأداء
بشكل عام ، يتم استخدام استجابات HTTP كنتيجة ناجحة للطلب إلى صفحة ويب مستهدفة. ولكن هذا لا يعني أن جميع ملفات جافا سكريبت تم تحليلها وتنفيذها بواسطة المتصفح وتم تقديم المحتوى وجعله مرئيا للمستخدمين. بمجرد تحميل HTML الأولي ، يبدأ المتصفح في تنفيذ جميع جافا سكريبت المضمنة. من حيث SPAs و iFrames ، يمكن تقديم شجرة DOM في وقت أبكر أو متأخر بكثير من اكتمال تحميل الصفحة. بمعنى آخر ، يمكن أن يصل الفرق بين الوقت الذي يمكن فيه للمستخدم الحقيقي التفاعل مع الصفحة ووقت تحميل الحدث “الكامل” إلى عدة ثوان.
علاوة على ذلك ، بمجرد تحميل الصفحة المستندة إلى جافا سكريبت ، لا تؤدي جميع التغييرات اللاحقة على الصفحة إلى تشغيل طلبات متصفح جديدة إلى الخادم. ونتيجة لذلك، لن توفر المراقبة المستندة إلى HTTP أي مقاييس للتغييرات على الصفحة بعد تحميل الصفحة الأولي. لتلقي أوقات التحميل الفعلية ، نحتاج إلى مراقبة أحداث جافا سكريبت في نافذة المتصفح الحقيقية.
حلول كاملة كمفتاح للمراقبة الشاملة
كما هو موضح من قبل ، تضع السمات المنطقية الحديثة لتطبيقات الويب قيودا على المراقبة والاختبار باستخدام أدوات تعمل على مستوى البروتوكول ولا تستخدم متصفحا.
لمحاكاة تجربة المستخدم الحقيقية ، يلزم وجود متصفح حقيقي لإجراء المراقبة في بيئة وقت تشغيل جافا سكريبت الكاملة. تستخدم الحلول الكاملة ، مثل منصة مراقبة Dotcom-Monitor وحل اختبار تحميل LoadView ، متصفحات حقيقية للمساعدة في التغلب على جميع التحديات الموصوفة وضمان نتائج واقعية.
مراقبة صفحات الويب الديناميكية: مسجل الويب EveryStep
لضمان تلقي المستخدم للمحتوى المناسب على صفحة محملة تعمل على محرك جافا سكريبت ، يوفر Dotcom-Monitor وظيفة التحقق من صحة الكلمة الرئيسية والصورة في نافذة المتصفح الحقيقية. فيما يلي الخطوات البسيطة التي تحتاج إلى تنفيذها:
- إجراءات مستخدم البرنامج النصي على صفحة الويب المستهدفة باستخدام مسجل ويب EveryStep.
- قم بإعداد التحقق من صحة المحتوى لكل خطوة.
على سبيل المثال ، دعنا نعد مراقبة صفحة سجل تقارير البريد الإلكتروني Dotcom-Monitor كمثال على صفحة ويب تستند إلى جافا سكريبت.
أولا ، نحتاج إلى فتح مسجل الويب EveryStep وتوفير عنوان URL المستهدف.
بمجرد بدء التسجيل ، للتأكد من أن القوائم المنسدلة على الصفحة تعمل بشكل صحيح وتم تحميل المحتوى المحدد ، نحتاج إلى التحقق من العناصر المنسدلة وإعداد كلمة رئيسية مؤكدة لكل قائمة منسدلة. في حالة حدوث خطأ في التحقق من صحة المحتوى ، سيتم إنشاء تنبيه لجهاز المراقبة.
كيفية اكتشاف مشكلات الأداء في SPAs
يعتمد منطق SPA بشكل كبير على تقنية جافا سكريبت. وبالتالي ، لضمان تلبية متطلبات اتفاقية مستوى الخدمة الخاصة بالتطبيق ، من الضروري مراقبة مقاييس الأداء لأحداث جافا سكريبت التي تم إنشاؤها على الصفحة.
يسمح Dotcom-Monitor للمستخدمين بتكوين التقارير حول وقت تنفيذ طلبات جافا سكريبت أو وقت معالجة وتنفيذ إجراء مستخدم معين على الصفحة المستهدفة. لتلقي بيانات حول مقاييس جافا سكريبت في تقارير الأجهزة، استخدم الدالتين المضمنة ل Network Watcher وTime Watcher في ES Recorder .
أيضا ، بالنسبة لتطبيقات الويب التي تم إنشاؤها باستخدام تقنية AJAX ، يمكنك تحديد مقاييس طلب AJAX في مخطط الشلال الخاص بالجهاز.
ملخص: مراقبة تطبيقات الويب الديناميكية
باختصار ، أثناء إعداد المراقبة لصفحات الويب والتطبيقات الديناميكية ، يوصى باستخدام حل مراقبة يستخدم متصفحات حقيقية لالتقاط جميع أحداث جافا سكريبت في نافذة المتصفح ، مما يمنحك نتائج المراقبة الأكثر دقة.
لمراقبة المحتوى الديناميكي وأداء الوظائف في SPAs ، يجب إجراء التحقق من صحة المحتوى (التحقق من صحة الصور والكلمات الرئيسية) في بيئات المتصفح الحقيقية ، ومراقبة مقاييس أداء جافا سكريبت.
-
أطر الواجهة الأمامية لبناء تطبيق الويب الديناميكي الخاص بك
تحدد أطر الواجهة الأمامية شكل وأسلوب عمل الصفحات التي تراها كجزء من تطبيق ويب في نافذة المستعرض. على عكس أطر عمل الخادم ، لا تعمل أطر الواجهة الأمامية مع منطق الأعمال لتطبيقات الويب. تنفذ هذه الأطر جميع أعمالها في متصفح. باستخدام أنواع مختلفة من أطر عمل الواجهة الأمامية ، يمكنك إنشاء واجهات مستخدم جديدة وإضافة رسوم متحركة معقدة إلى صفحة ويب وتنفيذ تطبيقات صفحة واحدة. في هذه المقالة ، سنلقي نظرة فاحصة على الأطر المستندة إلى جافا سكريبت ونناقش بعض مزايا وعيوب استخدامها لتسهيل عملية تطوير واجهة المستخدم الخاصة بك.
في الوقت الحاضر هناك عدد قليل من أطر الواجهة الأمامية جافا سكريبت في السوق. فيما يلي قائمة بستة أطر عمل مفضلة في مجتمع تطوير الويب:
- Angular – هو إطار واجهة أمامية مفتوح المصدر يعتمد على جافا سكريبت بواسطة Google. وهي متخصصة في تطوير تطبيقات الصفحة الواحدة (SPA). يسمح إطار العمل بإنشاء تطبيقات ويب من جانب العميل من الصفر باستخدام HTML كلغة قالب. تسمح لك سمات HTML المخصصة الإضافية بوصف مكونات التطبيق بطريقة واضحة. يمكنك العثور على مزيد من المعلومات حول مراقبة التطبيقات المستندة إلى AngularJS في منشور مدونتنا.
- رد الفعل – رسميا ليس إطار جافا سكريبت ولكن مكتبة الواجهة الأمامية التي تستخدم لإنشاء واجهات المستخدم. إنه مفتوح المصدر تم تقديمه بواسطة Facebook ويستخدم على نطاق واسع من قبل مطوري الويب في جميع أنحاء العالم. يمكنك العثور على مزيد من المعلومات حول مراقبة تطبيقات الويب المكتوبة في ReactJS في منشور مدونتنا.
- Vue.js – هو إطار واجهة أمامية يعمل مع مكونات ملف واحد وروابط أحادية الاتجاه بينهما. تجعل واجهة سطر الأوامر في Vue التي تسمى أداة VUE CLI عملية التطوير أسرع وأسهل. راجع منشورنا لمزيد من المعلومات حول مراقبة إنشاء تطبيقات الويب باستخدام VueJS.
- Ember – الميزة الرئيسية ل EmberJS هي ربط البيانات. يسمح لك نهج ربط البيانات بإنشاء متغير جافا سكريبت، وعندما تتغير قيمة هذا المتغير، يتم تحديث جزء التطبيق المرتبط بهذا المتغير.
- Knockout – هو إطار مفتوح المصدر يعمل مع نموذج MVVM (Model-View-ViewModel). تم تطويره في جافا سكريبت دون أي تبعيات خارجية. Knockout خفيف الوزن وسهل الاستخدام وفعال بشكل خاص في ربط البيانات. يعد الإطار خيارا جيدا لإنشاء تطبيقات صفحة واحدة. يرجى العثور على مزيد من المعلومات حول التحديات مع مراقبة تطبيقات الويب Knockout.js في مدونتنا.
- AJAX – في الواقع ، AJAX (جافا سكريبت غير متزامنة و XML) هو توليفة من تقنيات جافا سكريبت و XML. إنه إطار غالبا ما يرتبط بمصطلح Web 2.0 ويوصف بأنه أحدث تطبيق ويب. راجع منشورنا لمزيد من المعلومات حول مراقبة التطبيقات المستندة إلى AJAX.
ما هو إطار جافا سكريبت؟ لماذا يجب أن تجربها؟
أطر JS هي مكتبات برمجة جافا سكريبت تحتوي على تعليمات برمجية مكتوبة مسبقا يمكن لمطوري الويب استخدامها لتنفيذ وظائف ومهام البرمجة الشائعة. هذا هو الأساس لبناء مواقع الويب أو تطبيقات الويب حولها.
دعونا نوضح لماذا جمعت أطر جافا سكريبت الكثير من المتابعين بين مطوري واجهة المستخدم. على الرغم من أن عملية الترميز ممكنة تماما دون استخدام أطر العمل ، إلا أن البيئة المناسبة يمكن أن تجعل هذه العملية أسهل بكثير. علاوة على ذلك ، فإن غالبية أطر JS مجانية ومفتوحة المصدر ، مما يجعل دمجها في عملية التطوير أكثر بساطة.
أولا ، سيؤدي استخدام إطار JS إلى زيادة إنتاجيتك. لا يحتاج مطورو واجهة المستخدم إلى كتابة الكثير من التعليمات البرمجية يدويا بعد الآن ، بل يمكنهم استخدام الوظائف المكتوبة مسبقا والجاهزة للاستخدام ومقتطفات التعليمات البرمجية. هنا ، يمكنك توسيع قوالب التعليمات البرمجية المكتوبة مسبقا لإنشاء بعض مكونات الويب القياسية على موقع الويب الخاص بك. الأطر أكثر استجابة لتصميم مواقع الويب وأكثر تقديرا من قبل مطوري مواقع الويب. دعونا نلقي نظرة على أفضل أطر JS.يتم الاحتفاظ بحصة كبيرة من سوق اليوم من خلال ثلاثة أطر شائعة: Rereact و Angular و Vue. تسمى هذه الأطر تفاعلية لأنها تتفاعل مع أي تغييرات في حالة التطبيق وتقوم تلقائيا بتحديث واجهة المستخدم. على سبيل المثال، إذا قمت بالإعلان عن متغير يتحكم في حجم حقل نص على صفحة ويب ثم قمت بتغيير المتغير، فسيتغير حجم الحقل من تلقاء نفسه بدون أي ترميز يدوي. يمكنك استخدام أي لغة برمجة ، واستخراج البيانات لها ، وحزمها في JSON أو XML أو لغات أخرى قابلة للقراءة آليا على الواجهة الخلفية ، ثم تمريرها إلى الواجهة الأمامية. بدوره ، سيقوم إطار JS بكل العمل المتبقي على الواجهة الأمامية. يرسم الإطار عناصر التحكم ، ويقوم بإعداد الرسوم المتحركة ، ويتحقق من البيانات ، ويقدم المعلومات وفقا لتفضيلات المستخدم ، وينفذ منطق العمل. يتم تنفيذ جميع الأعمال في متصفح ويتم نقل البيانات فقط (في بعض الأحيان ، أجزاء جديدة من القالب وقواعد منطق العمل) بين المتصفح وخادم الويب. وبالتالي ، فإن الأطر التفاعلية هي أدوات لا غنى عنها لتنفيذ مفهوم تطبيق الصفحة الواحدة عندما يحدث كل العمل على شاشة واحدة.
فيو.JS
Vue هي واحدة من أطر الواجهة الأمامية الشعبية. إنه بسيط ومباشر مقارنة ب Angular المتطور. بالإضافة إلى كونه خفيف الوزن ، فإن مزاياه الرئيسية هي DOM المرئي ، ونهج المكون ، وربط البيانات ثنائي الاتجاه. Vue متعدد الاستخدامات ، متعدد المهام ، ويمكنه التعامل مع كل من العمليات البسيطة والديناميكية بسهولة. يمكن استخدامه لإنشاء كل من تطبيقات الويب والهاتف المحمول. علاوة على ذلك ، يتم استخدامه بنجاح لإنشاء تطبيقات ويب تقدمية (PWA) مستقلة عن الجهاز أو نوع الشبكة مثل Pinterest و Spotify وما إلى ذلك.
لدى Vue وثائق شاملة ومفصلة تساعد على الحصول على معلومات عالية المستوى ومتعمقة حول مفاهيم الإطار. يدعم الإطار بناء جملة بسيط يمكن استخدامه وفهمه بسهولة من قبل مبرمجي جافا سكريبت. وإحدى المزايا الرئيسية لإطار العمل هي دعم Typescript المدمج الذي يسمح بمنع الأخطاء المحتملة في مراحل التجميع. يعد دعم Typescript مفيدا للغاية في حالة إنشاء تطبيقات واسعة النطاق.
يوصى باستخدام .js للتصاميم المرنة ، مما يسمح لك ببناء كل شيء من الصفر وتطوير المشاريع الكبيرة بنجاح.
الشيء الوحيد الذي قد يمنعك من استخدامه هو غياب الدعم من عمالقة الصناعة مثل Facebook و Google. أيضا ، يجب أن نذكر ، أن بعض الأوصاف لا تزال متاحة باللغة الصينية فقط. وهذا يجلب بعض الصعوبات لعملية التنمية في بعض المراحل. ومع ذلك ، بالنظر إلى مدى شعبية هذا الإطار ، يمكن تغيير الاتجاه في المستقبل القريب.
تفاعل
React هي واحدة من أسهل الأطر للتعلم. تم تطوير الإطار بواسطة Facebook لإصلاح مشكلات الصيانة بسبب الإضافة المستمرة للميزات إلى التطبيق. React هي المنصة المثالية لأي شخص يتوقع الكثير من الزيارات على موقعه على الويب ويحتاج إلى منصة مستقرة للحفاظ عليها. يتميز React الحديث مفتوح المصدر بنموذج كائن المستند الافتراضي (DOM) ، والذي يوفر وظائف استثنائية ويضمن الاستقرار والتشغيل السلس لتطبيق الويب. يمكن استخدام الإطار ليس فقط على جانب العميل ولكن يمكنك استخدامه على جانب الخادم ، وعلاوة على ذلك ، يمكن استخدام React مع أطر عمل أخرى.
السمة الرئيسية ل React التي تجعلها بارزة هي القدرة على إعادة استخدام مكونات واجهة المستخدم. يمكنك إنشاء مكون واجهة مستخدم مرة واحدة وإعادة استخدامه في أجزاء أخرى من التطبيق. علاوة على ذلك ، يمكنك إنشاء مكونات واجهة المستخدم دون كتابة فئات جديدة. هذا يجعل من السهل تعلم رد الفعل. أيضا ، ستكون أدوات مطوري React دائما في متناول اليد للمساعدة في فحص التسلسلات الهرمية لمكونات React .
React لديه الكثير من المزايا. لقد ذكرنا بعضها فقط في هذه المقالة ، ولكن من الواضح أن الإطار يمكن أن يكون خيارا جيدا لأي شخص يحتاج إلى إنشاء واجهات مستخدم بمكونات واجهة مستخدم قابلة لإعادة الاستخدام ، خاصة أنه يوصى به لتطوير SPA. باختصار ، React هو إطار الواجهة الأمامية الأكثر موثوقية في السوق في الحالات التي تريد فيها تطوير واجهة تفاعلية.
أما بالنسبة لإتقان JSX لإنشاء مشروع React ، حسنا ، فقد تجد صعوبة في استخدام JSX ، ما لم يكن لديك خبرة أساسية على الأقل في جافا سكريبت. أيضا ، قد تواجه بعض الصعوبات في الحفاظ على تحديث وثائق React بسبب التحديثات العديدة والمستمرة.
الزاوي
لن تكتمل قائمة أفضل أطر الواجهة الأمامية بدون Angular. على عكس Rereact ، فإن Angular فريد من نوعه في ميزة ربط البيانات ثنائية الاتجاه. هذا يعني أنه سيكون لديك دائما النموذج وطريقة العرض متزامنة في الوقت الفعلي. بمعنى آخر ، سينعكس أي تغيير في النموذج على الفور في العرض والعكس. يوفر Angular القدرة على إعادة استخدام المكونات وإدارتها بسهولة باستخدام حقن التبعية. يتم شحن الإطار مع الوظائف الأكثر استخداما على نطاق واسع ، مما يسمح لك بكتابة رمز أقل لمشروعك.
يعمل Angular على تحسين أداء تطبيقات الويب من خلال تحديث المحتوى ديناميكيا في أي وقت من الأوقات ، باستخدام ربط البيانات ثنائي الاتجاه. إنه الخيار الأفضل لتطبيقات المؤسسات وتطبيقات الويب الديناميكية.