StimulusReflex – fljótleg leið til að búa til reactive-forrit

Þetta er nýr háttur til að búa til reactíft notendaviðmót í Ruby on Rails.
StimulusReflex eykur möguleika Relsar og Stimulus með því að fanga notendaviðskipti og senda þau til Rails í gegnum rauntíma WebSockets. Síður eru fljótt endurstilltar og allar uppfærslur sendar til viðskiptavinarins í gegnum CableReady.

CableReady gerir kleift að búa til rauntímauppfærslur með því að kalla fram DOM-breytingar á viðskiptavinasíðunni, atburði og tilkynningar í gegnum Aðgerðarsnúna. Ólíkt Ajax eru aðgerðir ekki alltaf settar af stað af notandanum; í öðrum vafra, til dæmis, geta þær einnig verið settar af stað af verkamönnum.

örvun-viðbragð var upphaflega innblásið af LiveView frá Phoenix (sem er valkostur við SPA). Markmið StimulusReflex hefur alltaf verið að gera byggingu nútímalegra forrita með Rails sem mest afkastamikla og ánægjulega lausn sem völ er á. Og að mínu mati er þetta nákvæmlega það sem þeim tókst hér.

Af hverju ættum við að nota StimulusReflex?

Það er einfalt, að einbeita sér að þróun á vara í stað þess að kynna samræmdar breytingar í nútíma JavaScript. Einnig, örvun-viðbragð Forrit eru einföld, hnitmiðuð og skýr. kóði og samþætta hnökralaust við Rúbín á Rails. Þetta gerir kleift smá Réttur til afturkomu teams til að gera stórkostlega hluti jafnvel án mikillar þekkingar á React, Vue eða nútímalegum JavaScript-lausnum þeirra.

Hvernig virkar StimulusReflex?

Reflex

Reflex er viðskiptavinaviðmótsuppfærsla sem fer fram yfir varanlega opna tengingu við netþjóninn. StimulusReflex kortleggur beiðnir til Reflex flokkur. Reflex Tímarnir eru í app/viðbrögð skrá.

class PostReflex < ApplicationReflex
 endHljóðskrift


Ef við bjóum til Reflex-flokk með generator, sjáum við að flokkurinn okkar inniheldur þessa athugasemd:

Allar Reflex-dæmigerðir innihalda CableReady::Broadcaster og bjóða upp á eftirfarandi eiginleika:
- connection – ActionCable-tengingin,
- channel – ActionCable-rásin,
- request – ActionDispatch::Request-umboðsmaður fyrir sokkatengingu,
  #   - session – geymsla ActionDispatch::Session fyrir núverandi gest,
  #   - flash – ActionDispatch::Flash::FlashHash fyrir núverandi beiðni,
  #   - url – URL síðunnar sem kallaði fram reflex-ið,
  #   - params – breytur úr næsta formi elementsins (ef einhver er),
  #   - element – Hash-lík hlutur sem táknar HTML-elementið sem kallaði fram viðbragðið,
  #     - signed – notar undirritað Global ID til að kortleggja gagnasafn sem tilheyrir líkani, t.d. element.signed[:foo],
  #     - unsigned – notar ósýndan Global ID til að kortleggja gagnasafn sem tilheyrir líkani t.d. element.unsigned[:foo],
  #   - cable_ready – sérstakt cable_ready sem getur sent út til núverandi gesta (ekki þarf hornklofa),
  #   - reflex_id – UUIDv4 sem auðkennir einstaklega hvern Reflex.HljóðskriftHljóðskrift

Eins og við sjáum eru fáir eiginleikar sem hægt er að nota í bekknum okkar. Sá áhugaverðasti í byrjun verður þáttur Eiginleiki sem inniheldur alla eiginleika DOM-þátta Stimulus-stýrisins sem og aðra eiginleika, eins og Nafn merkis, Athugað og gildi.

örvun-viðbragð gera líka okkur sett af afturköllunarfallum sem gera okkur kleift að stýra ferlum viðbragða okkar:

• áður en taugaviðbragð
• umhverfisviðbragð
• eftir-taugaviðbragð

Eins og þú sérð er nafngiftin mjög svipuð og hjá Active Record Callbacks.

Að tilkynna reflex í HTML með data-eiginleika

Hraðasta leiðin til að virkja Reflex-aðgerðir er með því að nota gagnaspeglun eiginleiki. Setningafræði fylgir Stimulus-sniði: [DOM-atburður]->[ReflexClass]#[aðgerð]

"Skjölun StimulusReflex. Kveðja til allra sem tóku þátt í þróun StimulusReflex!

Í þessu dæmi, the gagnaspeglun eiginleiki benti á Eftir-reflex flokk og aukning aðferð á smelltu viðburður. Hér komumst við líka í gegnum gagnapóstauðkenni sem við getum síðar notað í Reflex-flokknum í gegnum element.dataset[:post_id].

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

post.increment! :likes
end
end

Breytingarmyndir

Að sjálfgefinni stillingu, örvun-viðbragð uppfærir alla síðuna (síðubreyting). Eftir að hafa endurunnnið aðgerðina í stýritækinu, birt sýnarmyndsniðmátið og sent hrátt HTML til vafrans þíns, notar StimulusReflex myndbreytingardómur bókasafn sem gerir sem fæstar nauðsynlegar DOM-breytingar til að endurnýja notendaviðmótið þitt á aðeins nokkrum millisekúndum.

örvun-viðbragð er með þrjá ólíka starfshætti:

Síðubreyting – framkvæmir uppfærslu alls síðunnar,
Valmyndarbreyting – skiptir út efni þáttar,
Ekkert formbreyting – framkvæmir aðgerðir sem uppfæra ekki síðuna þína (til dæmis að kalla starfsmann þinn).

Til að breyta okkar Eftir-endurkast#-aukning aðferð, getum við einfaldlega notað myndbreyting Lykilorð og miða á þann hluta sem við viljum uppfæra.

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

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

Hugsanir mínar

Þessi nokkuð stutta inngangur er nægjanlegur til að hefja ferðalag þitt með reactive Rails með því að nota örvun-viðbragð. Er það ekki frábært að geta búið til reactive SPA-forrit með aðeins nokkrum Ruby-línum og án JavaScript? Fyrir mig er þessi hugmynd um HTML yfir netið spennandi, og ég mun örugglega kafa ofan í þetta efni í framtíðinni. Fyrir nú stendur mæli ég eindregið með því fyrir þig StimulusReflex skjöl. Kveðja til allra sem komu að þróun StimulusReflex!

Lesa meira:

Af hverju þú ættir (líklega) að nota TypeScript

Hvernig á ekki að drepa verkefni með slæmum forritunarvenjum?

Stefnur við gagnaleit í NextJS