StimulusReflex - nopea tapa luoda reaktiivisia sovelluksia.

Se on uusi tapa luoda reaktiivinen käyttöliittymä vuonna Ruby on Rails.
StimulusReflex laajentaa Railsin ja Stimuluksen ominaisuuksia kaappaamalla käyttäjän vuorovaikutuksen ja välittämällä sen Railsille reaaliaikaisten websockettien kautta. Sivut renderöidään nopeasti uudelleen ja kaikki päivitykset lähetetään asiakkaalle CableReadyn kautta.

CableReady mahdollistaa reaaliaikaisten päivitysten luomisen käynnistämällä asiakaspuolen DOM-muutoksia, tapahtumia ja ilmoituksia seuraavien välityksellä ActionCable. Toisin kuin Ajax, operaatiot eivät aina ole käyttäjän, vaan esimerkiksi selaimen, vaan ne voivat olla myös työntekijöiden käynnistämiä.

StimulusReflex on alun perin saanut inspiraationsa Phoenixin LiveView-ohjelmasta (vaihtoehto SPA:lle). StimulusReflexin tavoitteena on aina ollut tehdä modernien sovellusten rakentamisesta Railsilla tuottavin ja miellyttävin vaihtoehto. Ja mielestäni he ovat juuri tässä onnistuneet.

Miksi meidän pitäisi käyttää StimulusReflexiä?

Se on yksinkertaista, keskittyä kehittämään tuote sen sijaan, että otettaisiin käyttöön johdonmukaisia muutoksia nykyaikaisessa JavaScript. Myös, StimulusReflex sovelluksissa on yksinkertaiset, tiiviit ja selkeät koodi ja integroituvat saumattomasti Ruby on Rails. Tämän ansiosta pienet RoR-tiimit voivat tehdä suuria asioita, vaikka heillä ei olisi suurta React-tietämystä, Vue tai niiden nykyaikaiset JavaScript-ratkaisut.

Miten StimulusReflex toimii?

Reflex

Reflex on transaktionaalinen käyttöliittymäpäivitys, joka tapahtuu pysyvän avoimen yhteyden kautta palvelimeen. StimulusReflex kartoittaa pyynnöt Reflex luokka. Reflex luokat ovat app/refleksit hakemisto.

 class PostReflex < ApplicationReflex
 end


Jos luomme Reflex-luokan generaattorilla, näemme, että luokkamme sisältää tämän kommentin:

# Kaikki Reflex-instanssit sisältävät CableReady::Broadcasterin ja paljastavat seuraavat ominaisuudet:
  #
  # - yhteys - ActionCable-yhteys,
  # - channel - ActionCable-kanava,
  # - request - ActionDispatch::Request-välityspalvelin socket-yhteyttä varten,
  # - istunto - nykyisen vierailijan ActionDispatch::Session-säilö,
  # - flash - nykyisen pyynnön ActionDispatch::Flash::FlashHash,
  # - url - refleksin käynnistäneen sivun URL-osoite,
  # - params - elementin lähimmän lomakkeen parametrit (jos sellaisia on),
  # - element - Hashin kaltainen objekti, joka edustaa refleksin käynnistänyttä HTML-elementtiä,
  # - signed - käyttää allekirjoitettua globaalia ID:tä mallin attribuutin määrittelemän tietokokonaisuuden kartoittamiseen, esim. element.signed[:foo],
  # - unsigned - käyttää unsigned Global ID:tä kartoittamaan malliin liitetyn datasetin, esim. element.unsigned[:foo],
  # - cable_ready - erityinen cable_ready, joka voi lähettää lähetyksen nykyiselle vierailijalle (sulkuja ei tarvita),
  # - reflex_id - UUIDv4, joka yksilöi yksiselitteisesti jokaisen refleksin.

Kuten näemme, luokassamme on muutamia ominaisuuksia, joita voidaan käyttää. Alussa mielenkiintoisin on elementti ominaisuus, joka sisältää kaikki Stimulus-kontrollerin DOM-elementin attribuutit sekä muita ominaisuuksia, kuten tagName, tarkistettu ja arvo.

StimulusReflex antaa meille myös joukon takaisinkutsuja, joiden avulla voimme hallita refleksin prosesseja:

• before_reflex
• around_reflex
• after_reflex

Kuten huomaat, nimeäminen on hyvin samanlaista kuin Active Record Callbacks.

Refleksin ilmoittaminen HTML:ssä data-attribuutilla

Nopein tapa ottaa Reflex-toiminnot käyttöön on käyttää komentoa data-refleksi ominaisuus. Syntaksi noudattaa Stimulus-muotoa: [DOM-tapahtuma]->[ReflexClass]#[toiminto]

"="">StimulusReflex-asiakirjat. Huuto kaikille StimulusReflexin kehittämiseen osallistuneille!

Tässä esimerkissä data-refleksi attribuutti osoitti PostRefex luokka ja lisäys menetelmä klikkaa tapahtuma. Täällä me myös ohitimme data-post-id jota voimme myöhemmin käyttää Reflex-luokassa kautta element.dataset[:post_id].

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

post.increment! :likes
end
end

Morphs

Oletusarvoisesti, StimulusReflex päivittää koko sivun (Page morph). Kun ohjaimen toiminto on käsitelty uudelleen, näkymämalli renderöity ja raakahTML lähetetty selaimeen, StimulusReflex käyttää komentoa morphdom kirjaston avulla voit tehdä pienimmän mahdollisen määrän DOM-muutoksia, jotka ovat tarpeen käyttöliittymän päivittämiseksi muutamassa millisekunnissa.

StimulusReflex on kolme erillistä toimintatilaa:

Page Morph - tekee koko sivun päivityksen,
Valitsija Morph - korvaa elementin sisällön,
Ei mitään Morph - suorittaa toimintoja, jotka eivät päivitä sivua (esimerkiksi työntekijän kutsuminen).

Muuttaa meidän PostReflex#increment (lisäys) menetelmää, voimme yksinkertaisesti käyttää morph avainsanaa ja kohdista se osittainen, jonka haluamme päivittää.

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

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

Ajatukseni

Tämä melko lyhyt johdanto riittää aloittamaan matkasi reaktiivisen Railsin kanssa käyttämällä StimulusReflex. Eikö olekin hienoa pystyä luomaan reaktiivinen SPA-sovellus vain muutamalla Ruby-rivillä ja ilman JavaScript:tä? Minusta koko tämä HTML over-the-wire -ajatus on jännittävä, ja aion varmasti kaivaa tätä aihetta tulevaisuudessa. Toistaiseksi suosittelen sinulle lämpimästi StimulusReflex-asiakirjat. Huuto kaikille StimulusReflexin kehittämiseen osallistuneille!

Lue lisää:

Miksi sinun pitäisi (luultavasti) käyttää Typescriptiä?

Miten projektia ei saa tappaa huonoilla koodauskäytännöillä?

Tiedonhakustrategiat NextJS:ssä