Stimulus.js: بديل إطار عمل JS لتطبيقات Rails

أعرف بماذا تفكر... آخر JavaScript إطار العمل؟ هناك الكثير منها بالفعل! أنت على حق، ولكن هذا الإطار لفت انتباهي لأنه تم إنشاؤه بواسطة Basecamp. من المحتمل أنك تعرف هذه الشركة، فهم مبتكرو Ruby on Rails. كما أنشأوا أيضًا الروابط التوربينية, وأذكر هذا لأن Stimulus يتوافق معه بشكل جميل. لذا، ربما يستحق الأمر تجربة Stimulus؟

كيف تعمل؟

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

سهولة التركيب

إذا كان تطبيق Rails الخاص بك يستخدم جوهرة Webpacker، فيمكنك تثبيت Stimulus بأمر واحد بسيط حيث توفر جوهرة Webpacker مهمة لتثبيت Stimulus. فقط قم بتشغيل الأمر التالي في دليل جذر Rails الخاص بك:

قضبان القضبان webpacker:تثبيت:محفز
وهذا يضيف تحفيزًا إلى الحزمة.json وينشئ الملفين التاليين: التطبيق/جافا سكريبت/متحكمون/index.js:

استيراد { تطبيق } من "محفّز"
استيراد { definitionsFromContext } من "stimulus/webpack-helpers"

يشكل التطبيق = Application.start()
const context = require.context("وحدات التحكم"، صحيح، /_controller.js$/)
التطبيق.load(definitionsFromContext(context)))

يمكنك أن ترى أنه تم استدعاء مساعد طلب السياق الخاص بـ webpack. ثم مرر السياق الناتج إلى طريقة Application#load. هذا يعني أن تطبيقنا يبحث عن الملفات المسماة[المعرّف] _كونترولر.js في التطبيق/جافا سكريبت/عناصر التحكم/ الدليل، حيث يتوافق المعرف مع معرّف وحدة التحكم في بيانات وحدة التحكم في HTML الخاص بك. هذا هو بالضبط المكان الذي يجب أن نضع فيه وحدات تحكم التحفيز.
التطبيق/javascript/controllers/hello_controller.js أيضًا. هذا مجرد مثال على وحدة تحكم يمكننا اللعب بها.

الاستخدام الأساسي

حسناً، إذاً لدينا hello_controller.js ملف تم إنشاؤه باستخدام ما يلي الكود:

استيراد { وحدة تحكم } من "المحفز"

تصدير الفئة الافتراضية الممتدة لوحدة التحكم {
أهداف ثابتة = ["الإخراج"]
اتصال() { {
هذا.outputTarget.textContent.textContent = "مرحبًا، محفز!
}
}

ولكن، كما تعلم، لن نرى أي تأثيرات إذا لم نقم بالربط بين HTML و JavaScript. دعنا نضيف بعض التعليمات البرمجية إلى طريقة عرض HTML. يمكنك وضع هذا متى ما أردت:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

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

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">احسب</button></p>
</div>

ووحدة التحكم في التحفيز التطبيق/javascript/controllers/hello_controller.js:

استيراد { وحدة تحكم } من "المحفز"

تصدير الفئة الافتراضية الممتدة لوحدة التحكم {
أهداف ثابتة = ["مخرجات"، "أيام"]
اتصال() { {
هذا.outputTarget.textContent = "منذ متى وأنت في الحجر الصحي؟
}
حساب() { {
const element = this.daysTarget
const days = element.value.element
const lockdownDays = 14
دع الأيام المتبقية = أيام الإغلاق - الأيام

إذا (الأيام المتبقية <1) {
  تنبيه('أنت حر!')
}
في حالة أخرى {
  تنبيه(`` عدد الأيام التي تحتاجها للبقاء في الحجر الصحي: ${daysLeft}'))
}

}
}

لدينا هنا تطبيق بسيط للغاية يحسب المدة التي يجب أن نبقى فيها في الحجر الصحي. تمكنا من القيام بذلك باستخدام سمة إجراء البيانات في HTML.
يمكنك أن تلاحظ أننا أضفنا أيضًا "أيام" إلى قائمة الأهداف في كود JavaScript. عندما نفعل ذلك، يقوم Stimulus تلقائيًا بإنشاء هذا.أيام الهدف والتي تُرجع أول عنصر مستهدف مطابق.

ما الذي تحتاج إلى معرفته أيضاً؟

عمليات الاستدعاء

ربما لاحظت أن هناك توصيل() في كلا المثالين. هذه الطريقة مخصصة لعمليات الاستدعاء المدمجة. يجب أن تعرفها جميعًا ودورة حياتها، لذا ها هي هنا:
تهيئة:: مرة واحدة، عندما يتم إنشاء وحدة التحكم لأول مرة,
الاتصال:: في أي وقت تكون فيه وحدة التحكم متصلة بـ DOM,
قطع الاتصال:: في أي وقت يتم فيه فصل وحدة التحكم عن DOM.

واصف الإجراء

إن إجراء البيانات القيمة انقر فوق->hello#calculate يسمى واصف الفعل. وينص هذا الواصف على ما يلي:

• انقر فوق هو اسم الحدث,
• مرحباً هو معرّف وحدة التحكم,
• احسب هو اسم الطريقة.

الأهداف

تمامًا كما هو الحال بالنسبة للإجراءات، فإن التحفيز له واصف هدف. إن مرحباً. الواصف يقول أن مرحباً هو معرّف وحدة التحكم,
أيام هو اسم الهدف.

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

هذا.أيام الهدف والتي تقيّم حتى الهدف الأول في نطاق وحدة التحكم. إذا لم يكن هناك هدف، تُشير الخاصية إلى خطأ,
هذا.أيام الأهداف تقييم ما يصل إلى مصفوفة من جميع الأهداف المصدرية في نطاق وحدة التحكم,
هذا.hasDaysTarget تُرجع صواب إذا كان هناك هدف أو خطأ إذا لم يكن هناك هدف.

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

اقرأ المزيد:

• تطوير تطبيقات الويب: لماذا تعتبر تقنية Ruby on Rails تقنية تستحق الاختيار؟
• حان الوقت لواقع جديد بدأ عصر العمل عن بُعد منذ شهر مضى
• 5 أسباب تجعلك تجد مطوري روبي المؤهلين في بولندا