مقدمة إلى Stimulus.js

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

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

تم إنشاء Stimulus بواسطة فريق Basecamp - أطلقوا مؤخرًا خدمة البريد الإلكتروني HEY - للمساعدة في الحفاظ على JavaScript الذي يكتبونه لتطبيقات الويب الخاصة بهم. تاريخيًا ، كانت Basecamp جيدة جدًا في الحفاظ على مشاريعها مفتوحة المصدر ، لذلك أشعر بثقة تامة من أن Stimulus قد تم اختباره جيدًا ، وسيتم الحفاظ عليه خلال السنوات القليلة القادمة.

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

المصطلح

مثل جميع الأطر ، يفضل Stimulus المصطلحات لوصف أشياء معينة. لحسن الحظ (وأحد الأسباب الرئيسية التي جعلتني أحب Stimulus) ، هناك سببان فقط ستحتاج إلى معرفتهما:

• مراقب
  يشير هذا إلى مثيلات فئات JavaScript التي تعد اللبنات الأساسية لتطبيقك. من الآمن أن نقول أنه عندما نتحدث عن Stimulus Controllers ، فإننا نتحدث عن فئات JavaScript.
• المعرف
  هذا هو الاسم الذي سنستخدمه للإشارة إلى وحدة التحكم الخاصة بنا في HTML باستخدام سمة بيانات مشتركة في قواعد أكواد التحفيز.
  

دعنا نقفز إلى التحفيز!

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

المتداول

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

رائع جدا ، أليس كذلك؟ دعنا نقفز إلى ما يفعله كل شيء!

application.start

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

تحكم

تعمل سمة data-controller توصيل عنصر HTML الخاص بنا بمثيل من فئة JavaScript الخاصة بنا. في هذه الحالة ، استخدمنا المعرف "counter" لربط مثيل من فئة CounterController JavaScript بعنصر div الخاص بنا. أخبرنا Stimulus عن العلاقة بين هذا المعرف ووحدة التحكم عبر طريقة application.register .

سيراقب Stimulus صفحتك باستمرار لمعرفة وقت إضافة العناصر التي تحمل هذه السمة وإزالتها. عندما تتم إضافة جزء جديد من HTML إلى الصفحة data-controller ، فستقوم بتهيئة مثيل جديد لفئة وحدة التحكم ذات الصلة ، ثم توصيل عنصر HTML. إذا قمت بإزالة هذا العنصر من الصفحة ، فسوف يستدعي طريقة disconnect في فئة وحدة التحكم.

أجراءات

يستخدم التحفيز إجراء بيانات سمة data-action لتحديد وظيفة وحدة التحكم التي سيتم تشغيلها بوضوح. باستخدام حدث بناء event->controller#function سيتمكن أي شخص يقرأ HTML من رؤية ما يفعله. هذا مفيد بشكل خاص لأنه يقلل من مخاطر وجود تعليمات برمجية غير متوقعة من ملفات أخرى ، مما يسهل التنقل في قاعدة التعليمات البرمجية. عندما رأيت النهج الذي يشجعه التحفيز لأول مرة ، شعرت أنه يشبه قراءة الكود الكاذب.

في المثال أعلاه ، عندما يطلق الزر حدث "النقر" ، سيتم تمريره إلى وظيفة addOne داخل وحدة التحكم "العداد" الخاصة بنا.

الأهداف

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

يتطلب هذا تحديد الأسماء المستهدفة داخل فئة وحدة التحكم الخاصة بك عبر وظيفة targets وإضافة الاسم إلى عنصر عبر data-target .

بمجرد الانتهاء من إعداد هاتين القطعتين ، سيكون العنصر الخاص بك متاحًا في وحدة التحكم الخاصة بك. في هذه الحالة ، قمت بإعداد الهدف باسم "الإخراج" ويمكن الوصول إليه بواسطة this.outputTarget ضمن الوظائف الموجودة في وحدة التحكم الخاصة بنا.

أهداف مكررة

إذا كانت لديك أهداف متعددة بنفس الاسم ، فيمكنك الوصول إليها باستخدام صيغة الجمع للطريقة الهدف ، في هذه الحالة عندما أسمي this.outputTargets ، ستعيد مصفوفة تحتوي على كل من divs الخاصة بي مع data-target="hello.output" السمة data-target="hello.output" .

أنواع الأحداث

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

للاستماع إلى أحداث window أو document (مثل تغيير الحجم ، أو انتقال المستخدم إلى وضع عدم الاتصال) ، ستحتاج إلى إلحاق "window" أو "document" بنوع event (على سبيل المثال ، resize@window->console#logEvent the function logEvent ) على وحدة تحكم console التحكم عندما يتم تغيير حجم النافذة.

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

يستخدم وحدات تحكم متعددة في نفس العنصر

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

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

تمرير البيانات إلى الكائن الخاص بك

يوفر التحفيز الطريقتين this.data.get و this.data.set داخل فئة وحدة التحكم ، وهذا سيسمح لك بتغيير سمات البيانات الموجودة داخل نفس مساحة الاسم مثل المعرف. أعني بهذا إذا كنت تريد تمرير البيانات إلى وحدة التحكم في التحفيز من HTML الخاص بك ، فما عليك سوى إضافة سمة مثل data-[identifier]-a-variable إلى عنصر HTML الخاص بك.

عند استدعاء this.data.set ، سيتم تحديث القيمة في HTML الخاص بك حتى تتمكن من رؤية تغيير القيمة عند فحص العنصر باستخدام أدوات تطوير المتصفح.

يعد استخدام سمات البيانات ذات مساحة الاسم طريقة رائعة حقًا للمساعدة في توضيح سمة البيانات التي تناسب أي جزء من التعليمات البرمجية.

بدء ، متصل ، غير متصل

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

عندما يرى Stimulus عنصرًا له سمة data-controller مطابقة ، فإنه سينشئ إصدارًا جديدًا من وحدة التحكم الخاصة بك ويستدعي وظيفة initialize . سيتم تشغيل هذا غالبًا عند تحميل الصفحة لأول مرة ، ولكن سيتم تشغيله أيضًا إذا كنت تريد إلحاق HTML جديد بصفحتك (على سبيل المثال عبر AJAX) يحتوي على مرجع لوحدة التحكم الخاصة بك. لن يتم تشغيله عند نقل عنصر إلى موضع جديد داخل DOM الخاص بك.

بعد تهيئة الفصل ، سيقوم Stimulus بتوصيله بعنصر HTML واستدعاء وظيفة connect . سيتصل أيضًا connect إذا كنت ستنقل عنصرًا داخل DOM الخاص بك. لذلك إذا كنت ستأخذ عنصرًا ، تزيله من عنصر واحد ، ثم تقوم بإلحاقه في مكان آخر ، ستلاحظ أنه سيتم استدعاء connect فقط.

سيتم تشغيل وظيفة disconnect عند إزالة عنصر من صفحتك ، لذلك على سبيل المثال ، إذا كنت تريد استبدال نص HTML ، فيمكنك هدم أي كود قد يلزم إعادة تشغيله إذا لم يكن العنصر في نفس المركز. على سبيل المثال ، إذا كان لديك محرر WYSIWYG رائع يضيف الكثير من HTML الإضافي إلى عنصر ما ، فيمكنك إعادته إلى حالته الأصلية عند استدعاء disconnect .

وراثة الوظيفة

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

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

استخدامه في الإنتاج

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

حزمة الويب

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

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

اصطلاحات اسم الملف

لقد ذكرت في مقدمة هذه المقالة أنني استمتعت باستخدام Stimulus لأنها شعرت بأنها منظمة. يصبح هذا واضحًا حقًا عند دمجه مع Webpack ، والذي يتيح التحميل التلقائي وتسجيل وحدات التحكم.

بمجرد إعداد Stimulus في Webpack ، سيشجعك على تسمية ملفاتك مثل [identifier]_controller.js ، حيث يكون المعرف هو ما ستمرره data-controller HTML.

مع نمو مشروعك ، قد ترغب أيضًا في نقل وحدات التحكم في التحفيز إلى مجلدات فرعية. بطريقة سحرية ، يقوم Stimulus بتحويل الشرطات السفلية إلى شرطات ، والمجلد المائل إلى الأمام إلى شرطتين ، والتي ستصبح بعد ذلك المعرف الخاص بك. لذلك على سبيل المثال ، سيكون اسم الملف chat/conversation_item_controller.js chat--conversation-item .

الحفاظ على أقل من JavaScript

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

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

نتيجة لذلك ، إذا كان بإمكاني كتابة HTML يمكن الوصول إليه مع رشة من JavaScript لتلبية احتياجاتي ، مع عقلية "هذا يؤدي المهمة اليوم ، ولكن في غضون 5 سنوات أريد استبدال هذا بسهولة" سأكون سعيدًا مطور. يكون هذا أكثر قابلية للتحقيق عندما تكتب القليل من التعليمات البرمجية لتبدأ بها ، والتي يفسح لها Stimulus نفسه.

HTML أولاً ، ثم JavaScript

أحد الجوانب التي أحبها حقًا في النهج الذي يشجعه Stimulus ، هو أنه يمكنني التركيز على إرسال HTML عبر السلك إلى المستخدمين ، والذي يتم تنشيطه قليلاً باستخدام JavaScript.

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

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

خاتمة

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

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

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

قراءة متعمقة

• الصفحة الرئيسية للتحفيز
  لديهم كتيب رائع يدخل في المفاهيم التي أشرت إليها أعلاه بعمق أكبر.
• مستودع Stimulus GitHub
  لقد تعلمت الكثير عن كيفية عمل Stimulus من خلال استكشاف الكود الخاص بهم.
• ورقة الغش التحفيز
  تم تلخيص الكتيب في صفحة واحدة.
• منتدى التحفيز
  لقد جعلتني رؤية أشخاص آخرين يعملون مع Stimulus أشعر حقًا أنه يتم استخدامه في البرية.