"StimulusReflex" - greitas būdas kurti reactive programas

Tai naujas būdas sukurti reactive vartotojo sąsają Ruby on Rails.
"StimulusReflex" išplečia Bėgiai ir "Stimulus" fiksuojant naudotojų sąveikas ir perduodant jas "Rails" per realaus laiko žiniatinklio lizdus. Puslapiai greitai atvaizduojami iš naujo, o visi atnaujinimai siunčiami klientui per "CableReady".

"CableReady" leidžia kurti atnaujinimus realiuoju laiku, sukeliant kliento pusės DOM pakeitimus, įvykius ir pranešimus per Veiksmo kabelis. Skirtingai nei "Ajax", operacijas ne visada inicijuoja vartotojas, kita naršyklė, pavyzdžiui, jas gali inicijuoti ir darbuotojai.

StimulusReflex iš pradžių įkvėpė "Phoenix LiveView" (SPA alternatyva). "StimulusReflex" tikslas visada buvo padaryti šiuolaikinių programų kūrimą naudojant "Rails" produktyviausiu ir maloniausiu būdu. Mano nuomone, būtent tai jiems pavyko pasiekti.

Kodėl turėtume naudoti "StimulusReflex"?

Tai paprasta - sutelkti dėmesį į produktas vietoj to, kad nuosekliai keistų šiuolaikines JavaScript. Taip pat, StimulusReflex programos yra paprastos, glaustos ir aiškios. kodas ir sklandžiai integruoti su Ruby ant bėgių. Tai leidžia mažiems RoR teams daryti didelius dalykus net ir neturint puikių žinių apie React, Vue arba jų modernius JavaScript sprendimus.

Kaip veikia "StimulusReflex"?

Reflex

Reflex tai transakcinis vartotojo sąsajos atnaujinimas, atliekamas per nuolatinį atvirą ryšį su serveriu. "StimulusReflex" atvaizduoja užklausas į Reflex klasė. Reflex klasės yra programa/refleksai katalogas.

 klasė PostReflex < ApplicationReflex
 end


Jei sukursime "Reflex" klasę su generatoriumi, pamatysime, kad mūsų klasėje yra šis komentaras:

# Visi "Reflex" egzemplioriai apima "CableReady::Broadcaster" ir atskleidžia šias savybes:
  #
  # - ryšys - ActionCable ryšys,
  # - kanalas - "ActionCable" kanalas,
  # - request - "ActionDispatch::Request" įgaliotasis agentas, skirtas lizdo ryšiui,
  # - session - ActionDispatch::Session saugykla, skirta dabartiniam lankytojui,
  # - flash - ActionDispatch::Flash::FlashHash, skirtas dabartinei užklausai,
  # - url - puslapio, kuris sukėlė refleksą, URL,
  # - params - elemento artimiausios formos parametrai (jei yra),
  # - elementas - į "Hash" panašus objektas, žymintis HTML elementą, kuris sukėlė refleksą,
  # - signed - naudoja pasirašytąjį pasaulinį ID, kad atvaizduotų duomenų rinkinį, priskirtą modeliui, pvz., element.signed[:foo],
  # - nepasirašytasis - naudoja nepasirašytąjį pasaulinį ID, kad atvaizduotų modeliui priskirtą duomenų rinkinį, pvz., element.unsigned[:foo],
  # - cable_ready - specialus cable_ready, kuris gali būti transliuojamas dabartiniam lankytojui (skliaustų nereikia),
  # - reflex_id - UUIDv4, kuris unikaliai identifikuoja kiekvieną Reflex.

Kaip matome, yra keletas savybių, kurias galima naudoti mūsų klasėje. Įdomiausia pradžioje bus elementas savybė, kurioje yra visi "Stimulus" valdiklio DOM elemento atributai ir kitos savybės, pvz. tagName, patikrinta ir vertė.

StimulusReflex taip pat pateikia mus grįžtamųjų skambučių rinkinį, leidžiantį valdyti reflekso procesus:

• before_reflex
• aplink_refleksas
• after_reflex

Kaip matote, pavadinimai labai panašūs į "Active Record Callbacks".

"Reflex" deklaravimas HTML su duomenų atributu

Greičiausias būdas įjungti "Reflex" veiksmus - naudoti duomenys-refleksas atributas. Sintaksė atitinka stimulo formatą: [DOM-įvykis]->[ReflexClass]#[veiksmas]

"="">StimulusReflex dokumentacija. Dėkojame visiems žmonėms, dalyvavusiems kuriant "StimulusReflex"!

Šiame pavyzdyje duomenys-refleksas atributas nurodė PostRefex klasė ir padidinti metodą, taikomą spustelėkite renginys. Čia mes taip pat perdavėme data-post-id kurį vėliau galėsime naudoti "Reflex" klasėje per element.dataset[:post_id].

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

post.increment! :likes
end
end

Morfai

Pagal numatytuosius nustatymus, StimulusReflex atnaujina visą puslapį (Puslapis morf). Iš naujo apdorojusi valdiklio veiksmą, atvaizdavimo šabloną ir išsiuntusi neapdorotą HTML į naršyklę, "StimulusReflex" naudoja morfomas biblioteką, kad per kelias milisekundes atliktumėte mažiausiai DOM pakeitimų, reikalingų vartotojo sąsajai atnaujinti.

StimulusReflex turi tris skirtingus veikimo režimus:

Puslapio morfija - atliekamas viso puslapio atnaujinimas,
Pasirinkimo morfija - pakeičia elemento turinį,
Nieko Morph - vykdo funkcijas, kurios neatnaujina puslapio (pvz., iškviečia darbuotoją).

Pakeisti mūsų "PostReflex#increment metodą, galime tiesiog naudoti morph raktinį žodį ir nukreipkite į dalinį, kurį norime atnaujinti.

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

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

Mano mintys

Šios gana trumpos įžangos pakanka, kad pradėtumėte savo kelionę su reactive Rails naudodami StimulusReflex. Argi ne puiku, kad galite sukurti reactive SPA programą naudodami vos kelias "Ruby" eilutes ir be JavaScript? Man visa ši HTML per laidą idėja yra įdomi ir ateityje tikrai gilinsiuosi į šią temą. Kol kas labai rekomenduoju jums StimulusReflex dokumentacija. Dėkojame visiems žmonėms, dalyvavusiems kuriant "StimulusReflex"!

Skaityti daugiau:

Kodėl turėtumėte (tikriausiai) naudoti Typescript

Kaip nesunaikinti projekto dėl blogos kodavimo praktikos?

Duomenų gavimo strategijos "NextJS