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

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

هذه العملية تتكرر في كل مرة ننقر فيها على رابط معين.

اليوم ومع تطور لغة البرمجة جافاسكريبت وتحسن أداء المتصفحات، باتت معظم تطبيقات الويب المعروفة عبارة عن تطبيقات أحادية الصفحة (Single Page Applications)، أو على الأقل جزء كبير منها.

كيف ذلك ؟

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

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

التقنية التي تستخدم لطلب وإرسال البيانات من وإلى الخادم ـ بدون إعادة تحميل الصفحة ـ تسمى Asynchronous Javascript and Xml ويشار إليها باختصارا بكلمة Ajax.

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

لمزيد من المعلومات حول هذا الموضوع، يمكنكم قراءة هذا المقال المفصل :

• من jQuery إلى React.js.. كيف ظهرت وتطورت أطر عمل جافاسكريبت ؟

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

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

• فيسبوك (ليس كليا)
• Gmail (أفضل مثال عن تطبيقات SPA)
• Google Maps
• ساوند كلاود
• تويتر

إيجابيات تطبيقات SPA

• تطبيقات الويب أحادية الصفحة تكون في العادة أسرع من تطبيقات الويب التقليدية، وتمنح المستخدمين تجربة استخدام أفضل إذا ما بناؤها بشكل جيد.
• الضغط يقل على الخادم (Server) كونه يكون مكلفا فقط بجلب البيانات للعميل أو أخذها منه عن طريق ما يعرف بالواجهات البرمجية أو APIs، ولا يهتم بالكيفية التي سيتم بها تقديم تلك البيانات للمستخدم.
• من محاسن هذه الواجهات البرمجية كذلك أنه يمكن الإستعانة بها لدعم وخدمة عدة أنواع من التطبيقات والعملاء في نفس الوقت. أي أن خادم واحد مثلا يمكن أن يدعم تطبيق الويب الخاص بنا وكذلك تطبيق للموبايل أو سطح المكتب إن كان لنا حاجة بهما.
• تحويل تطبيقات الويب أحادية الصفحة إلى تطبيقات ويب تقدمية (Progressive Web Applications) أكثر سهولة مقارنة بالتطبيقات التقليدية متعددة الصفحات.
• تطبيقات الويب أحادية الصفحة ملائمة جدا للعمل عليها كفريق، حيث مطور الواجهة الخلفية (Backend Web Developer) يركز على تطوير الواجهة البرمجية (Frontend Web Developer)، بينما مطور الواجهة الأمامية يركز جهوده على استغلال تلك الواجهة البرمجية لبناء User Interface ذو تجربة استخدام ممتازة.

السلبيات أو التحديات التي تفرضها تطبيقات SPA

• لعل أهم تحدي نواجهه مع تطبيقات Single Page Applications هو توافقها مع محركات البحث، فبالرغم من أن محرك البحث غوغل أعلن فيما سبق أن يستطيع قراءة وأرشفة تلك الصفحات، إلا أنه لا يزال هناك الكثير من العمل للقيام به. هذا دون أن ننسى قابلية مشاركة (Sharing) تلك الصفحات على منصات التواصل الإجتماعي. استجابة لهذا التحدي، ظهر في السنوات الأخيرة مصطلح Server side-renering الذي يطلق على عملية تقديم تلك الصفحات على شكل HTML من طرف الخادم في الدخول الأول إلى التطبيق.
• جزء كبير من تطبيقات الويب ذات الصفحة الواحدة عبارة عن جافاسكريبت، وفي الغالب يتم تحميل ملف جافاسكريبت واحد ضخم، وعند البقاء طويلا في الصفحة ومع التفاعل المكثف للمستخدم معها قد تظهر بعض المشاكل المتعلقة بالإستهلاك المفرط للذاكرة العشوائية (RAM). لهذا ينصح دائما بالإستعانة بأطر عمل جافاسكريبت الجاهزة مثل React.js أو Vue.js لأنها تبذل جهودا جبارة نيابة عنا لإيجاد حلول لتلك المشاكل التي تمس جانب الأداء والسرعة في التطبيق.
• من سلبيات الإستخدام المكثف لجافاسكريبت كذلك، أن أداء التطبيق دائما يكون متراجعا في الأجهزة المحمولة ذات الإمكانيات المحدودة.
• إذا تم تعطيل الجافاسكريب في المتصفح من طرف المستخدم، التطبيق لن يعمل :) (هذه حالة شاذة لا ينبغي القلق منها كثيرا).

النهاية

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