كيفية دمج JavaScript في تطبيقات Ruby on Rails 6 لتحسين التفاعل والأداء
Aldawsari 
كمطور Full-Stack مبتدئ، كان تركيزي الأساسي ينصب على تطوير الواجهة الخلفية (backend). كنت أطمح لتعلم كيفية برمجة الخادم الخاص بي لخدمة تطبيقات الويب بكفاءة. ولكن بعد إتقان أساسيات الواجهة الخلفية، أدركت أن الواجهة الأمامية (frontend) لا تقل أهمية عنها على الإطلاق. ومن أفضل الطرق لزيادة حيوية وتفاعلية تطبيق الويب الخاص بك هي إضافة JavaScript.
يُعد JavaScript لغة برمجة حيوية لإضفاء التفاعل على تطبيقات الويب. وبالطبع، تطور دورها ليصبح أوسع بكثير مما كان عليه في السابق. إنها اللغة التي تُشغّلها متصفحات الويب، وتستخدمها العديد من المواقع التي زرتها في واجهاتها الأمامية. إذا كنت قد بدأت في استخدام إطار العمل Ruby on Rails لبناء تطبيق الويب الخاص بك وراودتك تساؤلات حول كيفية دمج JavaScript في مشروعك، فهذا المقال سيقدم لك دليلاً شاملاً لذلك.
لماذا يُعد JavaScript ضرورياً لتطبيقك؟
قد تتساءل عن السبب الجوهري وراء حاجتك إلى JavaScript في تطبيق الويب الخاص بك من الأساس. باختصار، إذا لم تدمج أي شيفرة JS، فإن تجربة المستخدم لتطبيقك لن تكون مثالية. دعنا نفترض أن لديك نموذجاً يملأه المستخدم وتريد إجراء تحقق من صحة البيانات (form validation) قبل الإرسال.
تحسين تجربة المستخدم وتقليل الحمل على الخادم
إذا أرسل المستخدم النموذج دون إدخال القيم الصحيحة، فسيتعين على الصفحة إعادة التحميل بالكامل، مما يستدعي طلبًا جديدًا للخادم ويعيد عرض الصفحة للمستخدم. هذه العملية تستغرق وقتًا طويلاً وقد تسبب إزعاجًا للمستخدم. بينما يمكنك أحياناً الاعتماد على التحقق من صحة النموذج في HTML، إلا أن هذا ليس ممكناً دائماً أو كافياً. إضافة نص برمجي بسيط يتحقق من مدخلات المستخدم ويُخطره بضرورة إدخال المعلومات الصحيحة بشكل فوري ومباشر، يُعد حلاً أفضل بكثير.
بالطبع، هذا لا يعني أنه يمكنك تجاهل التحقق من صحة البيانات على جانب الخادم (server-side validation)، فهذا موضوع آخر يستحق مقالاً منفصلاً، لكن JavaScript يوفر طبقة أولى من التحقق تحسن الأداء وتجربة المستخدم بشكل ملحوظ.
التحميل غير المتزامن للمحتوى (Asynchronous Loading)
حالة استخدام أخرى مهمة هي تحميل الملفات بشكل غير متزامن (asynchronously)، وهو ما يمكنك إنجازه باستخدام JavaScript دون الحاجة لإعادة تحميل الصفحة بأكملها. ربما تكون قد استخدمت بعض تطبيقات الويب التي تقوم بتحميل المزيد من الصور والمقالات كلما قمت بالتمرير لأسفل، دون الحاجة إلى تحديث الصفحة أو الانتقال بين الصفحات مراراً وتكراراً. هذه الحالات وغيرها تُعد أسباباً ممتازة لاستخدام JavaScript في تطبيقك.
في الواقع، يتزايد الطلب على JavaScript بشكل مستمر. يمكنك حتى استخدامه لكتابة الواجهة الخلفية لتطبيقاتك، لكننا نُحب Rails، لذا سنلتزم به لبعض الوقت.
ماذا سنتناول في هذا المقال؟
وقت كتابة هذا المقال، كانت النسخة الأحدث من إطار العمل هي Rails 6، وقد جلبت هذه النسخة بعض التغييرات على طريقة تفاعلك مع JavaScript. قبل Rails 6، كنا نعتمد على asset pipeline لإدارة ملفات CSS و JavaScript. ولكن بدءاً من Rails 6، أصبح Webpacker هو المترجم الافتراضي (default compiler) لـ JavaScript. بينما لا يزال CSS يُدار بواسطة asset pipeline، يمكنك أيضاً استخدام Webpack لتجميع ملفات CSS.
هيكلة مجلدات JavaScript الجديدة في Rails 6
لن تجد مجلد JavaScript الخاص بك في نفس المكان الذي اعتدت عليه في Rails 5. لقد تغير هيكل الدليل لملفات JavaScript ليصبح في المجلد app/javascript/packs/. في هذا المجلد، ستجد ملف application.js، والذي يشبه تماماً ملف application.css. سيتم استيراده افتراضياً في ملف application.html.erb عند إنشاء تطبيق Rails جديد، وسيُستخدم ملف application.html.erb هذا بواسطة جميع العروض (views) في تطبيقك.
إضافة نص برمجي يُستخدم في جميع العروض
إذا كنت ترغب في أن يكون JavaScript الخاص بك متاحاً في جميع العروض أو الصفحات، يمكنك ببساطة وضعه في ملف application.js:
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
console.log('Hello from application.js')
الأسطر الأربعة الأولى موجودة افتراضياً. لقد أضفت عبارة console.log() لأوضح لك أن JavaScript سيكون متاحاً في كل مكان. يمكنك اختبار ذلك عن طريق عرض أي صفحة في تطبيقك وفتح وحدة تحكم المطور (developer console) في المتصفح.
ولكن قد لا ترغب دائماً في تحميل شيفرة JavaScript الخاصة بك في كل صفحة. بدلاً من ذلك، يمكنك جعل النص البرمجي متاحاً فقط عند زيارة صفحة معينة.
إضافة نص برمجي يُستخدم في ملف عرض محدد
إذا كنت تريد أن يكون JavaScript الخاص بك متاحاً لعارض (view) معين فقط، فيمكنك استخدام المساعد javascript_pack_tag لاستيراد هذا الملف المحدد:
<h1 class='text-center'>I want my JS here only</h1>
<%= javascript_pack_tag 'my_js' %>
ثم قم بإنشاء ملف my_js.js داخل مجلد app/javascript/packs/ وضع فيه الشيفرة التالية:
console.log('Hello from My JS')
تذكر أنك تحتاج إلى إضافة الملف في دليل packs. يجب أن يشير javascript_pack_tag أيضاً إلى اسم ملف JavaScript الذي أنشأته (بدون الامتداد .js). الآن، سيتم تشغيل النص البرمجي فقط عندما يتم تحميل العرض المحدد الذي يتضمن javascript_pack_tag في المتصفح.
الخلاصة التقنية
لقد أحدث Rails 6 نقلة نوعية في إدارة أصول JavaScript باعتماده على Webpacker، مما يعكس التوجه الحديث في تطوير الويب نحو استخدام حزم الوحدات (module bundlers) مثل Webpack. هذا التغيير لا يعزز فقط من كفاءة إدارة الشيفرة وتنظيمها، بل يفتح الباب أيضاً أمام استخدام أحدث ميزات JavaScript والنظم البيئية (ecosystems) المعاصرة مثل React و Vue.js بسلاسة أكبر ضمن تطبيقات Rails. فهم هذه الهيكلية الجديدة واستغلالها بفعالية أمر بالغ الأهمية لأي مطور Rails يسعى لبناء تطبيقات ويب حديثة، سريعة الاستجابة، وذات تجربة مستخدم متفوقة.