StimulusReflex - ātrs veids, kā izveidot reactive lietotnes

Tas ir jauns veids, kā izveidot reactive lietotāja saskarni. Ruby on Rails.
StimulusReflex paplašina funkcijas Sliedes un Stimulus, fiksējot lietotāja mijiedarbību un nododot to Rails, izmantojot reāllaika tīmekļa ligzdas. Lapas tiek ātri pārrenderētas un visi atjauninājumi tiek nosūtīti klientam, izmantojot CableReady.

CableReady ļauj izveidot reāllaika atjauninājumus, izraisot klienta puses DOM izmaiņas, notikumus un paziņojumus, izmantojot ActionCable. Atšķirībā no Ajax operācijas ne vienmēr iniciē lietotājs, piemēram, cits pārlūks, tās var iniciēt arī darbinieki.

StimulusReflex sākotnēji tika radīts, iedvesmojoties no Phoenix LiveView (alternatīva SPA). StimulusReflex mērķis vienmēr ir bijis padarīt mūsdienīgu lietojumprogrammu veidošanu ar Rails par visproduktīvāko un patīkamāko pieejamo iespēju. Un, manuprāt, tieši to viņi šeit ir sasnieguši.

Kāpēc mums vajadzētu izmantot StimulusReflex?

Tas ir vienkārši - koncentrēties uz to, lai attīstītu produkts tā vietā, lai ieviestu konsekventas izmaiņas mūsdienu JavaScript. Arī, StimulusReflex lietojumprogrammās ir vienkāršas, kodolīgas un skaidras kods un bez problēmām integrēt ar Rubīns uz sliedēm. Tas ļauj maziem RoR teams veikt lielas lietas pat bez lielām zināšanām par React, Vue vai to modernajiem JavaScript risinājumiem.

Kā darbojas StimulusReflex?

Reflex

Reflex ir UI transakcijas atjauninājums, kas tiek veikts, izmantojot pastāvīgu atvērtu savienojumu ar serveri. StimulusReflex kartē pieprasījumus uz Reflex klase. Reflex klases ir lietotne/refleksi katalogs.

 klase PostReflex < ApplicationReflex
 end


Ja mēs izveidojam Reflex klasi ar ģeneratoru, mēs redzam, ka mūsu klase satur šo komentāru:

# Visi Reflex gadījumi ietver CableReady::Broadcaster un atklāj šādas īpašības:
  #
  # - connection - ActionCable savienojums,
  # - kanāls - ActionCable kanāls,
  # - request - ActionDispatch::Request proxy ligzdas savienojumam,
  # - sesija - pašreizējā apmeklētāja ActionDispatch::Session veikals,
  # - flash - pašreizējā pieprasījuma ActionDispatch::Flash::FlashHash,
  # - url - lapas URL, kas izraisīja refleksu,
  # - params - elementa tuvākās formas parametri (ja tādi ir),
  # - element - Hash līdzīgs objekts, kas atveido HTML elementu, kurš izraisīja refleksu,
  # - signed - izmanto parakstītu globālo ID, lai kartētu datu kopu, kas atribēta modelim, piemēram, element.signed[:foo],
  # - neparakstīts - izmanto neparakstītu globālo ID, lai kartētu datu kopu, kas attiecināta uz modeli, piemēram, element.unsigned[:foo],
  # - cable_ready - īpašs cable_ready, ko var pārraidīt pašreizējam apmeklētājam (iekavas nav vajadzīgas),
  # - reflex_id - UUIDv4, kas unikāli identificē katru Reflex.

Kā redzams, ir dažas īpašības, kuras var izmantot mūsu klasē. Visinteresantākā sākumā būs elements īpašība, kas satur visus Stimulus kontroliera DOM elementa atribūtus, kā arī citas īpašības, piemēram. tagName, pārbaudīts un vērtība.

StimulusReflex sniedz arī mums izsaukumu kopumu, kas ļauj mums kontrolēt refleksu procesus:

• pirms_reflex
• around_reflex
• after_reflex

Kā redzat, nosaukumi ir ļoti līdzīgi aktīvā ieraksta atpakaļsaukumiem.

Refleksa deklarēšana HTML formātā ar datu atribūtu

Ātrākais veids, kā iespējot Reflex darbības, ir, izmantojot data-reflex atribūts. Sintakse atbilst Stimulus formātam: [DOM-event]->[ReflexClass]#[darbība]

"="">StimulusReflex dokumentācija. Paldies visiem StimulusReflex izstrādē iesaistītajiem cilvēkiem!

Šajā piemērā data-reflex atribūts norādīja uz PostRefex klases un palielinājums metode uz noklikšķiniet uz pasākums. Šeit mēs arī nodevām data-post-id ko vēlāk varam izmantot klasē Reflex, izmantojot element.dataset[:post_id].

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

post.increment! :likes
end
end

Morphs

Pēc noklusējuma, StimulusReflex atjaunina visu lapu (Page morph). Pēc kontroliera darbības atkārtotas apstrādes, skata šablona atveidošanas un neapstrādātā HTML nosūtīšanas uz pārlūkprogrammu StimulusReflex izmanto StimulusReflex. morphdom bibliotēku, lai veiktu mazāko DOM modifikāciju skaitu, kas nepieciešams lietotāja interfeisa atsvaidzināšanai tikai dažās milisekundēs.

StimulusReflex ir trīs atšķirīgi darbības režīmi:

Lapas Morph - veic pilnas lappuses atjaunināšanu,
Selektors Morph - aizstāj elementa saturu,
Nekas Morph - izpilda funkcijas, kas neatjaunina lapu (piemēram, izsauc darbinieku).

Lai mainītu mūsu PostReflex#increment metodi, mēs varam vienkārši izmantot morph atslēgvārdu un atlasiet mērķauditoriju daļai, kuru vēlamies atjaunināt.

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

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

Manas domas

Ar šo pavisam īso ievadu pietiek, lai sāktu savu ceļojumu ar reactive Rails, izmantojot StimulusReflex. Vai nav lieliski, ka var izveidot reactive SPA lietojumprogrammu, izmantojot tikai dažas Ruby rindas un bez JavaScript? Man visa šī HTML over-the-wire ideja ir aizraujoša, un nākotnē es noteikti iedziļināšos šajā tēmā. Pagaidām es jums ļoti iesaku StimulusReflex dokumentācija. Paldies visiem cilvēkiem, kas iesaistīti StimulusReflex izstrādē!

Lasīt vairāk:

Kāpēc jums (iespējams) vajadzētu izmantot Typescript

Kā nenogalināt projektu ar sliktu kodēšanas praksi?

Datu iegūšanas stratēģijas NextJS