نظام أحادي الصفحة

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

• ما هو  مفهوم تطبيقات  الويب أحادية الصفحة التي تختصر  ب SPA ؟
• ما هي المزايا المقدمة  بواسطتها ؟
• ما أهم التحديات التي سوف يواجهها المطور  ؟

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

تعتمد تقنية SPA على  إرسال جميع ملفات التطبيق مرة  واحدة فقط (HTML , CSS , javascript)  قد يكون حجمها كبير  المرة الأولى عند دخول الموقع لكن المتصفحات تعمل على تخزينها مؤقتا  واعادة استخدامه المرة القادمة .  بعد ذلك عوض عن طلب الصفحة من الخادم  يقوم التطبيق بطلب البيانات فقط (على هيئة JSON) حيث يستخدم تقنية  Asynchronous Javascript and Xml  (AJAX) لارسال الطبات  و استقبالها من دون الحاجة لإعادة  تحميل الصفحة .بعد ذلك يقوم المتصفح بتوليد ملفات HTML  و عرضها للمستخدم .
Figure 1 

 مزايا تقنية SPA :

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

 تحديات و مساوء تقنية SPA :

من أكبر التحديات التي يواجهها مستخدمي تقنية SPA هو ضعف التوافق مع محرك  البحث SEO لأن هذه التقنية ذات طبيعة ديناميكية  تعتمد على  تحميل صفحة واحدة  ثم يتم عرض  البيانات عليها دون اعادة تحميل الصفحة  وعدم وجود عنوان  URL منفصلة محسنة لمحركات البحث لذلك لا ترى محركات البحث المحتوى  لكن لايزال الكثير من المطوري محاول إيجاد حل لهذا التحدي  مما أدى لتحسين برامج محركات البحث و  ظهور  مصطلح Server side-rendering سوف نتكلم عنه في المقالات  القادمة 
تعتمد تقنية  SPA على  جافا سكريبت بشكل كبير مما يؤدي لضعف في الأداء في الأجهزة ذات القدرات  المنخفضة , وقد تظهر بعض المشاكل المتعلقة باستهلاك الذاكرة العشوائية عند البقاء لمدة طويلة وكذلك لن يعمل التطبيق إذا تم تعطيل الجافا سكريبت في المتصفح .

 
الملخص :

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