تعرف علي تطبيقات الويب أحادية الصفحة (spa)

raheel · 01-04-2019, 05:51 PM

في الماضي، وقبل أن تتطور المتصفحات ومعها جافاسكريبت وتصبح على ما هي عليه اليوم، كانت محتويات كل صفحات الويب تأتي من الخادم على شكل 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 لأنها تبذل جهودا جبارة نيابة عنا لإيجاد حلول لتلك المشاكل التي تمس جانب الأداء والسرعة في التطبيق.
من سلبيات الإستخدام المكثف لجافاسكريبت كذلك، أن أداء التطبيق دائما يكون متراجعا في الأجهزة المحمولة ذات الإمكانيات المحدودة.
إذا تم تعطيل الجافاسكريب في المتصفح من طرف المستخدم، التطبيق لن يعمل (هذه حالة شاذة لا ينبغي القلق منها كثيرا).

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 05:51 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 تعرف علي تطبيقات الويب أحادية الصفحة (spa) تعرف علي تطبيقات الويب أحادية الصفحة (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 لأنها تبذل جهودا جبارة نيابة عنا لإيجاد حلول لتلك المشاكل التي تمس جانب الأداء والسرعة في التطبيق. من سلبيات الإستخدام المكثف لجافاسكريبت كذلك، أن أداء التطبيق دائما يكون متراجعا في الأجهزة المحمولة ذات الإمكانيات المحدودة. إذا تم تعطيل الجافاسكريب في المتصفح من طرف المستخدم، التطبيق لن يعمل (هذه حالة شاذة لا ينبغي القلق منها كثيرا). المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
تعرف علي مستقبل تصميم تطبيقات الجوال	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-04-2019 06:47 PM
تعرف علي مستقبل الويب بين المواقع Website و التطبيقات PWA	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 06:56 PM
ما هي مميزات تطبيقات الويب التقدمية (pwa)؟	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	01-04-2019 05:55 PM
الفرق بين اسم النطاق و استضافة الويب	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	27-03-2019 10:09 PM
كل ما تريد معرفته عن برمجة تطبيقات الويب	سالجان	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	28-02-2019 06:04 PM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)