Stimulus.js: JS Framework για εφαρμογές Rails

Ξέρω τι σκέφτεστε.... JavaScript πλαίσιο; Υπάρχουν ήδη τόσα πολλά από αυτά! Έχετε δίκιο, αλλά αυτό τράβηξε την προσοχή μου καθώς δημιουργήθηκε από τον Basecamp. Πιθανώς γνωρίζετε αυτή την εταιρεία, είναι οι δημιουργοί του Ruby on Rails. Δημιούργησαν επίσης Turbolinks, και το αναφέρω αυτό επειδή το Stimulus συνδυάζεται υπέροχα με αυτό. Έτσι, ίσως αξίζει να δοκιμάσετε το Stimulus;

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

Το Stimulus λειτουργεί με την παρακολούθηση της σελίδας, περιμένοντας την data-controller χαρακτηριστικό για να εμφανιστεί. Το data-controller Η τιμή συνδέει και αποσυνδέει τους ελεγκτές Stimulus. Η υπόθεση είναι απλή: όπως η κλάση είναι μια σύνδεση μεταξύ HTML και CSS, data-controller είναι μια γέφυρα από την HTML στο JavaScript. Το Stimulus προσθέτει επίσης το data-action attribute, το οποίο περιγράφει πώς τα συμβάντα στη σελίδα θα πρέπει να ενεργοποιούν τις μεθόδους του ελεγκτή, και το data-target χαρακτηριστικό, το οποίο σας δίνει μια λαβή για την εύρεση στοιχείων στην εμβέλεια του ελεγκτή.

Εύκολη εγκατάσταση

Αν η εφαρμογή Rails χρησιμοποιεί ένα webpacker gem, μπορείτε να εγκαταστήσετε το Stimulus με μια απλή εντολή, καθώς το webpacker gem παρέχει μια εργασία για την εγκατάσταση του Stimulus. Απλά εκτελέστε την ακόλουθη εντολή στον ριζικό κατάλογο του Rails σας:

rails webpacker:install:stimulus
Αυτό προσθέτει τόνωση στην package.json και δημιουργεί τα ακόλουθα δύο αρχεία: app/javascript/controllers/index.js:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

Μπορείτε να δείτε ότι καλείται ο βοηθός require.context του webpack. Στη συνέχεια, περνάει το προκύπτον πλαίσιο στη μέθοδο Application#load. Αυτό σημαίνει ότι η εφαρμογή μας αναζητά αρχεία με όνομα[identifier]_controller.js στο app/javascript/controllers/ όπου το αναγνωριστικό αντιστοιχεί στο αναγνωριστικό του ελεγκτή δεδομένων-ελεγκτή στην HTML σας. Αυτό είναι ακριβώς το μέρος όπου θα πρέπει να τοποθετήσουμε τους ελεγκτές Stimulus.
Η εφαρμογή/javascript/controllers/hello_controller.js παράγεται επίσης. Αυτό είναι απλώς ένα παράδειγμα ελεγκτή με το οποίο μπορούμε να παίξουμε.

Βασική χρήση

Εντάξει, λοιπόν, έχουμε το hello_controller.js αρχείο που δημιουργήθηκε με τα ακόλουθα κωδικός:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output"]
connect() {
this.outputTarget.textContent = 'Hello, Stimulus!'
}
}

Αλλά, όπως γνωρίζετε, δεν θα δούμε κανένα αποτέλεσμα αν δεν κάνουμε τη σύνδεση μεταξύ της HTML και του JavaScript. Ας προσθέσουμε λίγο κώδικα στην προβολή HTML. Μπορείτε να τον τοποθετήσετε όποτε θέλετε:

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

Και ξέρετε κάτι; Αυτό είναι όλο! Αν ξαναφορτώσετε τη σελίδα σας και δείτε το "Hello, Stimulus!" στη σελίδα σας, αυτό σημαίνει ότι η σύνδεση λειτουργεί σωστά. Απλό, σωστά;
Εντάξει, αλλά αυτό είναι μια απλή οθόνη κειμένου. Μπορούμε να έχουμε λίγη δράση; Ναι, μπορούμε! Όπως ανέφερα προηγουμένως, υπάρχει επίσης το data-action χαρακτηριστικό. Ας αλλάξουμε στη συνέχεια την προβολή HTML:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Υπολογίστε το</button></p>
</div>

Και ο ελεγκτής Stimulus app/javascript/controllers/hello_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
static targets = ["output", "days"]
connect() {
this.outputTarget.textContent = "Πόσο καιρό βρίσκεστε σε καραντίνα;
}
calculate() {
const element = this.daysTarget
const days = element.value
const lockdownDays = 14
let daysLeft = lockdownDays - days

if (daysLeft < 1) {
  alert('Είστε ελεύθεροι!')
}
else {
  alert(`Ποσό ημερών πρέπει να παραμείνετε σε καραντίνα: ${daysLeft}`)
}

}
}

Εδώ έχουμε μια πολύ απλή εφαρμογή που υπολογίζει πόσο καιρό πρέπει να παραμείνουμε σε καραντίνα. Καταφέραμε να το κάνουμε αυτό χρησιμοποιώντας το χαρακτηριστικό data-action στην HTML.
Μπορείτε να δείτε ότι προσθέσαμε επίσης τις "ημέρες" στον κατάλογο των στόχων στον κώδικα JavaScript. Όταν το κάνουμε αυτό, το Stimulus δημιουργεί αυτόματα ένα this.daysTarget η οποία επιστρέφει το πρώτο στοιχείο-στόχο που ταιριάζει.

Τι άλλο πρέπει να ξέρετε;

Callbacks

Πιθανόν να παρατηρήσατε ότι υπάρχει ένα connect() και στα δύο παραδείγματα. Αυτή είναι για ενσωματωμένες ανακλήσεις. Θα πρέπει να τα γνωρίζετε όλα και τον κύκλο ζωής τους, οπότε εδώ είναι:
αρχικοποίηση: μία φορά, κατά την πρώτη ενσάρκωση του ελεγκτή,
συνδεθείτε: κάθε φορά που ο ελεγκτής είναι συνδεδεμένος στο DOM,
αποσύνδεση: κάθε φορά που ο ελεγκτής αποσυνδέεται από το DOM.

Περιγραφικός κωδικός δράσης

Το data-action αξία click->hello#calculate ονομάζεται περιγραφέας δράσης. Αυτή η περιγραφή λέει ότι:

• κάντε κλικ στο είναι το όνομα του συμβάντος,
• Γεια σας είναι το αναγνωριστικό του ελεγκτή,
• υπολογίστε το είναι το όνομα της μεθόδου.

Στόχοι

Ακριβώς όπως και για τις ενέργειες, το Stimulus έχει έναν περιγραφικό στόχο. Το hello.days ο περιγραφέας λέει ότι: Γεια σας είναι το αναγνωριστικό του ελεγκτή,
ημέρες είναι το όνομα του στόχου.

Στο προηγούμενο παράδειγμα, ανέφερα ότι το Stimulus δημιουργεί το this.daysTarget ιδιότητα όταν υπάρχει η ένδειξη "days" στη λίστα των στόχων. Πρέπει επίσης να γνωρίζετε ότι μπορούν να δημιουργηθούν περισσότερες ιδιότητες. Σε σχέση με το παράδειγμα, μπορείτε να έχετε:

this.daysTarget η οποία αξιολογεί μέχρι τον πρώτο στόχο στην εμβέλεια του ελεγκτή. Εάν δεν υπάρχει στόχος, η ιδιότητα επισημαίνει ένα σφάλμα,
this.daysTargets αξιολογεί μέχρι έναν πίνακα όλων των πηγαίων στόχων στην εμβέλεια του ελεγκτή,
this.hasDaysTarget επιστρέφει true αν υπάρχει στόχος ή false αν δεν υπάρχει.

Όπως μπορείτε να δείτε, το Stimulus είναι απλό και μπορεί εύκολα να προστεθεί στην εφαρμογή σας. Κερδίζει κάποια δημοτικότητα στην κοινότητα RoR και δεν εκπλήσσομαι. Ως προγραμματιστής Ruby ο ίδιος, μου αρέσει πραγματικά να δουλεύω με το Stimulus. Τι θα λέγατε λοιπόν να το δοκιμάσετε;

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

• Ανάπτυξη εφαρμογών ιστού: Γιατί αξίζει να επιλέξετε την τεχνολογία Ruby on Rails;
• Ώρα για μια νέα πραγματικότητα. Η εποχή της εξ αποστάσεως εργασίας ξεκίνησε πριν από ένα μήνα
• 5 λόγοι για τους οποίους θα βρείτε εξειδικευμένους προγραμματιστές Ruby στην Πολωνία