كيفية إضافة JavaScript إلى تطبيق Rails 6 الخاص بك

بصفتي مطورًا مبتدئًا لـ Full-Stack ، كان تركيزي الأساسي هو الخلفية. كنت أرغب في معرفة كيفية برمجة خادم الواجهة الخلفية الخاص بي لخدمة تطبيق الويب الخاص بي.

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

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

ربما تكون قد بدأت في استخدام Ruby on Rails لبناء تطبيق الويب الخاص بك وتساءلت عن كيفية إضافة JavaScript إلى التعليمات البرمجية الخاصة بك. في هذه المقالة ، سأوضح لك كيفية إضافة كود JavaScript إلى تطبيق ريلز الخاص بك.

لماذا JavaScript؟

قد تتساءل لماذا تحتاج حتى إلى JavaScript في تطبيق الويب الخاص بك في المقام الأول. باختصار ، إذا لم تقم بتضمين أي JS ، فلن تكون تجربة مستخدم تطبيق الويب جيدة.

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

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

بالطبع هذا لا يعني أنه يمكنك تجاهل التحقق من جانب الخادم ، ولكن هذا لمقال آخر.

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

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

لكننا نحب ريلز ، لذلك سنلتزم بها لفترة من الوقت.

ما سنغطيه هنا

في وقت كتابة هذا التقرير ، كان أحدث إصدار من إطار العمل هو Rails 6 ، وقد أحدث بعض التغييرات في طريقة تفاعلك مع JavaScript.

قبل Rails 6 ، كان لدينا خط أنابيب الأصول لإدارة ملفات CSS و JavaScript. ولكن بدءًا من Rails 6 ، فإن Webpacker هو المترجم الافتراضي لجافا سكريبت. لا تزال CSS تُدار بواسطة خط أنابيب الأصول ، ولكن يمكنك أيضًا استخدام Webpack لتجميع CSS.

لن تجد مجلد JavaScript الخاص بك في نفس المكان كما فعلت في Rails 5. لقد تغيرت بنية دليل JavaScript إلى app / javascript / packs / folder.

ستجد في هذا المجلد ملف application.js ، والذي يشبه ملف application.css تمامًا . سيتم استيراده افتراضيًا في ملف application.html.erb عند إنشاء تطبيق ريلز الجديد.

و application.html.erb سيتم استخدامها الملف من قبل جميع وجهات النظر.

إضافة برنامج نصي ستستخدمه جميع طرق العرض

إذا كنت تريد أن يكون 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 سيكون متاحًا في كل مكان.

يمكنك اختبار ذلك من خلال عرض أي صفحة في التطبيق الخاص بك وفتح وحدة تحكم المطور.

ولكن قد لا ترغب دائمًا في تحميل شفرة JavaScript الخاصة بك في كل صفحة. بدلاً من ذلك ، يمكنك إتاحة النص البرمجي فقط عند زيارة صفحة معينة.

إضافة برنامج نصي يستخدمه ملف معين

إذا كنت تريد إتاحة JavaScript لطريقة عرض معينة فقط ، فيمكنك استخدام javascript_pack_tag لاستيراد هذا الملف المحدد:

I want my JS here only

console.log('Hello from My JS')

تذكر أنك تحتاج إلى إضافة الملف في دليل الحزم . و javascript_pack_tag ينبغي أن تشير أيضا إلى اسم ملف جافا سكريبت قمت بإنشائه.

الآن سيتم تشغيل البرنامج النصي فقط عند تحميل العرض المحدد الذي يتضمن javascript_pack_tag في المتصفح.

تغليف

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

يمكنك متابعتي على جيثب إذا كنت تريد معرفة المزيد.