في السنوات القليلة الماضية أخذ مجال تطوير الويب وتطوير المواقع تطورا سريعا وكبيرا للغاية ويمكن أن نعبر عن ذلك بأن المجال قد انقلب رأسا على عقب ولم يعد فقط مصمم الواجهات الأمامية يقتصر عمله على اتش تي ام ال و سي اس اس فقط ولا على الجيكويري فقط ولكن أصبح الأمر يتطلب أكثر من ذلك وبات من الضروري تعلم عدد من التقنيات الحديثة لمواكبة هذه التطورات وسوق العمل، وأحد أهم الأمور التي ظهرت في هذه التطورات هو تطبيقات الويب الصفحة الواحدة أو ما يعرف بالـ single page apps ولهذا فقد عمدنا في هذا المقال إلى توضيح ما مفهومها ولماذا تستخدم وما علاقتها بلغة جافا سكريبت

كيف تعمل أطر عمل جافا سكريبت لانشاء تطبيقات ويب الصفحة الواحدة

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

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


ولكي تفهم عزيزي المبرمج ما المقصود بتطبيقات الويب ذات الصفحة الواحدة يمكنك مشاهدة الصورة التالية:

إرسال html من السيرفر إلى المتصفح ما قبل تطبيقات الويب الصفحة الواحدة
إرسال html من السيرفر إلى المتصفح ما قبل تطبيقات الويب الصفحة الواحدة

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

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

ستجد في هذه الصورة أن المتصفح في أول مرة يفتح فيها العميل الموقع يرسل طلب للسيرفر ثم السيرفر يرد بمحتوى html ثم تبدأ بعد ذلك الجافا سكريبت على الكلاينت سايد بالتحكم في الصفحة وإرسال طلبات بالأجاكس للسيرفر والسيرفر يرد على الطلب ببيانات جيسون.

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

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

1- نظام التحويلات أو routing system
وهذا النظام يستخدم لتغيير الرابط الذي يظهر في أعلى المتصفح لما يتوافق مع المحتوى المعروض في الصفحة وهذا النظاهم هو الذي يمكنك من عرض محتوى معين بناء على تنقلات المستخدم وتفاعله داخل الصفحة.

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

2- العناصر القابلة لإعادة الاستخدام أو reusable components
أغلب أطر عمل جافا سكريبت التي تقوم بانشاء تطبيقات ويب ذات الصفحة الواحدة تستخدم نظام العناصر في انشاء واجهة المستخدم حيث أن كل جزء في الصفحة يمثل قطعة أو كومبوننت “Component” وهذا الكومبوننت يمكن أن يحتوى على كومبوننت أصغر منه فمثلا السايدبار يمثل كومبوننت ويحتوى على عناصر أصغر أو أجزاء أصغر منه وهكذا، وكل عنصر أو كومبوننت من هذه العناصر يمكنك أن تستدعيه وتستخدمه عدة مرات داخل الصفحة.

3- History api
منذ عدة أعوام كانت المواقع تستخدم الهاشتاج الذي يمكن وضعه في الرابط الموجود في المتصفح لتغيير بعض المحتوى داخل الصفحة ولكن لم يمثل هذا الطريقة المثلى لبناء نظام routing قوي ثم بعد ذلك ومع تحديث المتفحات مثل كروم وفاير فوكس أصبح الأن يوجد نظام يسمى history api تتعامل معه بلغة جافا سكريبت للتحكم في الرابط الخاص بالصفحة وذلك عن طريق خاصتي “pushState” و “popState” وأصبح نظام ال routing في كل أطر العمل يستخدمهم لعمل نظام التنقل بين الصفحات بسهولة خاصة وأن هذا الأمر جعل تطبيقات الويب الصفحة الواحدة أكثر موافقة للسيو.

3- التحكم في ال DOM أو ما يسمى بال dom manipulation
سبق وأن وضحنا أن كل جزء في الموقع يسمى عنصر أو كومبوننت وهذا الكومبوننت في النهاية يتم تحويله لعناصر html تتمكن من التحكم فيها بواسطة جافا سكريبت

4- نموذج كائن المستند الوهمي أو ما يسمى بـ VIRTUAL DOM
وهذا النظام يستخدمه إطار عمل ريأكت حيث لا يقوم بالتعامل مع ال dom مباشرة ولكن يعمل على انشاء virtual dom أو عناصر اتش تي ام ال وهمية ومن ثم يتم ترجمتها إلى اتش تي ام الذي يفهمه المتصفح.