دينو إسبوزيتو: تطوير تطبيقات الويب الحديثة. تحليل المجالات والتقنيات

11.05.2019

لقد غيرت تطبيقات تصميم الويب الطريقة التي يصمم بها المصممون مواقع الويب لفترة طويلة. إن استخدام الأدوات الحديثة يجعل الأمور أسهل وأسرع بكثير، على سبيل المثال، إذا كنت تستخدم تطبيقات الإكمال التلقائي ووحدات الماكرو. اليوم، يمكن للمصممين الذين يفضلون التصميم بصريًا استخدام بعض هذه التطبيقات لإنشاء تصميمات يمكن تحويلها إلى تعليمات برمجية يتم تثبيتها بعد ذلك عبر الإنترنت.

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

هناك الكثير من تطبيقات تطوير الويب الرائعة، وإليك بعضًا من أفضل التطبيقات التي يمكنك التفكير في استخدامها.

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

هذا هو أفضل تطبيق للاستخدام، ومواقع الويب سريعة الاستجابة والتي ستبدو أيضًا جميلة من الناحية الجمالية على كل من أجهزة الكمبيوتر البسيطة والأجهزة المحمولة. مع Mobirise، يمكن أن يكون إنشاء مواقع الويب أمرًا ممتعًا للغاية. تأتي الأداة مع العديد من الكتل التي يمكن لمطوري الويب تحديدها وسحبها حيث يرغبون في وضعها، ثم تغيير الإعدادات الافتراضية لتلائم متطلباتهم.

إنه محرر نصوص متعدد الاستخدامات ويأتي مع العديد من الأدوات الرائعة لمطوري الويب. قد لا يكون الأفضل، لكنه بالتأكيد جيد. إنها واجهة Windows التي توفر محرر برمجة ممتاز يتضمن قوالب للغات البرمجة الأكثر شيوعا مثل HTML، VBScript، عميل FTP، PHP.

تطبيق تطوير ويب سريع الاستجابة يجب أن تعتبره أحد أدوات مشاريعك. هناك إصدار مجاني محدود الميزات التي يمكنك استخدامها، وإصدار مدفوع يوفر لك وظائف كاملة يمكنك استخدامها في تطوير الويب الخاص بك. TOWeb هو تطبيق سهل الاستخدام للغاية ويحتوي على قوالب مذهلة يمكن تخصيصها وفقًا لمتطلباتك. مثل الأداة السابقة، يدعم TOWeb العديد من لغات البرمجة.

هذا هو أفضل تطبيق يمكنك استخدامه إذا كنت تريد إنشاء رسوم متحركة مذهلة لمواقع الويب الخاصة بك. يتم استخدامه غالبًا من قبل المصممين المشاركين في الرسوم المتحركة والإعلان، لذلك إذا كنت من المصممين الذين يقومون بإنشاء عناصر متحركة لاستخدامها في برامج أخرى يمكن الوصول إليها على جميع الأنظمة الأساسية، فإن هذا التطبيق هو ما تحتاجه. هناك عدد من الميزات التي من المؤكد أنك ستحبها في هذا التطبيق، بما في ذلك تكامل Google Drive، والأحداث، والكائنات ثلاثية الأبعاد، والطبقات، والمزيد.

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

تطبيق رائع يمكنك البدء في استخدامه الآن. تعتمد الأداة على Firefox وتقدم أسلوبًا حديثًا لإنشاء مواقع ويب رائعة. إنه يتمتع بميزات رائعة، وبينما يتطلب معظمها منك شراء ترخيص للاستخدام، هناك بعض الميزات التي يتم تقديمها لك مجانًا، وإن كان باستخدام محدود.

يعد هذا تطبيق ويب رائعًا لتطوير الويب، ومع ذلك، نظرًا لتعقيده، فهو ليس مناسبًا تمامًا للمبتدئين. ومع ذلك، على الرغم من أن الأداة ليست سهلة الاستخدام، إلا أنها توفر فرصًا رائعة لأولئك الذين لديهم بالفعل بعض الخبرة في تطوير الويب.

محرر نصوص مخصص فقط لمطوري الويب الأكثر تقدمًا. حقيقة أنها أداة تعتمد على النص تجعلها غير مناسبة تمامًا للمبتدئين، ولكن إذا كان لديك القليل من الخبرة في البرمجة، فهو تطبيق يستحق التفكير فيه لمشاريع تطوير الويب. إنه صغير وخفيف، ويمكنك حتى حمله على محرك أقراص فلاش. SynWrite هي أداة كاملة الميزات، مع تسجيل الماكرو، وسجل الحافظة، والمكونات الإضافية، والعديد من تعليمات البرمجة، والمعاينات، واللوحات. كما يسمح للمطورين بالبحث والاستبدال عبر ملفات متعددة بالإضافة إلى أنماط التعليمات البرمجية. ربما يكون هذا هو أفضل تطبيق سيتم استخدامه خلال المشروع بأكمله - بدءًا من إنشاء التخطيط وحتى كتابة التعليمات البرمجية.

إنه تطبيق أنيق لتطوير الويب يمكنه مساعدتك في إنشاء مواقع ويب رائعة وممتعة من الناحية الجمالية. تطبيق عبر الإنترنت يقدم ميزات رائعة إذا دفعت مقابلها، مما يعني أنه يمكنك توقع المزيد من الوظائف إذا كنت على استعداد للتخلي عن بضعة دولارات إضافية. هناك أيضًا نسخة مجانية، ولكنها لا تحتوي على العديد من الميزات مثل النسخة المدفوعة.

تم تصميم تطبيقات تطوير الويب لتسهيل عملك من خلال توفير بعض الميزات والأدوات التي ستحتاجها كمطور. يجب أن يعتمد اختيارك على الميزات التي تبحث عنها ونوع موقع الويب الذي ترغب في إنشائه.

في هذا الصدد، السؤال هو - ماذا تحتاج إلى معرفته؟
على أي حال، أنت بحاجة إلى واجهة خلفية، إذا فهمت بشكل صحيح، فإن Angular وVue والأطر الأخرى هي واجهة أمامية فقط.
هذا صحيح، أينما توجهت، يتم الحديث عن تطوير الويب في كل مكان باعتباره تطويرًا للواجهة الأمامية، وهو بالتأكيد مرتبط بـ Node.js (لكي تكتب شيئًا ما في Angular، لا يمكنك الاستغناء عنه). لا أفهم كيف ترتبط الواجهة الأمامية بـ Node.js، لأن... Node.js هي في الأساس طريقة لتشغيل JS خارج المتصفح.
على الأرجح، أنت تقرأ مقالات عن الواجهة الأمامية، لأنها لا تحتوي على شيء يتعلق بالواجهة الخلفية. كما تعلم، الواجهة الأمامية مكتوبة بلغة JS والعديد منهم مفتونون بحقيقة أنه يمكنك تثبيت NodeJS على الواجهة الخلفية وإنشاء مواقع ويب باستخدام لغة واحدة. إذا كنت أرغب في تشغيل تطبيق في المتصفح، فلماذا أحتاج إلى العقدة ؟ كل هذا يحيرني، ولا أرى سوى التناقضات.
لا تخلط. هناك تقنيات يتم استخدامها أثناء عملية التطبيق وهناك تقنيات يتم استخدامها أثناء عملية تطوير التطبيق. كل هذه Gulp وGrunt وBabel وWebpack وغيرها هي أدوات تطوير. إنها تعمل على تسريع وتبسيط وتحسين جودة العمل. في ذلك الوقت، تعد jQuery وAngular وReact هي المكتبات والأطر التي سيعمل التطبيق معها.

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

هنا لا أستطيع إلا أن أفترض أن الخادم، بدلا من HTML، يجب أن يتبادل البيانات مع التطبيق عبر json أو أي شيء آخر.
نعم، JSON هو الأكثر شيوعًا. أنت بحاجة إلى إطار عمل خلفي يمكنك من خلاله نشر REST API. على حد علمي، فإن معظم الأطر الحديثة للغات البرمجة الحديثة المستخدمة لتطوير الويب يمكنها القيام بذلك. لا أستطيع أن أقول على وجه اليقين أنني أعمل بنفس اللغة، ومع ذلك، فإن الخادم هو أساس أي تطبيق شبكة، وقبل كل شيء تحتاج إلى تطوير جزء الخادم.
قطعاً. تتكون تطبيقات الصفحة الواحدة الحديثة (SPA) من جزأين منفصلين - الواجهة الأمامية والخلفية. يمكن إنشاؤها بشكل منفصل تمامًا بواسطة مطورين مختلفين، والشيء الرئيسي هو الاتفاق على تنسيق نقل البيانات وجميع الفروق الدقيقة.

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

ما الذي يجب دراسته أيضًا؟ أم أن المعرفة المذكورة كافية؟
لا أعتقد أن هذا يكفي. ستحدد بدقة المهام التي يجب أن يحلها مشروعك وتختار التقنيات المناسبة لها. أنت بحاجة إلى التركيز على شيء واحد، فلن تتمكن من دراسة كل شيء حديث، ولن يكون هناك ما يكفي من الوقت، فهل من الممكن عدم استخدام Node.js، وبالتالي، npm إذا كان JS (TS) مطلوبًا فقط المتصفح؟ وفي الوقت نفسه، الاختبار ضروري أيضا.
نعم، إنه تماما. من ناحية العميل، على سبيل المثال، JS+Angular. وعلى الجانب الخلفي، على سبيل المثال، PHP + Laravel. يوجد الآن الكثير من اللغات والمزيد من الأطر الخاصة بها. اختر ما هو أسهل بالنسبة لك.

في الآونة الأخيرة، يرجع ذلك أساسًا إلى تجربة المستخدم والأداء.

أريد أن أقدم 7 مبادئ قابلة للتنفيذ لمواقع الويب التي ترغب في استخدام JavaScript للتحكم في واجهة المستخدم. هذه المبادئ هي نتيجة عملي كمصمم ويب، ولكن أيضًا كمستخدم لـ WWW منذ فترة طويلة.

أصبحت JavaScript بلا شك أداة لا غنى عنها لمطوري الواجهة الأمامية. الآن يتوسع نطاقه ليشمل مجالات أخرى مثل الخوادم ووحدات التحكم الدقيقة. تم اختيار لغة البرمجة هذه من قبل جامعات مرموقة لتعليم الطلاب أساسيات علوم الكمبيوتر.

وفي الوقت نفسه، هناك عدد من الأسئلة المتعلقة بدورها واستخداماتها المحددة، والتي يجد الكثيرون صعوبة في الإجابة عليها، بما في ذلك مؤلفو الأطر والمكتبات.

  • هل يجب استخدام جافا سكريبت كبديل لوظائف المتصفح: التاريخ، والتنقل، والعرض؟
  • هل تموت الواجهة الخلفية؟ هل من الضروري تقديم HTML على الإطلاق؟
  • هل صحيح أن تطبيقات الصفحة الواحدة (SPA) هي المستقبل؟
  • هل يجب على JS إنشاء صفحات على موقع ويب وعرض الصفحات في تطبيقات الويب؟
  • هل يجب أن أستخدم تقنيات مثل PJAX أو TurboLinks؟
  • ما هو الفرق الدقيق بين موقع الويب وتطبيق الويب؟ هل يجب أن يبقى شيء واحد؟
وفيما يلي ستكون محاولاتي للإجابة على هذه الأسئلة. حاولت البحث عن كيفية استخدام JavaScript من منظور تجربة المستخدم (UX). وعلى وجه الخصوص، أوليت اهتمامًا خاصًا بفكرة تقليل الوقت الذي يستغرقه المستخدم للحصول على البيانات التي يهتم بها. بدءاً من أساسيات تقنيات الشبكات وانتهاءً بالتنبؤ بسلوك المستخدم المستقبلي.1. عرض الصفحات على الخادم؛ DR: لا يتم العرض على الخادم من أجل تحسين محركات البحث، بل من أجل الأداء. ضع في الاعتبار الطلبات الإضافية للنصوص البرمجية والأنماط وطلبات واجهة برمجة التطبيقات اللاحقة. في المستقبل، فكر في استخدام أسلوب HTTP 2.0 Push.
أولاً، يجب أن أشير إلى الخطأ الشائع المتمثل في فصل "التطبيقات المقدمة من الخادم" عن "تطبيقات الصفحة الواحدة". إذا أردنا تحقيق أفضل تجربة من وجهة نظر المستخدم، فيجب ألا نقتصر على مثل هذه الحدود ونتخلى عن بديل لصالح آخر.

الأسباب واضحة تماما. يتم نقل الصفحات عبر الإنترنت، وهو ما له قيود مادية، كما أوضح ستيوارت تشيشاير في مقالته الشهيرة "إنه الكمون، أيها الأحمق":

المسافة بين ستانفورد وبوسطن هي 4320 كم.
سرعة الضوء في الفراغ هي 300×10^6 م/ث.
تبلغ سرعة الضوء في الألياف الضوئية حوالي 66% من سرعة الضوء في الفراغ.
سرعة الضوء في الألياف الضوئية هي 300 × 10^6 م/ث * 0.66 = 200 × 10^6 م/ث.
تأخير في اتجاه واحد عند الإرسال إلى بوسطن 4320 كم / 200 × 10^6 م/ث = 21.6 مللي ثانية.
زمن الوصول ذهابًا وإيابًا 43.2 مللي ثانية.
تبلغ مدة البينغ من ستانفورد إلى بوسطن على الإنترنت الحديث حوالي 85 مللي ثانية (...)
لذلك، تنقل معدات الإنترنت الحديثة إشارة بسرعة 0.5 مرة من سرعة الضوء.
يمكن تحسين النتيجة المحددة البالغة 85 مللي ثانية (وهي بالفعل أفضل قليلاً)، ولكن من المهم أن نفهم أن هناك حدًا ماديًا للتأخير عند نقل المعلومات عبر الإنترنت، بغض النظر عن مقدار زيادة عرض النطاق الترددي على أجهزة كمبيوتر المستخدمين .

وهذا مهم بشكل خاص مع زيادة شعبية تطبيقات JavaScript، والتي عادةً ما تحتوي فقط على علامات وحقل فارغ بجوارها. ما يسمى بتطبيقات الصفحة الواحدة (SPA) - يقوم الخادم بإرجاع صفحة واحدة، ويتم استدعاء كل شيء آخر عن طريق التعليمات البرمجية من جانب العميل.

تخيل سيناريو حيث يصل المستخدم مباشرة إلى app.com/orders. بحلول الوقت الذي يتلقى فيه طلبك هذا الطلب ويعالجه، يكون لديه بالفعل طلب مهم معلومةحول ما يجب أن يظهر على الصفحة. ويمكنه، على سبيل المثال، تحميل أمر من قاعدة البيانات وإضافته إلى الاستجابة. لكن معظم المنتجعات الصحية في هذه الحالة تُرجع صفحة فارغة وعلامة. ثم سيتعين عليك تبادل الطلبات مرة أخرى للحصول على محتويات البرنامج النصي، ومرة ​​أخرى للحصول على المحتوى.

تحليل HTML الذي يرسله الخادم لكل صفحة SPA

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

ومع ذلك، حتى مع مراعاة ذاكرة التخزين المؤقت، هناك خسارة معينة في الأداء إذا أخذنا في الاعتبار وقت التحليل وتنفيذ البرنامج النصي. في المقالة "هل jQuery كبير جدًا بالنسبة للجوال؟" يوضح كيف يمكن لـ jQuery وحده أن يبطئ بعض متصفحات الهاتف المحمول بمئات المللي ثانية.

ومما يزيد الطين بلة أن المستخدم عادةً لا يتلقى أي تعليقات أثناء تحميل البرامج النصية. والنتيجة هي صفحة فارغة على الشاشة، والتي تتحول فجأة إلى صفحة محملة بالكامل.

والأهم من ذلك أننا نميل إلى نسيان أن عملية نقل البيانات عبر الإنترنت (TCP) الأكثر شيوعًا تبدأ بداية بطيئة. ويكاد يكون من المؤكد أن هذا يضمن عدم نقل معظم حزم البرامج النصية دفعة واحدة، مما يزيد الوضع سوءًا.

يبدأ اتصال TCP بتبادل حزم المصافحة. إذا كنت تستخدم SSL، وهو أمر مهم لنقل البرامج النصية بشكل آمن، فهناك نوعان من عمليات تبادل الحزم الإضافية (واحدة إذا استعاد العميل الجلسة). فقط بعد ذلك يمكن للخادم البدء في إرسال البيانات، ولكن الممارسة تظهر أنه يفعل ذلك ببطء وعلى دفعات.

تم تضمين آلية التحكم في الازدحام والتي تسمى Slow Start في بروتوكول TCP لإرسال البيانات بزيادات شرائح. وهذا له أثران خطيران على SPA:

1. يستغرق تحميل البرامج النصية الكبيرة وقتًا أطول بكثير مما تبدو عليه. كما هو موضح في كتاب "شبكات المتصفح عالية الأداء" من تأليف إيليا غريغوريك، يستغرق الأمر "أربعة عمليات تبادل للحزم (...) ومئات المللي ثانية من زمن الوصول للوصول إلى 64 كيلو بايت من تبادل البيانات بين العميل والخادم." على سبيل المثال، في حالة الاتصال السريع بالإنترنت بين لندن ونيويورك، يستغرق الأمر 225 مللي ثانية قبل أن يتمكن TCP من الوصول إلى الحد الأقصى لحجم الحزمة.

2. نظرًا لأن هذه القاعدة تنطبق أيضًا على التحميل الأولي للصفحة، فمن المهم جدًا تحديد المحتوى الذي تم تحميله ليتم عرضه على الصفحة أولاً. وكما اختتم بول أيرش في عرضه التقديمي "تسليم المنتجات"، فإن أول 14 كيلو بايت تعتبر بالغة الأهمية. يكون هذا واضحًا إذا نظرت إلى الرسم البياني الذي يشير إلى أحجام النقل بين العميل والخادم خلال المراحل الأولى من إنشاء الاتصال.


ما عدد كيلوبايت التي يمكن للخادم إرسالها في كل مرحلة اتصال، حسب المقطع

تبدو مواقع الويب التي تتمكن من تقديم المحتوى (حتى الترميز الأساسي بدون بيانات) في هذه النافذة سريعة الاستجابة بشكل استثنائي. في الواقع، العديد من مؤلفي التطبيقات السريعة من جانب الخادم ينظرون إلى JavaScript على أنها شيء غير ضروري أو شيء يجب استخدامه بحذر شديد. يتم تعزيز هذا الموقف بشكل أكبر إذا كان التطبيق يحتوي على واجهة خلفية وقاعدة بيانات سريعة، وتقع خوادمه بالقرب من المستخدمين (CDN).

يعتمد دور الخادم في تسريع عرض المحتوى بشكل مباشر على تطبيق الويب. لا يقتصر الحل دائمًا على "عرض صفحات كاملة على الخادم".

في بعض الحالات، من الأفضل استبعاد جزء من الصفحة غير ذي صلة حاليًا بالمستخدم من الرد الأولي وتركه لوقت لاحق. بعض التطبيقات، على سبيل المثال، تفضل عرض "جوهر" الصفحة فقط لضمان الاستجابة الفورية. ثم يطلبون أجزاء مختلفة من الصفحة بالتوازي. وهذا يوفر استجابة أفضل حتى في المواقف ذات الواجهة الخلفية البطيئة والقديمة. بالنسبة لبعض الصفحات، قد يكون عرض الجزء المرئي فقط من الصفحة خيارًا جيدًا.

مهم للغاية التقييم النوعيالبرامج النصية والأنماط، مع الأخذ في الاعتبار المعلومات الموجودة لدى الخادم حول الجلسة والعميل وعنوان URL. من الواضح أن البرامج النصية التي تقوم بفرز الطلبات ستكون أكثر أهمية بالنسبة إلى/الطلبات من منطق صفحة الإعدادات. ربما ليس الأمر واضحًا، ولكن هناك فرقًا في تحميل "CSS الهيكلي" و"تصميم CSS". قد تكون هناك حاجة إلى الأول لرمز JavaScript، لذلك فهو مطلوب حظروالثاني يتم تحميله بشكل غير متزامن.

من الأمثلة الجيدة على SPA التي لا تؤدي إلى تبادل حزم غير ضروري هو استنساخ مفهوم StackOverflow سعة 4096 بايت، والذي يمكن تحميله نظريًا مع الحزمة الأولى بعد المصافحة على اتصال TCP! تمكن المؤلف من تحقيق ذلك عن طريق رفض التخزين المؤقت، واستخدام المضمنة لجميع الموارد في الاستجابة من الخادم. باستخدام دفع خادم SPDY أو HTTP/2، من الممكن نظريًا نقل كافة تعليمات برمجية العميل المخزنة مؤقتًا في قفزة واحدة. حسنًا، في الوقت الحاضر، يظل عرض الأجزاء أو الصفحة بأكملها على جانب الخادم الطريقة الأكثر شيوعًا للتخلص من جولات تبادل الحزم غير الضرورية.


إثبات مفهوم SPA باستخدام مضمّن لـ CSS وJS للتخلص من الرحلات ذهابًا وإيابًا غير الضرورية

إن النظام المرن إلى حد ما الذي يقسم العرض بين المتصفح والخادم ويوفر أدوات لتحميل البرامج النصية والأنماط تدريجيًا يمكن أن يؤدي إلى طمس الخط الفاصل بين مواقع الويبو تطبيقات الويب. يستخدم كلاهما عناوين URL والتنقل وعرض البيانات للمستخدم. حتى تطبيق جداول البيانات الذي يعتمد تقليديًا على وظائف جانب العميل يجب أن يُظهر للعميل أولاً المعلومات التي يحتاج إلى تحريرها. والقيام بذلك بأقل عدد من رحلات الذهاب والإياب أمر بالغ الأهمية.

في رأيي، أكبر عيب في الأداء في العديد من الأنظمة الشائعة هذه الأيام يأتي من التراكم التدريجي للتعقيد في المكدس. ومع مرور الوقت، تمت إضافة تقنيات مثل JavaScript وCSS. كما نمت شعبيتها تدريجياً. الآن فقط يمكننا أن نقدر كيف يمكن استخدامها بشكل مختلف. نحن نتحدث أيضًا عن تحسين البروتوكولات (يظهر هذا من خلال التقدم الحالي في SPDY وQUIC)، ولكن الفائدة الأكبر تأتي من تحسين التطبيقات.

قد يكون من المفيد تذكر بعض المناقشات التاريخية التي أحاطت بتصميم HTML المبكر والشبكة العالمية للطقس (WWW). على سبيل المثال، تقترح هذه القائمة البريدية من عام 1997 إضافة العلامة في HTML. يكرر مارك أندريسن أهمية توصيل المعلومات بسرعة:

"إذا كانت هناك حاجة إلى تجميع مستند سريعًا، فيمكن أن يكون الأمر معقدًا كما نريد، وحتى لو كان التعقيد محدودًا، فسوف نظل نواجه مشكلات كبيرة في الأداء من هيكلة المستندات بهذه الطريقة. أولاً، هذا يكسر على الفور مبدأ القفزة الواحدة لـ WWW (حسنًا، IMG تكسره أيضًا، ولكن لسبب محدد جدًا وبمعنى محدود جدًا) - هل نحن متأكدون من أننا نريد هذا؟ 2. استجابة فورية لإجراءات المستخدم؛ DR: تتيح لك JavaScript إخفاء زمن انتقال الشبكة تمامًا. وباستخدام هذا كمبدأ تصميمي، يمكننا أيضًا إزالة جميع مؤشرات التحميل ورسائل "التحميل" تقريبًا من التطبيق. تفتقد PJAX أو TurboLinks فرصًا لزيادة سرعة الواجهة الذاتية.
هدفنا هو زيادة سرعة الاستجابة لإجراءات المستخدم. بغض النظر عن مقدار الجهد الذي نبذله لتقليل عدد القفزات عند العمل باستخدام تطبيق ويب، فهناك أشياء خارجة عن سيطرتنا. هذا هو الحد النظري لسرعة الضوء والحد الأدنى من ping بين العميل والخادم.

أحد العوامل المهمة هو جودة الاتصال غير المتوقعة بين العميل والخادم. إذا كانت جودة الاتصال رديئة، فسيتم إعادة إرسال الحزم. عندما يحتاج المحتوى إلى التحميل في رحلتين ذهابًا وإيابًا، فقد تحتاج إلى المزيد.

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

لنفترض مرة أخرى أن هذا هو HTML عادي. يتم ربط المستندات عن طريق الارتباطات التشعبية أو العلامات . إذا قمت بالنقر فوق أي منها، يقوم المتصفح بإجراء طلب شبكة، والذي يستغرق وقتًا طويلاً بشكل غير متوقع، ثم يتلقى البيانات المستلمة ويعالجها ويدخل أخيرًا إلى حالة جديدة.

تتيح لك JavaScript الاستجابة فورًا وبشكل متفائل لإجراءات المستخدم. يؤدي النقر على رابط أو زر إلى الحصول على استجابة فورية، دون الحاجة للذهاب إلى الإنترنت. ومن الأمثلة المعروفة واجهة Gmail (أو Google Inbox)، حيث تتم أرشفة رسالة البريد الإلكتروني على الفور، بينما يتم إرسال الطلب المقابل إلى الخادم ومعالجته بشكل غير متزامن.

في حالة النموذج، بدلاً من انتظار بعض تعليمات HTML البرمجية كرد على ملئه، يمكننا الرد فورًا بمجرد أن يضغط المستخدم على "Enter". أو حتى أفضل من ذلك، كما يفعل بحث Google، يمكننا الاستجابة في وقت مبكر من خلال إعداد العلامات لصفحة جديدة مسبقًا.

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

تعد صفحة Google الرئيسية مثالًا جيدًا لأنها توضح المبدأين الأولين من مقالتنا بوضوح تام.

في أواخر عام 2004، كانت جوجل رائدة في استخدام جافا سكريبت لتقديم اقتراحات في الوقت الفعلي أثناء كتابة استعلام بحث (ومن المثير للاهتمام أن هذه الميزة تم تطويرها بواسطة موظف في وقت فراغه بنسبة 20٪، تمامًا مثل Gmail). حتى أن هذا أصبح الأساس لظهور أياكس:

انظر إلى اقتراح جوجل. شاهد تحديث مصطلحات البحث أثناء الكتابة، على الفور تقريبًا... دون تأخير إعادة تحميل الصفحة. يعد Google Suggest وGoogle Maps مثالين على أسلوب جديد لإنشاء تطبيقات الويب التي نطلق عليها في Adaptive Path اسم "Ajax".
وفي عام 2010، قدموا البحث الفوري، حيث يلعب JS دورًا مركزيًا، حيث يلغي التحديثات اليدوية للصفحة تمامًا ويتحول إلى ترميز "نتائج البحث" عند ضغطة المفتاح الأولى، كما هو موضح في الرسم التوضيحي أعلاه.

قد يكون هناك مثال بارز آخر لتكييف العلامات في جيبك. منذ الأيام الأولى، طلب نظام تشغيل iPhone من مؤلفي التطبيقات تقديم صورة default.pngوالتي يمكن عرضها فورًا على الشاشة أثناء تحميل التطبيق نفسه.


يفرض نظام تشغيل iPhone تحميل ملف default.png قبل تشغيل التطبيق

نوع آخر من الإجراءات إلى جانب النقرات وعمليات إرسال النماذج التي تم تحسينها بشكل كبير بواسطة JavaScript هو عرض تحميل الملفات.

يمكننا تسجيل محاولة المستخدم لتنزيل ملف بطرق مختلفة: السحب والإفلات، واللصق من المخزن المؤقت، واختيار ملف. وبعد ذلك، بفضل واجهات برمجة تطبيقات HTML5 الجديدة، يمكننا عرض المحتوى كما لو تم تنزيله بالفعل. مثال على هذا النوع من الواجهة هو عملنا مع التنزيلات في Cloudup. لاحظ كيف يتم إنشاء الصورة المصغرة وعرضها على الفور:


يتم عرض الصورة وعرضها حتى انتهاء التحميل

في كل هذه الحالات نحن نتحسن إدراك السرعة. ولحسن الحظ، هناك الكثير من الأدلة على فائدة هذا النهج. خذ على الأقل مثالا لكيفية ذلك يزيدالمسافات إلى ناقل الأمتعة في مطار هيوستن انخفضعدد الشكاوى المتعلقة بالأمتعة المفقودة، دون الحاجة إلى الإسراع في معالجة الأمتعة.

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

هناك مواقف يكون فيها لوهم الإجراء الفوري تأثير ضار على تجربة المستخدم. يمكن أن يكون هذا شكلاً من أشكال الدفع أو إنهاء جلسة على الموقع. ومن خلال اتباع نهج متفائل هنا، وخداع المستخدم فعليًا، فإننا نخاطر بإزعاجه.

ولكن حتى في هذه الحالات، يجب إيقاف عرض المغازل أو مؤشرات التحميل على الشاشة. يجب أن يتم عرضها فقط بعد أن يعتبر المستخدم أن الاستجابة ليست فورية. وفقًا لدراسة Nielsen التي يتم الاستشهاد بها كثيرًا:

ظلت نصائح وقت الاستجابة الأساسية كما هي لمدة ثلاثين عامًا (ميلر 1968)؛ بطاقة وآخرون. 1991:
* 0.1 ثانية هو الحد الأقصى للمستخدم لإدراك الاستجابة على أنها فورية، ولا داعي لعرض أي معلومات إضافية غير نتيجة العملية.
* 1.0 ثانية هي الحد الأقصى لاستمرارية تفكير المستخدم، على الرغم من أنه سيلاحظ التأخير. عادةً، لا يلزم وجود إشارة إضافية للتأخيرات التي تزيد عن 0.1 ثانية ولكن أقل من 1.0 ثانية، ولكن يفقد المستخدم الشعور بالعمل المباشر مع البيانات.
* 10 ثوانٍ هو الحد الأقصى لجذب انتباه المستخدم إلى الحوار. مع زمن الوصول العالي، سيرغب المستخدمون في تنفيذ مهمة أخرى أثناء انتظار الرد من الكمبيوتر.
للأسف، تفتقد تقنيات مثل PJAX أو TurboLinks معظم الميزات الموضحة في هذا القسم. لا "يعرف" الكود من جانب العميل الحالة المستقبلية للصفحة حتى يتم تبادل البيانات مع الخادم.3. الاستجابة لتغييرات البيانات؛ DR: عند تحديث البيانات على الخادم، يجب إخطار العميل دون تأخير. يعد هذا أحد أشكال تحسين الإنتاجية عندما يتحرر المستخدم من الحاجة إلى تنفيذ إجراءات إضافية (اضغط على F5، وقم بتحديث الصفحة). مشكلات جديدة: (إعادة) إدارة الاتصال واستعادة الحالة.
ويتعلق المبدأ الثالث باستجابة واجهة المستخدم للتغيرات في البيانات في المصدر، وعادةً ما يكون ذلك خادم قاعدة بيانات واحدًا أو أكثر.

لقد انتهى نموذج تمرير بيانات HTML الذي يظل ثابتًا حتى يقوم المستخدم بتحديث الصفحة (مواقع الويب التقليدية) أو يتفاعل معها (Ajax).

يجب أن يتم تحديث واجهة المستخدم الخاصة بك تلقائيًا.

وهذا أمر بالغ الأهمية في عالم يشهد تدفقًا متزايدًا للمعلومات من مصادر مختلفة، بما في ذلك الساعات والهواتف والأجهزة اللوحية والأجهزة القابلة للارتداء التي ستظهر في المستقبل.

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

نحن نعيش الآن في عالم حيث تقوم بتحميل صورة وتتلقى على الفور تقريبًا الإعجابات والتعليقات من الأصدقاء والمعارف. أصبحت الحاجة إلى الاستجابة الفورية ضرورة طبيعية في البيئة التنافسية للتطبيقات الأخرى.

ومع ذلك، سيكون من الخطأ افتراض أن فوائد التحديثات الفورية لواجهة المستخدم تقتصر على التطبيقات متعددة المستخدمين. ولهذا السبب أحب الحديث عنه نقاط البيانات المتفق عليها، بدلاً من المستخدمين. لنأخذ سيناريو نموذجيًا لمزامنة الصور بين هاتفك والكمبيوتر المحمول الخاص بك:


يمكن لتطبيق المستخدم الواحد أيضًا الاستفادة من التفاعل.

من المفيد أن نتخيل الجميعالمعلومات التي يتم إرسالها إلى المستخدم على أنها "رد فعل". تعد مزامنة الجلسة وحالة التفويض أحد الأمثلة على النهج الشامل. إذا كان لدى مستخدمي التطبيق الخاص بك عدة علامات تبويب مفتوحة في نفس الوقت، فيجب أن يؤدي إنهاء جلسة العمل على إحدى علامات التبويب إلى إلغاء تنشيط التفويض على جميع العلامات الأخرى على الفور. يؤدي هذا حتماً إلى تحسين الأمان وحماية المعلومات السرية بشكل أفضل، خاصة في المواقف التي يتمكن فيها عدة أشخاص من الوصول إلى نفس الجهاز.


تتفاعل كل صفحة مع حالة الجلسة وحالة الترخيص

بمجرد إنشاء قاعدة تحديث المعلومات الموجودة على الشاشة تلقائيًا، من المهم العمل على مهمة جديدة: استعادة الحالة.

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


مثال على ما يحدث إذا لم يتم تحديث الاتصال بشكل صحيح

تتفاعل قدرة التطبيق على إعادة الاتصال بشكل طبيعي مع المبدأ رقم 1. إذا اخترت إرسال البيانات عند تحميل الصفحة الأولى، فيجب عليك أيضًا مراعاة الوقت المنقضي قبل تحميل البرامج النصية. هذه المرة تعادل بشكل أساسي وقت قطع الاتصال، وبالتالي فإن الاتصال الأولي للبرامج النصية الخاصة بك هو استئناف الجلسة.

4. التحكم في تبادل البيانات مع الخادم tl;DR: الآن يمكننا ضبط تبادل البيانات مع الخادم. تأكد من معالجة الأخطاء، وإعادة محاولة تقديم الطلبات إلى العميل، ومزامنة البيانات في الخلفية، وإبقاء ذاكرة التخزين المؤقت في وضع عدم الاتصال.
عندما ظهرت شبكة الإنترنت إلى الوجود، كان الاتصال بين العميل والخادم محدودًا بعدة طرق:
  • سيؤدي النقر فوق الارتباط إلى إرسال GET لجلب صفحة جديدة وعرضها.
  • سيؤدي إرسال النموذج إلى إرسال POST أو GET متبوعًا بعرض صفحة جديدة.
  • سيؤدي حقن صورة أو كائن إلى إرسال GET بشكل غير متزامن متبوعًا بالعرض.
    • إن بساطة هذا النموذج جذابة للغاية، والآن أصبحت الأمور بالتأكيد أكثر تعقيدًا عندما يتعلق الأمر بفهم كيفية تلقي المعلومات وإرسالها.

    القيود الرئيسية تتعلق بالنقطة الثانية. كانت عدم القدرة على إرسال البيانات دون تحميل صفحة جديدة بالضرورة بمثابة عيب من منظور الأداء. ولكن الشيء الأكثر أهمية هو أنه كسر زر "العودة" تمامًا:


    ربما تكون القطعة الأثرية الأكثر إزعاجًا للويب القديم

    ولهذا السبب ظلت الويب كمنصة للتطبيقات غير مكتملة بدون JavaScript. يمثل Ajax قفزة هائلة إلى الأمام من حيث سهولة النشر بواسطة المستخدم.

    لدينا الآن العديد من واجهات برمجة التطبيقات (XMLHttpRequest، وWebSocket، وEventSource، على سبيل المثال لا الحصر) التي توفر تحكمًا كاملاً ودقيقًا في تدفق البيانات. بالإضافة إلى القدرة على نشر بيانات المستخدم من خلال نموذج، لدينا فرص جديدة لتحسين تجربة المستخدم.

    يرتبط العرض بشكل مباشر بالمبدأ السابق حالة الإتصال. إذا كنا نتوقع تحديث البيانات تلقائيًا، فيجب علينا إبلاغ المستخدم بالحقائق فقدان الاتصالو محاولات لاستعادته.

    عند اكتشاف انقطاع الاتصال، من المفيد تخزين البيانات في الذاكرة (أو الأفضل من ذلك، في التخزين المحلي) بحيث يمكن إرسالها لاحقًا. وهذا مهم بشكل خاص في ضوء الاستخدام المستقبلي لـ ServiceWorker، والذي يسمح بتشغيل تطبيقات JavaScript في الخلفية. إذا لم يكن تطبيقك مفتوحًا، فلا يزال بإمكانك الاستمرار في محاولة مزامنة البيانات مع الخادم في الخلفية.

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

    يجب التعامل مع بعض الأخطاء بعناية خاصة. على سبيل المثال، قد يعني الرقم 403 غير المتوقع أن جلسة المستخدم قد تم إبطالها. في مثل هذه الحالات، من الممكن استعادة الجلسة من خلال إظهار نافذة للمستخدم لإدخال تسجيل الدخول وكلمة المرور.

    من المهم أيضًا التأكد من أن المستخدم لا يقاطع تدفق البيانات عن طريق الخطأ. يمكن أن يحدث هذا في حالتين. الحالة الأولى والأكثر وضوحًا هي إغلاق المتصفح أو علامة التبويب، وهو ما نحاول منعه باستخدام معالج beforeunload.


    تحذير قبل التفريغ

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

    5. لا تكسر التاريخ، بل قم بتحسينه tl;DR: إذا لم يتمكن المتصفح من إدارة عناوين URL والسجل، فسنواجه مشاكل جديدة. تأكد من تلبية سلوك التمرير المتوقع. احفظ ذاكرة التخزين المؤقت الخاصة بك للحصول على تعليقات سريعة.
    باستثناء إرسال النماذج، فإن استخدام الارتباطات التشعبية فقط في تطبيق الويب سيمنحنا إمكانية التنقل للأمام/الخلف بشكل كامل في المتصفح.

    على سبيل المثال، عادةً ما يتم إنشاء صفحة نموذجية "لا نهاية لها" باستخدام زر JavaScript الذي يطلب بيانات/HTML إضافية ويقوم بإدراجها. لسوء الحظ، قليل من الناس يتذكرون استدعاء History.pushState أو استبدالState كخطوة مطلوبة.

    ولهذا السبب أستخدم كلمة "استراحة". مع النموذج البسيط للويب الأصلي، لم يكن هذا الوضع ممكنًا. كان كل تغيير في الحالة يعتمد على تغيير عنوان URL.

    ولكن هناك أيضًا الوجه الآخر للعملة، ألا وهو الفرصة يحسنسجل التصفح، والذي نتحكم فيه الآن باستخدام JavaScript.

    أحد هذه الاحتمالات كان يسمى Fast Back بواسطة دانيال بيبيوس:

    يجب أن يعمل زر الرجوع بسرعة؛ لا يتوقع المستخدمون الكثير من التغيير في البيانات.
    يشبه الأمر التعامل مع زر الرجوع كزر من تطبيق ويب وتطبيق المبدأ رقم 2 عليه: الاستجابة على الفور لإجراء المستخدم. الشيء الرئيسي هو أن لديك الفرصة لتحديد كيفية تخزين الصفحة السابقة مؤقتًا وعرضها على الفور على الشاشة. يمكنك بعد ذلك تطبيق المبدأ رقم 3 ثم إبلاغ المستخدم عند وصول بيانات جديدة إلى تلك الصفحة.

    لا تزال هناك بعض المواقف التي لا يمكنك فيها التحكم في سلوك ذاكرة التخزين المؤقت. على سبيل المثال، إذا قمت بعرض صفحة، ثم انتقلت إلى موقع جهة خارجية، ثم قام المستخدم بالنقر فوق "رجوع". التطبيقات التي تعرض HTML على جانب الخادم ثم تعدلها على جانب العميل تكون عرضة بشكل خاص لهذا الخطأ الصغير:


    التشغيل غير الصحيح لزر "العودة".

    هناك طريقة أخرى لقطع التنقل وهي تجاهل ذاكرة حالة التمرير. مرة أخرى، من المحتمل ألا تواجه الصفحات التي لا تستخدم JS وإدارة السجل اليدوي مشكلة هنا. ولكن ستكون هناك صفحات ديناميكية. لقد قمت باختبار اثنين من أكثر خلاصات الأخبار المستندة إلى JavaScript شيوعًا على الإنترنت: Twitter وFacebook. كلاهما كان يعاني من فقدان الذاكرة التمريري.


    عادة ما يكون تقليب الصفحات إلى ما لا نهاية علامة على فقدان الذاكرة أثناء التمرير

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


    يجب حفظ تغيير نوع التعليقات في التاريخ

    إذا تمت إعادة عرض الصفحة بعد النقر فوق رابط داخل التطبيق، فقد يتوقع المستخدم توسيع جميع التعليقات. عندما تتغير الدولة، يجب حفظها في التاريخ.

    6. تحديث الكود عبر رسائل الدفع: لا يكفي إرسال البيانات فقط عبر رسائل الدفع، فأنت بحاجة أيضًا إلى رمز. تجنب أخطاء API وتحسين الأداء. استخدم DOM عديم الحالة لإعادة تصميم تطبيقك دون عناء.
    من المهم للغاية أن يستجيب تطبيقك للتغييرات في الكود.

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

    هناك سبب لا يقل أهمية وهو الالتزام بالمبدأ رقم 3. إذا كانت واجهتك تقوم بتحديث نفسها بنفسها، فليس هناك سبب وجيه يدفع المستخدمين إلى اللجوء إلى إعادة تحميل الصفحة يدويًا.

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

    إذا كانت قناة دفع الخادم تعمل، فيمكن إعلام المستخدم بتوفر رمز جديد. إذا لم يكن الأمر كذلك، فيمكن إضافة رقم الإصدار إلى رأس طلبات HTTP الصادرة. يمكن للخادم مقارنتها بأحدث إصدار معروف، والموافقة على معالجة الطلب أم لا، وإصدار مهمة للعميل.

    بعد ذلك، تقوم بعض تطبيقات الويب بإعادة تحميل الصفحة بالقوة نيابة عن المستخدم. على سبيل المثال، إذا لم تكن الصفحة في المنطقة المرئية من الشاشة ولا توجد نماذج مكتملة للإدخال.

    الطريقة الأفضل هي مبادلة التعليمات البرمجية "الساخنة". هذا يعني أنه ليس عليك إعادة تحميل الصفحة بالكامل. بدلا من ذلك، مؤكد وحداتيتم استبدالها سريعًا، ويتم إعادة إرسال التعليمات البرمجية الخاصة بها للتنفيذ.

    في العديد من التطبيقات الموجودة، يكون من الصعب جدًا التبديل الفوري للتعليمات البرمجية. للقيام بذلك، يجب عليك في البداية الالتزام بالهندسة المعمارية التي تفصل سلوك(الكود) من بيانات(ولاية). سيسمح لنا هذا التقسيم بطرح العديد من التصحيحات المختلفة بسرعة كبيرة.

    على سبيل المثال، يوجد في تطبيق الويب الخاص بنا وحدة تقوم بإعداد ناقل لنقل الأحداث (مثل مقبس io). عند وقوع حدث ما، تتغير حالة مكون معين وينعكس ذلك في DOM. يمكنك بعد ذلك تغيير سلوك ذلك المكون، على سبيل المثال، بحيث يقوم بإنشاء ترميز DOM مختلف للحالة الحالية والحالة الجديدة.

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

    لكن المشكلة تنشأ على الفور حول كيفية تقييم الوحدات دون آثار جانبية غير مرغوب فيها. إن الهندسة المعمارية مثل تلك التي تقدمها React هي الأنسب هنا. إذا تم تحديث كود أحد المكونات، فيمكن ببساطة إعادة تنفيذ منطقه وتحديث DOM. اقرأ شرح دان أبراموف لهذا المفهوم.

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

    7. التنبؤ بالسلوك؛ DR: تأخير سلبي.
    قد يحتوي تطبيق JavaScript الحديث على آليات للتنبؤ بإجراءات المستخدم.

    التطبيق الأكثر وضوحًا لهذه الفكرة هو التنزيل المسبق للبيانات من الخادم قبل أن يطلبها المستخدم. يعد تحميل صفحة ويب مع تحريك مؤشر الماوس فوقها بحيث يؤدي النقر فوق الروابط إلى عرضها على الفور مثالًا بسيطًا.

    هناك طريقة أكثر تقدمًا قليلاً لمراقبة تتبع الماوس تقوم بتحليل مسار الماوس من أجل "الاصطدامات" المستقبلية مع العناصر التفاعلية مثل الأزرار. :


    يتنبأ البرنامج المساعد jQuery بمسار الماوس

    الاستنتاج تظل شبكة الويب هي الوسيلة الأكثر تنوعًا لنقل المعلومات. نستمر في إضافة الديناميكيات إلى صفحاتنا، وقبل أن نقوم بتنفيذها، يجب علينا التأكد من أننا نحافظ على المبادئ المهمة للويب التي ورثناها.

    تعد الصفحات المرتبطة تشعبيًا بمثابة وحدات بناء جيدة لأي تطبيق. ويضمن تحميل التعليمات البرمجية والأنماط والعلامات بشكل تدريجي أثناء تفاعل المستخدم أداءً رائعًا دون التضحية بالتفاعل.

    يتم توفير ميزات فريدة جديدة بواسطة JavaScript. إذا تم استخدام هذه التقنيات على نطاق واسع، فإنها ستوفر أفضل تجربة لمستخدمي النظام الأساسي الأكثر حرية على الإطلاق - WWW.

    العلامات:

    • وقت الإستجابة
    • أداء
    • بيجاكس
    • الروابط التوربينية
    اضف اشارة

    ما هو تطوير تطبيقات الويب؟

    تطوير تطبيقات الويب هو مصطلح عام لعملية إنشاء صفحات الويب أو مواقع الويب. يتم إنشاء صفحات الويب باستخدام HTML وCSS وJavaScript. يمكن أن تحتوي هذه الصفحات على نصوص ورسومات بسيطة، تشبه مستندًا ثابتًا. يمكن أيضًا أن تكون الصفحات تفاعلية أو تعرض معلومات متغيرة. يعد إنشاء الصفحات التفاعلية أكثر تعقيدًا بعض الشيء، ولكنها تسمح لك بإنشاء مواقع ويب غنية بالمحتوى. اليوم، أصبحت معظم الصفحات تفاعلية وتقدم خدمات تفاعلية متقدمة مثل عربات التسوق عبر الإنترنت، والمرئيات الديناميكية، وحتى الشبكات الاجتماعية المتطورة.

    يتم تطوير التطبيقات لأجهزة الكمبيوتر الحديثة باستخدام لغات البرمجة المتخصصة. ستساعدك هذه المواد التمهيدية على التعرف عليها.


    فيديو | 15 دقيقة | لغات البرمجة

    يتحدث هذا التقرير عن سبب الحاجة إلى لغات البرمجة، وما هي، وما هي الأغراض المخصصة لها. كما تم ذكر لغات الترميز (HTML)، وتمثيل البيانات (XML)، ولغات الاستعلام (SQL) بإيجاز.


    فيديو | 23 دقيقة | لغات البرمجة

    يقدم هذا التقرير نظرة عامة مختصرة على لغة البرمجة C# وميزاتها وتصميماتها الرئيسية، ويوضح أمثلة لإنشاء تطبيقات بسيطة لوحدة التحكم والنوافذ لنظام التشغيل Windows في Visual Studio 2010.

    استكشف الإمكانات الغنية لنظام التشغيل Windows التي يمكنك ويجب عليك استخدامها عند تطوير تطبيقات الويب.

    4 ادوات التطوير


    فيديو | 10 دقائق | ويب ماتريكس

    قصة قصيرة عن WebMatrix – بيئة تطوير المواقع الإلكترونية. يتيح لك WebMatrix إنشاء مواقع ويب متفاوتة التعقيد: من الصفحة الرئيسية إلى بوابة الشركات الصغيرة. تتضمن البيئة مجموعة من قوالب مواقع الويب التي يمكن استخدامها كأساس لإنشاء موقع الويب الخاص بك. يتيح لك WebMatrix إنشاء وتحرير ترميز موقع الويب ورمزه، بالإضافة إلى إدارة قواعد البيانات ونشر مواقع الويب الجاهزة للاستضافة.


    فيديو | 11 دقيقة | متصفح الانترنت

    تقدم هذه المحادثة نظرة عامة مختصرة على تقنية المواقع المثبتة المقدمة في Internet Explorer 9. وتوضح كيفية العمل مع قوائم الانتقال السريع، وأيقونات التراكب، وأزرار شريط أدوات الصور المصغرة.

    ستساعدك الموارد أدناه على اكتساب مهارات إضافية في مجال اهتمامك.

    تعلم أساليب جديدة قوية لهندسة الويب وتصميم مواقع الويب القائمة على الخبرة. يقدم الكتاب منهجًا عمليًا لحل المشكلات يركز على المستخدم لتخطيط وتصميم وتطوير تطبيقات الويب الديناميكية. ستتعلم كيفية تحقيق أقصى استفادة من التصميم المعتمد على المجال، وتعلم كيفية تحديد البنية الداعمة المثالية، وإتقان أساليب التصميم الحديثة التي تركز على الخبرة. يدرس المؤلف اختيار وتنفيذ تقنيات محددة، بالإضافة إلى الموضوعات الرئيسية المتعلقة بتجربة المستخدم، بما في ذلك تصميم تطبيقات الويب للجوال والتصميم سريع الاستجابة. ستتعلم كيفية تحقيق أقصى استفادة من تقنيات Microsoft مثل ASP.NET MVC وSignaIR مع تقنيات أخرى مثل Bootstrap وAJAX وJSON وJQuery. باستخدام هذه التقنيات وإتقان النظام الأساسي الجديد ASP.NET Core 1.0، يمكنك...

    اقرأ بالكامل

    تعلم أساليب جديدة قوية لهندسة الويب وتصميم مواقع الويب القائمة على الخبرة. يقدم الكتاب منهجًا عمليًا لحل المشكلات يركز على المستخدم لتخطيط وتصميم وتطوير تطبيقات الويب الديناميكية. ستتعلم كيفية تحقيق أقصى استفادة من التصميم المعتمد على المجال، وتعلم كيفية تحديد البنية الداعمة المثالية، وإتقان أساليب التصميم الحديثة التي تركز على الخبرة. يدرس المؤلف اختيار وتنفيذ تقنيات محددة، بالإضافة إلى الموضوعات الرئيسية المتعلقة بتجربة المستخدم، بما في ذلك تصميم تطبيقات الويب للجوال والتصميم سريع الاستجابة. ستتعلم كيفية تحقيق أقصى استفادة من تقنيات Microsoft مثل ASP.NET MVC وSignaIR مع تقنيات أخرى مثل Bootstrap وAJAX وJSON وJQuery. ومن خلال الاستفادة من هذه التقنيات وإتقان إطار عمل ASP.NET Core 1.0 الجديد، يمكنك تطوير تطبيقات الويب المعقدة التي تحل مشكلات الحياة الواقعية وتقدم تجارب رائعة بسرعة.
    سيعلمك دينو إسبوزيتو، أحد أهم المتخصصين في Microsoft، كيفية:
    - تصميم مواقع الويب وتطبيقات الويب التي تعكس العمليات الاجتماعية والتجارية الحقيقية؛
    - استخدام أساليب التصميم الخاصة بالمجال لتحليل المجالات الموضوعية والحد من تعقيدها؛
    - استخدام التصميم القائم على الخبرة لتقليل التكاليف وتلبية متطلبات المستخدم؛
    - مقارنة نماذج الويب الخاصة بالخادم والعميل بشكل واقعي؛
    - أساسيات منصة ASP.NET Core 1.0 الجديدة؛
    - تبسيط تطوير صفحات الويب الحديثة باستخدام إطار عمل Bootstrap؛
    - تقنيات عملية وفعالة لتنفيذ مشاريع ASP.NET MVC؛
    - مراعاة الإمكانيات الجديدة لتنفيذ آليات التخزين والعمل مع نماذج البيانات؛
    - فهم مزايا وعيوب ومقايضات تصميم الويب سريع الاستجابة؛
    - إنشاء مواقع ويب للجوال ومُحسّنة للجوال.

    يخفي

    مقالات مماثلة
    أنواع
    • أجهزة التوجيه
    • الأقراص الصلبة
    • لا يتم تشغيله
    • الطابعات
    • الفرامل
    • يتجمد
    • الفيروسات
    • أجهزة لوحية
    المواد شعبية
    مقالات جديدة