StimulusReflex - kiire viis reaktiivsete rakenduste loomiseks

See on uus viis reaktiivse kasutajaliidese loomiseks aastal Ruby on Rails.
StimulusReflex laiendab Railsi ja Stimuluse võimalusi, jäädvustades kasutaja interaktsioonid ja edastades need Railsile reaalajas veebisokettide kaudu. Leheküljed renderdatakse kiiresti ümber ja kõik uuendused saadetakse kliendile CableReady kaudu.

CableReady võimaldab luua reaalajas uuendusi, käivitades kliendipoolseid DOM-i muudatusi, sündmusi ja teateid läbi ActionCable. Erinevalt Ajaxist ei ole operatsioonid alati kasutaja poolt algatatud, näiteks võivad neid algatada ka töötajad.

StimulusReflex oli algselt inspireeritud Phoenixi LiveView'st (alternatiiv SPA-le). StimulusReflexi eesmärk on alati olnud muuta kaasaegsete rakenduste ehitamine Railsiga kõige produktiivsemaks ja nauditavamaks võimaluseks. Ja minu arvates on nad siinkohal just seda saavutanud.

Miks peaksime kasutama StimulusReflexi?

See on lihtne, et keskenduda arendama toode selle asemel, et viia sisse järjepidevaid muudatusi kaasaegses JavaScript. Samuti, StimulusReflex rakendused on lihtsad, lühikesed ja selged kood ja integreerida sujuvalt Ruby on Rails. See võimaldab väikestel RoR-meeskondadel teha suuri asju isegi ilma suurte React-teadmisteta, Vue või nende moodsad JavaScript lahendused.

Kuidas StimulusReflex töötab?

Refleks

Refleks on tehinguline kasutajaliidese uuendamine, mis toimub püsiva avatud ühenduse kaudu serveriga. StimulusReflex kaardistab taotlused Refleks klass. Refleks klassid on app/refleksid kataloogi.

 class PostReflex < ApplicationReflex
 end


Kui me loome Reflex klassi generaatoriga, näeme, et meie klass sisaldab seda kommentaari:

# Kõik Reflexi instantsid sisaldavad CableReady::Broadcaster'i ja avaldavad järgmised omadused:
  #
  # - ühendus - ühendus ActionCable,
  # - channel - ActionCable'i kanal,
  # - request - ActionDispatch::Request proxy soketiühenduse jaoks,
  # - session - ActionDispatch::Session store praeguse külastaja jaoks,
  # - flash - ActionDispatch::Flash::FlashHash praeguse taotluse jaoks,
  # - url - reflektsiooni käivitanud lehekülje URL,
  # - params - elemendi lähima vormi parameetrid (kui need on olemas),
  # - element - Hash-taoline objekt, mis kujutab HTML-elementi, mis käivitas refleksi,
  # - signed - kasutab mudelile omistatud andmekogumi kaardistamiseks allkirjastatud globaalset ID-d, nt element.signed[:foo],
  # - unsigned - kasutab mudelile omistatud andmekogumi kaardistamiseks märkimata globaalset ID-d, nt element.unsigned[:foo],
  # - cable_ready - spetsiaalne cable_ready, mida saab edastada praegusele külastajale (sulgusid ei ole vaja),
  # - reflex_id - UUIDv4, mis identifitseerib üheselt iga refleksi.

Nagu näeme, on vähe omadusi, mida saab meie klassis kasutada. Kõige huvitavam on alguses element omadus, mis sisaldab kõiki Stimuluse kontrolleri DOM-elemendi atribuute, samuti muid omadusi, näiteks tagName, kontrollitud ja väärtus.

StimulusReflex annab meile ka hulga tagasikutseid, mis võimaldavad meil kontrollida meie reflekside protsesse:

• before_reflex
• around_reflex
• after_reflex

Nagu näete, on nimetamine väga sarnane Active Record Callbacks'ile.

Refleksi deklareerimine HTML-is andmeatribuudiga

Kõige kiirem viis refleksitegevuste lubamiseks on kasutada käsku andmerefleks atribuut. Süntaks järgib Stimuluse vormingut: [DOM-event]->[ReflexClass]#[action]

"="">StimulusReflex dokumentatsioon. Kiitus kõigile StimulusReflexi arendamisse kaasatud inimestele!

Selles näites on andmerefleks atribuut osutas PostRefex klassi ja juurdekasv meetodi kohta kliki sündmus. Siin me ka möödasime data-post-id mida saame hiljem kasutada Reflex klassis läbi element.dataset[:post_id].

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

post.increment! :likes
end
end

Morphs

Vaikimisi, StimulusReflex uuendab kogu lehekülge (lehekülje morph). Pärast kontrolleri tegevuse ümbertöötlemist, vaate malli renderdamist ja toore HTML-i saatmist brauserile kasutab StimulusReflex morphdom raamatukogu, et teha väikseim arv DOM-muudatusi, mis on vajalikud teie kasutajaliidese värskendamiseks vaid mõne millisekundi jooksul.

StimulusReflex on kolm erinevat töörežiimi:

Page Morph - teostab täies leheküljes uuenduse,
Selector Morph - asendab elemendi sisu,
Miski Morph - täidab funktsioone, mis ei uuenda teie lehte (näiteks kutsub teie töötajat).

Et muuta meie PostReflex#increment meetodit, saame lihtsalt kasutada morf võtmesõna ja sihtmärgiks osaline, mida me tahame uuendada.

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

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

Minu mõtted

See üsna lühike sissejuhatus on piisav, et alustada oma teekonda reaktiivse Rails'i kasutamisega. StimulusReflex. Kas pole mitte suurepärane võimalus luua reaktiivne SPA-rakendus vaid mõne Ruby-reaga ja ilma JavaScript-ta? Minu jaoks on kogu see HTML over-the-wire idee põnev ja ma kindlasti kaevun tulevikus sellesse teemasse. Praegu soovitan ma teile väga StimulusReflex dokumentatsioon. Shoutout kõigile StimulusReflexi arendamisse kaasatud inimestele!

Loe edasi:

Miks peaksite (tõenäoliselt) kasutama Typescript'i

Kuidas mitte tappa projekti halbade kodeerimistavadega?

NextJS-i andmete hankimise strateegiad