كيفية تصميم التطبيقات ذات الصفحة الواحدة

غالباً ما يستخدم ” تطبيق ذا صفحة واحدة ” ليصف التطبيقات التي صُنعت خصيصاً للويب. هذه التطبيقات يمكن تشغيلها بواسطة المتصفحات مثل مواقع الويب، ولكنها تتميز بتفاعليّة أكثر مثل تطبيقات الجوال وتطبيقات الحاسوب.
والفرق الأكثر وضوحاً بين مواقع الويب والتطبيقات ذات الصفحة الواحدة هو تقليل عدد مرات تحديث الصفحة. تعتمد SPAs على AJAX بشكل كبير ( وهي طريقة للتواصل مع خلفية الخادم بدون الحاجة إلى تحديث الصفحة بشكل كامل) لتحميل البيانات على التطبيق. ونتيجةً لذلك، فإن عملية استدعاء الصفحات تحدث غالباً على جانب الموكل.

تصميم مواقع

ما هي سلبيات التطبيقات ذات الصفحة الواحدة ؟

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

كيف يمكن تخفيف هذه السلبيات ؟

تعمل أحدث إطارات جافا سكربت بطريقة لتتعامل مع استدعاء التطبيقات ذات الصفحة الواحدة من جانب الخادم – بمعنى، أن المستخدم سيحصل على صفحة كاملة عند تحميل التطبيق لأول مرة بدلاً من رؤية – على سبيل المثال – شريط التحميل.
يقوم “الاستدعاء من جانب الخادم” بتخفيف العبء اللازم للاستدعاء من على المتصفح، كما يقوم بالمساعدة في عملية تحسين محركات البحث ويجعل العثور على التطبيق أسهل.

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

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

هناك العديد من الإطارات مفتوحة المصدر والتي تساعدك على بناء تطبيق بصفحة واحدة، مثل :

 

Angular
React
Ember
Aurelia
Vue.js
Cycle.js
Backbone

 

وهذه القائمة يتم استخدامها مراراً وتكراراً – ولكن دعنا نتعمق في أول اثنين : Angular, React.

Angular

وهو إطار نهاية أمامية بُني ليُخفّف عبء كتابة تطبيقات معقدة مع إبقاء إمكانية إختبار وتنظيم كل شيء. تم إنشاء أول إصدار منه في 2009، وكان هو متصدر وقتها. عندما تمت كتابة Angular لأول مرة، قام بحل العديد من المشاكل التي تُحل الآن على مستوى اللغة بعد إطلاق ES 2015. بينما كان Angular 1 يحتاج إلى إنشاء حل خاص للإضافات، وفر ES 2015 الحل لإضافات جافا سكربت على مستوى اللغة.

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

تزودك Angular بنظام بيئي متكامل ( Angular CLI ) لبناء تطبيق بأدوات تتعدى التطبيقات الأخرى، كما يقدم الحلول لبناء تطبيق ويب يعمل على الجوال بأداء على أعلى مستوى.

React

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

 

كان React مدمر تماماً عندما تم إطلاقه في أول مرة. وترتبط فكرة ” إعادة التفكير في أفضل الطرق للممارسة ” بـ React لسبب وجيه – فقد كانت البنية الأساسية له مختلفة تماماً عن الشائع في مجتمع جافا سكربت في وقتها. بينما كان منشئو الإطارات الأخرى مهتمين بتطبيق نمط MVC لكتابة التطبيقات والفصل بين الكود الخاص بالعرض والكود الخاص بالأجزاء الأخرى، قررت React الربط بين الكودين باستخدام نماذج الفعالة في التكوين لتسهيل عملية كتابة الكود.

 

في الوقت الذي أُنشأ فيه React، اتجهت الإطارات الأخرى مثل Angular و Ember إلى تكوين أسلوب بناء يعتمد أكثر على المكونات، واستخدام أفكار مشابهة لتلك التي أتت بها React مثل الـ DOM الإفتراضي، والذي تقوم React باستخدامه في تطبيق التغيرات الخاصة بعرض التطبيق.

 

بناء React للتطبيقات يختلف تماماً عن Angular و Ember لأنها مجرد مكتبة عرض – ولا يمكنها تجهيز طريقة لتهيئة الموكل للإرسال إلى الخادم، أو تحميل البيانات من خلفية الخادم المرتبطة بالمكتبة. بمعنى آخر، إذا كنت تريد تطبيق يحتاج لهاتين الخاصيتين ليكون فعالاً، فإنك ستحتاج لإستخدام مكتبة أخرى قام بصيانتها فريق آخر غير فريق React ( فريق Facebook core ).

 

لا تجعل فكرة الإعتماد على المكتبات تُخيفك، فهناك العديد من المكتبات التي تم تطويرها من قبل فرق داخل Facebook ، والتي تتضمن ، react-outer المزودة بإمكانية إرسال البيانات من الموكل ، axios المزودة بنظام لإجراء اتصالات AJAX التي يمكن مداخلتها مع React.

 

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

 

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

 

WhatsApp chat