ما هو تطبيق الصفحة الواحدة؟

تسمى تطبيقات الويب الحديثة أيضًا تطبيقات الصفحة الواحدة. ماذا يعني هذا؟

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

فقط المنتجات المبتكرة للغاية كانت تعمل بشكل مختلف ، وجربت أساليب جديدة.

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

تطبيقات الصفحة الواحدة مبنية في JavaScript (أو على الأقل مجمعة إلى JavaScript) وتعمل في المتصفح.

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

أمثلة على تطبيقات الصفحة الواحدة

بعض الأمثلة البارزة:

  • بريد جوجل
  • خرائط جوجل
  • موقع التواصل الاجتماعي الفيسبوك
  • تويتر
  • جوجل درايف

إيجابيات وسلبيات واس

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

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

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

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

من الأفضل استخدام SPA عندما لا تكون هناك حاجة لـ SEO (تحسين محرك البحث). على سبيل المثال للتطبيقات التي تعمل خلف تسجيل دخول.

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

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

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

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

تجاوز التنقل

نظرًا لأنك تخلصت من التنقل الافتراضي في المتصفح ، يجب إدارة عناوين URL يدويًا.

يسمى هذا الجزء من التطبيق جهاز التوجيه. بعض الأطر تعتني بهم بالفعل (مثل Ember) ، والبعض الآخر يتطلب مكتبات ستقوم بهذه المهمة (مثلرد فعل راوتر).

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

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


المزيد من دروس js: