StimulusReflex - ένας γρήγορος τρόπος για τη δημιουργία αντιδραστικών εφαρμογών

Είναι ένας νέος τρόπος για τη δημιουργία αντιδραστικής διεπαφής χρήστη σε Ruby on Rails.
Το StimulusReflex επεκτείνει τις δυνατότητες του Rails και του Stimulus καταγράφοντας τις αλληλεπιδράσεις των χρηστών και περνώντας τες στο Rails μέσω websockets σε πραγματικό χρόνο. Οι σελίδες αναδιατυπώνονται γρήγορα και όλες οι ενημερώσεις αποστέλλονται στον πελάτη μέσω του CableReady.

Το CableReady επιτρέπει τη δημιουργία ενημερώσεων σε πραγματικό χρόνο με την ενεργοποίηση αλλαγών DOM στην πλευρά του πελάτη, συμβάντων και ειδοποιήσεων μέσω ActionCable. Σε αντίθεση με το Ajax, οι λειτουργίες δεν ξεκινούν πάντα από τον χρήστη ή από άλλο πρόγραμμα περιήγησης, για παράδειγμα, μπορούν επίσης να ξεκινήσουν από εργαζόμενους.

ΕρέθισμαΑντανακλαστικό ήταν αρχικά εμπνευσμένο από το LiveView της Phoenix (μια εναλλακτική λύση για το SPA). Ο στόχος του StimulusReflex ήταν πάντα να κάνει την κατασκευή σύγχρονων εφαρμογών με το Rails την πιο παραγωγική και ευχάριστη επιλογή που υπάρχει. Και κατά τη γνώμη μου, αυτό είναι ακριβώς αυτό που πέτυχαν εδώ.

Γιατί πρέπει να χρησιμοποιήσουμε το StimulusReflex;

Είναι απλό, να επικεντρωθείτε στην ανάπτυξη ενός προϊόν αντί να εισαγάγει συνεπείς αλλαγές στη σύγχρονη JavaScript. Επίσης, ΕρέθισμαΑντανακλαστικό οι εφαρμογές έχουν απλές, συνοπτικές και σαφείς κωδικός και να ενσωματωθούν απρόσκοπτα με Ruby on Rails. Αυτό επιτρέπει σε μικρές ομάδες RoR να κάνουν μεγάλα πράγματα ακόμη και χωρίς μεγάλη γνώση του React, Vue ή τις σύγχρονες λύσεις JavaScript.

Πώς λειτουργεί το StimulusReflex;

Reflex

Reflex είναι μια συναλλακτική ενημέρωση του UI που πραγματοποιείται μέσω μιας μόνιμης ανοικτής σύνδεσης με τον διακομιστή. Το StimulusReflex αντιστοιχίζει τα αιτήματα σε Reflex κατηγορία. Reflex οι κλάσεις βρίσκονται στο app/reflexes κατάλογο.

 class PostReflex < ApplicationReflex
 end


Αν δημιουργήσουμε την κλάση Reflex με μια γεννήτρια, μπορούμε να δούμε ότι η κλάση μας περιέχει αυτό το σχόλιο:

# Όλες οι περιπτώσεις Reflex περιλαμβάνουν το CableReady::Broadcaster και εκθέτουν τις ακόλουθες ιδιότητες:
  #
  # - σύνδεση - η σύνδεση ActionCable,
  # - channel - το κανάλι ActionCable,
  # - request - ένας πληρεξούσιος αντιπρόσωπος ActionDispatch::Request για τη σύνδεση υποδοχής,
  # - session - ο χώρος αποθήκευσης ActionDispatch::Session για τον τρέχοντα επισκέπτη,
  # - flash - το ActionDispatch::Flash::FlashHash για την τρέχουσα αίτηση,
  # - url - η διεύθυνση URL της σελίδας που προκάλεσε το αντανακλαστικό,
  # - params - οι παράμετροι από την πλησιέστερη φόρμα του στοιχείου (εάν υπάρχει),
  # - element - ένα αντικείμενο τύπου Hash που αντιπροσωπεύει το στοιχείο HTML που προκάλεσε το αντανακλαστικό,
  # - signed - χρησιμοποιεί ένα signed Global ID για να αντιστοιχίσει σύνολο δεδομένων που αποδίδεται σε ένα μοντέλο π.χ. element.signed[:foo],
  # - unsigned - χρησιμοποιεί ένα unsigned Global ID για να χαρτογραφήσει σύνολο δεδομένων που αποδίδεται σε ένα μοντέλο π.χ., element.unsigned[:foo],
  # - cable_ready - ένα ειδικό cable_ready που μπορεί να μεταδώσει στον τρέχοντα επισκέπτη (δεν χρειάζονται παρενθέσεις),
  # - reflex_id - ένα UUIDv4 που προσδιορίζει μοναδικά κάθε Reflex.

Όπως βλέπουμε, υπάρχουν λίγες ιδιότητες που μπορούν να χρησιμοποιηθούν στην κλάση μας. Η πιο ενδιαφέρουσα στην αρχή θα είναι η στοιχείο ιδιότητα που περιέχει όλα τα χαρακτηριστικά των στοιχείων DOM του ελεγκτή Stimulus καθώς και άλλες ιδιότητες, όπως tagName, ελεγμένο και αξία.

ΕρέθισμαΑντανακλαστικό μας δίνει επίσης ένα σύνολο από ανακλήσεις που μας επιτρέπουν να ελέγχουμε τις διαδικασίες των αντανακλαστικών μας:

• before_reflex
• around_reflex
• after_reflex

Όπως μπορείτε να δείτε, η ονοματοδοσία είναι πολύ παρόμοια με τις Ανακλήσεις ενεργών εγγραφών.

Δήλωση ενός αντανακλαστικού στην HTML με το χαρακτηριστικό data

Ο γρηγορότερος τρόπος για να ενεργοποιήσετε τις ενέργειες Reflex είναι με τη χρήση της εντολής data-reflex χαρακτηριστικό. Η σύνταξη ακολουθεί τη μορφή Stimulus: [DOM-event]->[ReflexClass]#[action]

"="">Έγγραφα τεκμηρίωσης του StimulusReflex. Ευχαριστούμε όλους τους ανθρώπους που συμμετείχαν στην ανάπτυξη του StimulusReflex!

Σε αυτό το παράδειγμα, το data-reflex χαρακτηριστικό επισήμανε το PostRefex και η κλάση αύξηση στη μέθοδο κάντε κλικ στο εκδήλωση. Εδώ περάσαμε επίσης data-post-id που μπορούμε αργότερα να χρησιμοποιήσουμε στην κλάση Reflex μέσω του element.dataset[:post_id].

class PostsReflex < ApplicationReflex
def increment
post = Post.find(element.dataset[:post_id])

post.increment! :likes
end
end

Μορφές

Από προεπιλογή, ΕρέθισμαΑντανακλαστικό ενημερώνει ολόκληρη τη σελίδα (Page morph). Μετά την επανεπεξεργασία της ενέργειας του ελεγκτή, την απόδοση του προτύπου προβολής και την αποστολή της ακατέργαστης HTML στο πρόγραμμα περιήγησής σας, το StimulusReflex χρησιμοποιεί το morphdom βιβλιοθήκη για να κάνετε τον μικρότερο δυνατό αριθμό τροποποιήσεων DOM που απαιτούνται για την ανανέωση του UI σας σε λίγα χιλιοστά του δευτερολέπτου.

ΕρέθισμαΑντανακλαστικό διαθέτει τρεις διαφορετικούς τρόπους λειτουργίας:

Σελίδα Morph - εκτελεί μια ολοσέλιδη ενημέρωση,
Επιλογέας Morph - αντικαθιστά το περιεχόμενο ενός στοιχείου,
Τίποτα Morph - εκτελεί λειτουργίες που δεν ενημερώνουν τη σελίδα σας (για παράδειγμα, καλεί τον υπάλληλό σας).

Για να αλλάξουμε το PostReflex#increment μέθοδο, μπορούμε απλά να χρησιμοποιήσουμε τη μέθοδο morph λέξη-κλειδί και στοχεύστε το μερικό που θέλουμε να ενημερώσουμε.

def increment
post = Post.find(element.dataset[:post_id])
post.increment! :likes

morph "#posts_#{post.id}", render(partial: 'post', locals: { posts: post })
end

Οι σκέψεις μου

Αυτή η αρκετά σύντομη εισαγωγή είναι αρκετή για να ξεκινήσετε το ταξίδι σας με τα αντιδραστικά Rails χρησιμοποιώντας ΕρέθισμαΑντανακλαστικό. Δεν είναι υπέροχο να μπορείς να δημιουργήσεις μια αντιδραστική εφαρμογή SPA με λίγες γραμμές Ruby και χωρίς JavaScript; Για μένα, όλη αυτή η ιδέα της HTML over-the-wire είναι συναρπαστική και σίγουρα θα ασχοληθώ με αυτό το θέμα στο μέλλον. Προς το παρόν, σας συνιστώ ανεπιφύλακτα Τεκμηρίωση StimulusReflex. Ένα μεγάλο μπράβο σε όλους τους ανθρώπους που συμμετείχαν στην ανάπτυξη του StimulusReflex!

Διαβάστε περισσότερα:

Γιατί θα πρέπει (πιθανώς) να χρησιμοποιήσετε την Typescript

Πώς να μην σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης;

Στρατηγικές άντλησης δεδομένων στο NextJS