في React، تشير التطبيقات المتماثلة إلى التطبيقات التي تشترك في التعليمات البرمجية الكاملة أو الجزئية بين العميل والخادم، ويمكن أن تسمى أيضًا تطبيقات JavaScript العالمية؛ ولا تتطلب التطبيقات المتماثلة عرض المحتوى من جانب المتصفح، ولكنها تحقق التوازن بين جانب الخادم و العرض من جانب المتصفح، وإنشاء محتوى العرض على الخادم، والسماح للمستخدمين برؤية الصفحات التي تحتوي على معلومات في أقرب وقت ممكن.
بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.
تشير التطبيقات المتماثلة، والمعروفة أيضًا بتطبيقات JavaScript العالمية، إلى التطبيقات التي تشارك التعليمات البرمجية بشكل كامل (أو جزئي) بين العميل والخادم. من خلال تشغيل كود JavaScript الخاص بالتطبيق على جانب الخادم، يمكن ملء الصفحة مسبقًا بالمحتوى قبل إرسالها إلى المتصفح، حتى يتمكن المستخدمون من رؤية المحتوى قبل تشغيل JavaScript الخاص بالمتصفح. عند تشغيل JavaScript المحلي، فإنه سيتولى عمليات التفاعل والتنقل اللاحقة، مما يسمح للمستخدمين بالحصول على تجربة تفاعلية سلسة في تطبيقات الصفحة الواحدة من خلال التحميل الأولي السريع وعرض الصفحة من جانب الخادم.
ما هو التماثل
مع الظهور المفاجئ لـ Node.js، أصبح تطوير الواجهة الأمامية والخلفية أساسًا للغة برمجة موحدة. تتمتع جميعها بفرص لتحقيق توحيد الواجهة الأمامية والخلفية -نهاية. كانت React أول من قاد هذا الاتجاه، وانتشر مفهوم التماثل على نطاق أوسع.
ما يحتاج القراء إلى فهمه هو أن التطبيقات المتماثلة لا تتطلب عرض المحتوى من جانب المتصفح، ولكنها تحقق التوازن بين العرض من جانب الخادم والعرض من جانب المتصفح. فكيف نفهم هذا التوازن؟
قم بإنشاء محتوى عرض على الخادم حتى يتمكن المستخدمون من رؤية الصفحات الإعلامية في أقرب وقت ممكن. بالإضافة إلى المحتوى الثابت الخالص، يتضمن التطبيق الكامل أيضًا استجابات الأحداث المختلفة وتفاعلات المستخدم وما إلى ذلك. وهذا يعني أنه يجب تنفيذ برامج JavaScript النصية على جانب المتصفح لإكمال العمل مثل ربط الأحداث ومعالجة التفاعلات غير المتزامنة.
من منظور الأداء وتجربة المستخدم، يجب أن يعبر العرض من جانب الخادم عن أهم المعلومات الأساسية والأساسية للصفحة، بينما يحتاج جانب المتصفح إلى إكمال عرض الصفحة الإضافي وربط الأحداث والوظائف المحسنة الأخرى للتفاعل. ويعني ما يسمى بالتماثل أن الواجهة الأمامية والخلفية تشتركان في مجموعة من التعليمات البرمجية أو المنطق. في هذه المجموعة من التعليمات البرمجية أو المنطق، يكون الوضع المثالي هو الحكم على بنية DOM الحالية والبنية التي سيتم تقديمها أثناء عملية العرض الإضافية. هل هو نفسه من جانب المتصفح؟ إذا كان الأمر كذلك، فلن تتم إعادة عرض بنية DOM، بل يلزم ربط الحدث فقط.
من هذا البعد، يختلف التماثل عن العرض من جانب الخادم، وهو يشبه إلى حد كبير تقاطع العرض من جانب الخادم والعرض من جانب المتصفح، وهو يعوض عن الاختلافات بين جانب الخادم وجانب المتصفح يمكن توحيد مجموعة التعليمات البرمجية أو المنطق. جوهر التماثل هو "نفس مجموعة الرموز"، وهو بعد آخر منفصل عن الزوايا عند كلا الطرفين.
مزايا وعيوب التماثل
مزايا التماثل هي كما يلي:
أداء أفضل. يشير الأداء هنا بشكل أساسي إلى عرض أسرع، ووقت عرض أسرع على الشاشة الأولى، وعدد أقل من الملفات، وحجم ملف أصغر.
دعم تحسين محركات البحث. بعد تلقي الطلب، سيعيد الخادم مستند HTML كاملًا نسبيًا يحتوي على المحتوى الأولي، وهو أكثر ملاءمة لبرامج زحف محركات البحث للحصول على المعلومات وتحسين تصنيفات عرض نتائج البحث. وفي الوقت نفسه، ستساعد أوقات تحميل الصفحات الأسرع أيضًا في تحسين تصنيفات عرض نتائج البحث.
التنفيذ أكثر مرونة. يؤدي العرض من جانب الخادم إلى إخراج المحتوى الأولي للصفحة فقط، ولا يزال المتصفح بحاجة إلى القيام بأعمال المتابعة لإكمال العرض التقديمي النهائي للصفحة. بهذه الطريقة، لا يزال من الممكن تحقيق التوازن بين العرض من جانب الخادم والعرض من جانب المتصفح، ويمكن تحقيق إعادة استخدام التعليمات البرمجية إلى حد كبير.
أكثر قابلية للصيانة. لأنه بمساعدة مكتبات مثل React، يمكننا تحقيق نطاق واسع من إعادة استخدام التعليمات البرمجية، وتجنب حاجة الخادم والمتصفح إلى الاحتفاظ بمجموعتين من التعليمات البرمجية أو المنطق في نفس الوقت. ونتيجة لذلك، يكون حجم الكود الإجمالي أصغر وتكون تكاليف الصيانة أقل.
أكثر ملاءمة للنماذج المنخفضة. نظرًا لأن العرض الأولي للمحتوى قد اكتمل على جانب الخادم، فهو أكثر ملاءمة للنماذج المنخفضة ولن يتسبب في ظهور شاشة بيضاء عند تحميل الصفحة.
أكثر ملاءمة لبيئات الشبكة القاسية. في طريقة الفصل الأمامية والخلفية التقليدية، لن يتم عرض محتوى الصفحة إلا بعد تنزيل جميع نصوص JavaScript وتنفيذها، وقد تمت تجربة عدد كبير من طلبات الشبكة في بيئة الشبكة القاسية مما لا شك فيه يزيد من صعوبة عرض المحتوى الأساسي للصفحة. وفي هذا الصدد، من الواضح أن التطبيقات المتماثلة لها مزايا.
تجربة مستخدم أفضل. من أجل تحقيق توازن أكثر منطقية بين محتوى العرض من جانب الخادم والمتصفح، يمكننا تصميم الأجزاء الأساسية المهمة من الصفحة ليتم إكمالها على جانب الخادم، بينما يمكن عرض الأجزاء التفاعلية الأقل أهمية بواسطة المتصفح أو بعد ذلك. يتم تقديم محتوى أكثر أهمية وسيؤدي التنفيذ إلى تحسين تجربة المستخدم بشكل كبير.
عيوب التماثل هي كما يلي:
يزداد منطق المعالجة من جانب الخادم، مما يزيد من التعقيد.
لا يمكن للخادم إعادة استخدام التعليمات البرمجية من جانب المتصفح بشكل كامل.
تمت إضافة وقت TTFB (وقت البايت الأول) على جانب الخادم. يشير وقت TTFB إلى الوقت الذي يبدأ فيه المتصفح طلب الشبكة الأولي حتى استلام البايت الأول من الخادم. يحتوي على وقت اتصال TCP ووقت إرسال طلب HTTP ووقت الحصول على البايت الأول من رسالة الاستجابة. لأن الحصول على البيانات وعرض المحتوى الأولي للصفحة سيؤدي حتماً إلى تقليل سرعة عودة الخادم.
قم بتوسيع معرفتك:
تصميم البنية الأمامية والخلفية ومفاهيم العرض من جانب الخادم
أصبح مفهوم العرض أو الإدخال من جانب الخادم أكثر شيوعًا. قبل فهم كيفية تنفيذ العرض من جانب الخادم استنادًا إلى React، من الضروري أن يكون لدينا فهم شامل لـ "الماضي والحاضر" للعرض من جانب الخادم على المستوى المعماري: لماذا يظهر هذا المفهوم وما هي المشاكل التي يمكن أن تنشأ تم حلها بعد تنفيذ هذا المفهوم من جانب الخادم وما هي إيجابيات وسلبيات الطرق الأخرى؟
تطور تكنولوجيا التعاون الأمامية والخلفية
في الأيام الأولى لتطوير الويب، كان التصميم المعماري بسيطًا ومباشرًا، على وجه التحديد، تم إنشاء الصفحة على جانب الخادم بواسطة JSP وPHP ومهندسين آخرين، وكان المتصفح مسؤولاً فقط عن عرضها. في ذلك الوقت، كان مهندس الواجهة الأمامية يحتاج فقط إلى إضافة بعض التأثيرات التفاعلية الديناميكية إلى الصفحة الثابتة، ونادرًا ما يستخدم منطق البيانات، وما إلى ذلك، بينما كان مهندس الواجهة الخلفية مسؤولاً عن محتوى الصفحة، أي عندما يكون المستخدم طلبت الصفحة، قامت الواجهة الخلفية بمعالجتها وإرجاع الصفحة الثابتة الكاملة. تعتمد هذه العمليات عمومًا على محركات القوالب لإكمالها. لذلك في ذلك الوقت، لم يكن هناك حتى منصب مهندس أمامي منفصل. وحتى لو كان هناك أي عيوب، فإن عيوب هذا النهج واضحة، مثل التقسيم غير الواضح للمسؤوليات بين الأطراف الأمامية والخلفية.
إذا قام موظفو الواجهة الأمامية بتطوير القوالب، فستعتمد الواجهة الأمامية بشكل كبير على البيئة الخلفية، مما يجعل من الصعب تحقيق أقصى قدر من كفاءة التطوير. وفي الوقت نفسه، ستكون تكلفة الاتصال بتنسيقات البيانات مرتفعة نسبيًا. بالإضافة إلى ذلك، فإن هذا النموذج المعماري لديه مساحة محدودة للغاية لتطوير تكنولوجيا الواجهة الأمامية واستخدام قدرات المتصفح.
مع التطور السريع لتكنولوجيا الواجهة الأمامية، وخاصة ظهور تقنيات مثل AJAX وNode.js، ظهر نموذج معماري يفصل بين الواجهة الأمامية والخلفية. في هذا الوضع، يصبح تقسيم العمل بين الطرفين الأمامي والخلفي واضحًا جدًا، ونقطة التعاون الرئيسية في كلا الطرفين هي واجهة AJAX. لنأخذ صفحة وصول المستخدم كمثال لفهم هذا النموذج خطوة بخطوة، كما هو موضح في الشكل أدناه.
