تعرف الى تقنية تطبيقات الويب web app
تقنية تطبيقات الويب web app رائعة و قادمة وبقوة ومدعومة من عدة شركات وعلى رأسها قوقل لدرجة انك تقدر ترفع تطبيق ويب لمتجر قوقل بلي مباشرة في اندرويد، وفي فايربيس تاخذ دومين مجانا.
ولكن لاحظت خلط كبير في فهم الفرق بين تطبيق الويب وموقع الويب. فما هو الفرق؟?
أهم فارق هو لدى مستخدم التطبيق من ناحية تجربة المستخدم UX خصوصا في جهاز الجوال. دائما تلاحظ تطبيق الويب سريع في التفاعل مع المستخدم ونعومة وسلاسة كبيرة في الواجهة ويعمل حتى لو توقف اتصال الانترنت (مؤقتا) ومشابه إلى حد كبير لتجربة تطبيق الجوال بل ويمكن تثبيته في الأندرويد كتطبيق.
تطبيق الويب (تماما مثل تطبيق الجوال أو اذا أردنا الدقة فبنسبة ٩٩٪) يتم تحميله مرة واحدة من السيرفر ويعمل بشكل كامل داخل المتصفح ويخزن كمية كبيرة من البيانات داخل المتصفح مما يمكن المستخدم من استخدام التطبيق و "التصفح" إلى حد ما حتى لو لم يكن هناك اتصال بالانترنت.
تطبيق الويب كما في الصورة يتواصل مع السيرفر عادة عبر REST API لتحميل بيانات فقط وليس صفحات HTML. هناك برنامج متكامل مكتوب بالجافاسكربت داخل تطبيق الويب هو الذي يتولى عملية توليد واجهة المستخدم أو "صفحات ال HTML" داخل المتصفح بشكل ديناميكي حسب تفاعل المستخدم والبيانات من السيرفر.
بالمقابل وكما في الصورة فإن موقع الانترنت أو website يتم توليده بشكل كامل داخل السيرفر من خلال template language مصاحبة للغة البرمجة المستخدمة سواء كانت PHP أو Java أو Python أو Ruby on Rails أو غيرها. يتم تخزين بيانات بسيطة جدا داخل المتصفح تكون داخل الكوكيز cookies عادة.
من وجهة نظر المبرمج فإن تقنية تطبيقات الويب فيها تغير كبير جدا وبناء تطبيق ويب مختلف تماما من الناحية التقنية عن بناء موقع ويب (وفي نظري أصعب). مبرمج الفرونت اند في تطبيق الويب يقوم ببرمجة برنامج متكامل بينما في الموقع غالبا عمله هو تصميم HTML + CSS مع قليل من البرمجة بجافاسكربت.
بالمقابل فإن مبرمج الباكاند في تطبيق الويب يكون مهمته هي بناء خدمات و واجهات برمجية لها Services and APIs وادارة تخزين وتحديث البيانات في قاعدة البيانات، دون كتابة أي كود لتوليد صفحات ال HTML.
محاولة لتبسيط الموضوع وتوضيحه قمت بجعله أبيض وأسود بمعنى إما برمجة بالكامل على المتصفح مع REST API أو برمجة بالكامل في السيرفر مع عدم وجود كود جافا سكربت نهائيا على المتصفح. في الحقيقة مواقع الويب تحوي كود جافاسكربت ولكن عادة يكون محدود ولأغراض تجميلية.
الاسم الرسمي لتطبيق الويب هو progressive web app أو PWA ولكن اسم web app أصبح منتشر الآن. هناك العديد من المفاهيم المصاحبة لتطبيق الويب مثل service worker و manifest وغيرها، إضافة إلى ضرورة استخدام أحد مكتبات جافاسكربت مثل React أو Angular.
أهم عيوب تطبيق الويب هو بطء التحميل في أول مرة حيث يجب تحميل الجافاسكربت بالكامل قبل أن يبدأ عمل التطبيق تماما مثل تطبيق الجوال. عادة المستخدم مستعد لانتظار تحميل تطبيق الجوال بينما هو غير مستعد لانتظار تحميل تطبيق الويب لأنه معتاد على سرعة فتح مواقع الويب.
أيضا هذا العيب اضافة لطريقة التنقل بين "الصفحات" اذا صح التعبير داخل تطبيق الويب قد يسبب مشكلة لدى محركات البحث على الرغم من أن قوقل مثلا طورت محرك البحث ليتمكن من التنقل داخل التطبيق وفهرسته ولكن يظل ليس بكفاءة الموقع.
تم تطوير حل لذلك من خلال ما يسمى بال server side rendering بحيث يتم تجهيز جزء من التطبيق كصفحات ويب بحيث يقوم المستخدم بتنزيل الصفحة المطلوبة واستعراضها بشكل سريع عند الذهاب لعنوان معين داخل التطبيق وأثناء ذلك يتم تنزيل بقية كود التطبيق (الجافاسكربت).
يتم فصل كامل بين الباكاند والفرونت اند (أو التطبيق). مثال على ذلك هو headless CMS.
السبب في ذلك ليس فقط تطبيقات الويب ولكن انتشار تطبيقات الجوال ومحاولة توحيد الباكاند قدر الامكان بحيث يكون هناك باكاند واحد لكل من تطبيق الايفون وتطبيق الاندرويد وتطبيق الويب.
أخيرا إذا كنت تنوي استخدام ReactJS أو Angular لبناء موقعك فاعلم انك في الحقيقة ستقوم ببناء تطبيق ويب وليس موقع ويب ولازم تكون مستعد للشي هذا بشكل جيد فالفرق جوهري. كذلك أنصحك في البداية بفايربيس لأنها راح تسهل عليك كثير بناء الباكاند كما هو الحال لمطوري تطبيقات الايفون والاندرويد
نقلا عن معاذ الخلف M.Alkhalaf
تقنية تطبيقات الويب web app رائعة و قادمة وبقوة ومدعومة من عدة شركات وعلى رأسها قوقل لدرجة انك تقدر ترفع تطبيق ويب لمتجر قوقل بلي مباشرة في اندرويد، وفي فايربيس تاخذ دومين مجانا.
ولكن لاحظت خلط كبير في فهم الفرق بين تطبيق الويب وموقع الويب. فما هو الفرق؟?
أهم فارق هو لدى مستخدم التطبيق من ناحية تجربة المستخدم UX خصوصا في جهاز الجوال. دائما تلاحظ تطبيق الويب سريع في التفاعل مع المستخدم ونعومة وسلاسة كبيرة في الواجهة ويعمل حتى لو توقف اتصال الانترنت (مؤقتا) ومشابه إلى حد كبير لتجربة تطبيق الجوال بل ويمكن تثبيته في الأندرويد كتطبيق.
تطبيق الويب (تماما مثل تطبيق الجوال أو اذا أردنا الدقة فبنسبة ٩٩٪) يتم تحميله مرة واحدة من السيرفر ويعمل بشكل كامل داخل المتصفح ويخزن كمية كبيرة من البيانات داخل المتصفح مما يمكن المستخدم من استخدام التطبيق و "التصفح" إلى حد ما حتى لو لم يكن هناك اتصال بالانترنت.
تطبيق الويب كما في الصورة يتواصل مع السيرفر عادة عبر REST API لتحميل بيانات فقط وليس صفحات HTML. هناك برنامج متكامل مكتوب بالجافاسكربت داخل تطبيق الويب هو الذي يتولى عملية توليد واجهة المستخدم أو "صفحات ال HTML" داخل المتصفح بشكل ديناميكي حسب تفاعل المستخدم والبيانات من السيرفر.
بالمقابل وكما في الصورة فإن موقع الانترنت أو website يتم توليده بشكل كامل داخل السيرفر من خلال template language مصاحبة للغة البرمجة المستخدمة سواء كانت PHP أو Java أو Python أو Ruby on Rails أو غيرها. يتم تخزين بيانات بسيطة جدا داخل المتصفح تكون داخل الكوكيز cookies عادة.
من وجهة نظر المبرمج فإن تقنية تطبيقات الويب فيها تغير كبير جدا وبناء تطبيق ويب مختلف تماما من الناحية التقنية عن بناء موقع ويب (وفي نظري أصعب). مبرمج الفرونت اند في تطبيق الويب يقوم ببرمجة برنامج متكامل بينما في الموقع غالبا عمله هو تصميم HTML + CSS مع قليل من البرمجة بجافاسكربت.
بالمقابل فإن مبرمج الباكاند في تطبيق الويب يكون مهمته هي بناء خدمات و واجهات برمجية لها Services and APIs وادارة تخزين وتحديث البيانات في قاعدة البيانات، دون كتابة أي كود لتوليد صفحات ال HTML.
محاولة لتبسيط الموضوع وتوضيحه قمت بجعله أبيض وأسود بمعنى إما برمجة بالكامل على المتصفح مع REST API أو برمجة بالكامل في السيرفر مع عدم وجود كود جافا سكربت نهائيا على المتصفح. في الحقيقة مواقع الويب تحوي كود جافاسكربت ولكن عادة يكون محدود ولأغراض تجميلية.
الاسم الرسمي لتطبيق الويب هو progressive web app أو PWA ولكن اسم web app أصبح منتشر الآن. هناك العديد من المفاهيم المصاحبة لتطبيق الويب مثل service worker و manifest وغيرها، إضافة إلى ضرورة استخدام أحد مكتبات جافاسكربت مثل React أو Angular.
أهم عيوب تطبيق الويب هو بطء التحميل في أول مرة حيث يجب تحميل الجافاسكربت بالكامل قبل أن يبدأ عمل التطبيق تماما مثل تطبيق الجوال. عادة المستخدم مستعد لانتظار تحميل تطبيق الجوال بينما هو غير مستعد لانتظار تحميل تطبيق الويب لأنه معتاد على سرعة فتح مواقع الويب.
أيضا هذا العيب اضافة لطريقة التنقل بين "الصفحات" اذا صح التعبير داخل تطبيق الويب قد يسبب مشكلة لدى محركات البحث على الرغم من أن قوقل مثلا طورت محرك البحث ليتمكن من التنقل داخل التطبيق وفهرسته ولكن يظل ليس بكفاءة الموقع.
تم تطوير حل لذلك من خلال ما يسمى بال server side rendering بحيث يتم تجهيز جزء من التطبيق كصفحات ويب بحيث يقوم المستخدم بتنزيل الصفحة المطلوبة واستعراضها بشكل سريع عند الذهاب لعنوان معين داخل التطبيق وأثناء ذلك يتم تنزيل بقية كود التطبيق (الجافاسكربت).
يتم فصل كامل بين الباكاند والفرونت اند (أو التطبيق). مثال على ذلك هو headless CMS.
السبب في ذلك ليس فقط تطبيقات الويب ولكن انتشار تطبيقات الجوال ومحاولة توحيد الباكاند قدر الامكان بحيث يكون هناك باكاند واحد لكل من تطبيق الايفون وتطبيق الاندرويد وتطبيق الويب.
أخيرا إذا كنت تنوي استخدام ReactJS أو Angular لبناء موقعك فاعلم انك في الحقيقة ستقوم ببناء تطبيق ويب وليس موقع ويب ولازم تكون مستعد للشي هذا بشكل جيد فالفرق جوهري. كذلك أنصحك في البداية بفايربيس لأنها راح تسهل عليك كثير بناء الباكاند كما هو الحال لمطوري تطبيقات الايفون والاندرويد
نقلا عن معاذ الخلف M.Alkhalaf
