StimulusReflex - طريقة سريعة لإنشاء تطبيقات تفاعلية

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

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

المنعكس التحفيزي مستوحى في الأصل من برنامج LiveView من فينيكس (بديل لـ SPA). لطالما كان هدف StimulusReflex هو جعل بناء التطبيقات الحديثة باستخدام Rails الخيار الأكثر إنتاجية ومتعة متاحًا. وفي رأيي، هذا بالضبط ما حققوه هنا.

لماذا يجب علينا استخدام StimulusReflex؟

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

كيف يعمل StimulusReflex؟

الانعكاس

الانعكاس هو تحديث واجهة مستخدم للمعاملات يتم عبر اتصال مفتوح دائم بالخادم. يعيِّن StimulusReflex الطلبات إلى الانعكاس الفصل. الانعكاس الفصول في التطبيق/ردود الفعل الدليل.

فئة PostReflex <تطبيقReflex
 نهاية


إذا أنشأنا صنف Reflex مع مولد، يمكننا أن نرى أن صنفنا يحتوي على هذا التعليق:

# جميع مثيلات Reflex تتضمن CableReady::Broadcaster وتعرض الخصائص التالية:
  #
  # - الاتصال - اتصال ActionCable,
  # - القناة - قناة ActionCable,
  # - الطلب - وكيل ActionDispatch::طلب اتصال المقبس,
  # - جلسة العمل - مخزن ActionDispatch::جلسة عمل للزائر الحالي,
  # - فلاش - مخزن ActionDispatch::Flash::FlashHash للطلب الحالي,
  # - عنوان url - عنوان URL للصفحة التي أدت إلى رد الفعل,
  # - البارامز - المعلمات من أقرب نموذج للعنصر (إن وجدت),
  1TPTP63T - العنصر - كائن يشبه التجزئة يمثل عنصر HTML الذي أدى إلى رد الفعل,
  # - موقّع - يستخدم معرّفًا عالميًا موقّعًا لتعيين مجموعة البيانات المنسوبة إلى نموذج، على سبيل المثال، element.sign[:foo],
  # - غير موقّع - يستخدم معرّفًا عالميًا غير موقّع لتعيين مجموعة بيانات منسوبة إلى نموذج، على سبيل المثال، element.unsigned[:foo],
  # - كابل_جاهز - كابل_جاهز خاص يمكن بثه إلى الزائر الحالي (لا حاجة إلى أقواس),
  # - reflex_id - معرف UUIDv4 الذي يعرّف كل منعكس بشكل فريد.

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

المنعكس التحفيزي يعطينا أيضًا مجموعة من عمليات الاستدعاء للسماح لنا بالتحكم في عملياتنا الانعكاسية:

• قبل_الانعكاس
• حول_المعكوس
• ما بعد_الانعكاس

كما ترى، التسمية مشابهة جدًا لاستدعاءات السجل النشط.

إعلان منعكس في HTML مع سمة البيانات

أسرع طريقة لتمكين الإجراءات الانعكاسية هي باستخدام انعكاس البيانات السمة. يتبع بناء الجملة تنسيق المحفز: [DOM-event] -> [ReflexClass] #[action]

"="">وثائق StimulusReflex. تحية لجميع الأشخاص المشاركين في تطوير StimulusReflex!

في هذا المثال، فإن انعكاس البيانات أشارت السمة إلى بوسترفكس وفئة الزيادة على طريقة انقر فوق الحدث. هنا مررنا أيضًا مُعرّف الوظيفة-الموقع-المتصل التي يمكننا استخدامها لاحقًا في فئة الانعكاس من خلال العنصر.dataset.dataset[:post_id].

صنف PostsReflex <تطبيقReflex
تعريف الزيادة
مشاركة = Post.find.find(element.dataset[:post_id])

post.increment! :أعجبني
النهاية
النهاية

الأشكال

بشكل افتراضي, المنعكس التحفيزي تحديث الصفحة بأكملها (تحويل الصفحة). بعد إعادة معالجة إجراء وحدة التحكم، وتصيير قالب العرض وإرسال HTML الخام إلى متصفحك، يستخدم StimulusReflex مورفودوم مكتبة للقيام بأقل عدد من تعديلات DOM اللازمة لتحديث واجهة المستخدم في بضعة أجزاء من الثانية.

المنعكس التحفيزي تتميز بثلاثة أوضاع تشغيل متميزة:

تحويل الصفحة - إجراء تحديث صفحة كاملة,
مورف المحدد - يستبدل محتوى عنصر ما,
لا شيء مورف - تنفيذ الدوال التي لا تقوم بتحديث صفحتك (على سبيل المثال، استدعاء موظفك).

لتغيير ما بعدReflex#increment يمكننا ببساطة استخدام طريقة مورف واستهداف الجزئية التي نريد تحديثها.

تعريف الزيادة
مشاركة = Post.find.find(element.dataset[:post_id])
زيادة المنشور :إعجابات

مورف "#P63Tposts_#{post.id}"، تصيير(جزئي: 'post'، محلي: { المشاركات: post })
نهاية

أفكاري

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

اقرأ المزيد:

لماذا يجب عليك (على الأرجح) استخدام Typescript

كيف لا تقتل مشروعاً بممارسات الترميز السيئة؟

استراتيجيات جلب البيانات في NextJS