تطبيقات الصفحة الواحدة مقابل التطبيقات متعددة الصفحات: معركة تطبيقات الويب

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

معركة تطبيق الصفحة الواحدة (SPA) مقابل التطبيق متعدد الصفحات (MPA) أكثر تعقيدًا مما يبدو. دعنا نلقي نظرة فاحصة على جميع إيجابيات وسلبيات كل نوع من تطبيقات الويب .

محتويات:

1. ما هو SPA؟
2. كيف يتم بناء المنتجع الصحي؟
3. مزايا سبا
4. مساوئ SPA
5. ما هي MPA؟
6. مزايا MPA
7. عيوب تطبيقات الويب متعددة الصفحات
8. SPA vs MPA - أيهما تختار؟
9. تطبيقات الويب التقدمية
10. ما هي تكلفة تطوير SPA و MPA؟

ما هو SPA؟

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

في تطبيق ويب أحادي الصفحة ، يتم تحميل كل HTML و CSS مرة واحدة ، عند فتح الصفحة. بعد ذلك ، أثناء تنقلك في الموقع ، يتم تحميل البيانات الجديدة فقط ؛ الصفحة نفسها لا يتم إعادة تحميلها. هذا يجعل تجربة المستخدم أكثر سلاسة - لا يوجد وقت انتظار طويل أو بدون انتظار ، لشيء واحد ، ويبدو أن الصفحات يتم تحميلها على الفور. في عالم يمكن أن يؤدي فيه تأخير 100 مللي ثانية إلى خسارة مبيعات تزيد عن 1.6 مليون دولار ، فهذه مشكلة لا يمكن لأصحاب الأعمال تجاهلها.

كيف يتم بناء المنتجع الصحي؟

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

يعرف معظم مطوري الواجهة الأمامية أكثر من إطار واحد. يعرف الكثيرون React و Angular و Vue ثم البعض.

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

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

1. سريع تحميل الصفحة

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

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

2. افصل بين الواجهة الأمامية والنهاية الخلفية

تتمثل إحدى المزايا الأخرى لـ SPAs في أنه على عكس المناطق المحمية البحرية ، حيث يتم ربط الواجهة الأمامية والخلفية بإحكام ، في SPA ، يمكنك إعادة كتابة الواجهة الأمامية بمفردها ، مع الحد الأدنى من التأثير على النهاية الخلفية. هذا يجعل تحديث SPA أسهل وأسرع وأرخص . لكن الميزة الأكبر للواجهة الأمامية والخلفية المنفصلة هي أنه يمكنك استخدام نهاية خلفية SPA لتطبيق الهاتف المحمول إذا / عندما قررت إنشاء واحد. باستخدام MPA ، ستحتاج إلى إعادة بناء الواجهة الخلفية لتطبيق جوال - ليس من البداية ، ولكن بشكل ملحوظ.

3. التطوير والصيانة

يستغرق بناء منتجع صحي وقتًا أقل من بناء منطقة محمية بحرية. ليس بالضرورة أسهل - المكدس الفني لـ SPA أكبر قليلاً من MPA - لكنه يستغرق وقتًا أقل ، حيث لا توجد حاجة لكتابة التعليمات البرمجية وإنشاء تصميمات UI / UX منفصلة لكل صفحة.

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

الآن ننتقل إلى السلبيات.

عيوب تطبيقات الويب أحادية الصفحة (وكيفية التغلب عليها)

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

1. جافا سكريبت معطل

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

2. تحسين محرك البحث

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

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

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

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

3. قابلية التوسع

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

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

4. المخاوف الأمنية

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

5. الملاحة

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

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

ما هي MPA؟

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

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

مزايا التطبيقات متعددة الصفحات

1. الملاحة

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

2. قابلية التوسع

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

3. تحسين محركات البحث

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

4. كومة التقنية

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

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

1. مشكلة سرعة التحميل ليست بالأبيض والأسود

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

يعتمد الوقت اللازم لتحميل صفحة جديدة على عدة عوامل:

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

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

2. التنمية

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

3. القدرة على التكيف

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

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

SPA vs MPA - أيهما تختار؟

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

كما ترى ، يأتي كلا النوعين من تطبيقات الويب بنقاط القوة والضعف. وبينما تتقدم تقنية التطبيقات أحادية الصفحة بسرعة وقد تتغلب SPAs قريبًا على مواقع الويب التقليدية ، اليوم ، ما زلت بحاجة إلى موازنة الإيجابيات والسلبيات قبل تحديد نوع موقع الويب الذي ستبنيه لعملك: SPA أو MPA.

القليل من الإضافات: تطبيقات الويب التقدمية

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

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

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

ما هي تكلفة تطوير SPA و MPA؟

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

فيما يلي بعض المعلمات التي يمكن إضافتها إلى المعادلة:

• نوع عملك
• حجم الموقع
• متطلبات قابلية التوسع
• أهمية تحسين محركات البحث لموقعك

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

• مدير المشروع
• مصمم الويب UI / UX
• مطور الواجهة الأمامية متخصص في JavaScript وأطرها
• مطور الواجهة الخلفية
• مهندس تأكيد جودة

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

يمكن إنشاء تطبيق بسيط من صفحة واحدة - صفحة مقصودة ، على سبيل المثال - في غضون أسبوعين إلى أربعة أسابيع بتكلفة أقل من 4200 دولار . يمكن أن تستغرق منصة SaaS الأكثر تعقيدًا ثلاثة أو أربعة أشهر للبحث والبناء والإطلاق. تبلغ تكلفة تطوير مثل هذا المنتجع الصحي حوالي 29000 دولار وما فوق . يمكن أن تؤثر تجربة المطورين أيضًا على الوقت اللازم لإنشاء تطبيق ويب من صفحة واحدة ، نظرًا لأن المكدس التقني لـ SPA أكبر من MPA.

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

الخلاصة: SPA vs MPA

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

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

كتبه Artem Chervichnik و Svitlana Varaksina.