StimulusReflex - een snelle manier om reactieve apps te maken

Het is een nieuwe manier om een reactieve gebruikersinterface te maken in Ruby on Rails.
StimulusReflex breidt de mogelijkheden van Rails en Stimulus uit door gebruikersinteracties vast te leggen en door te geven aan Rails via realtime websockets. Pagina's worden snel opnieuw gerenderd en alle updates worden via CableReady naar de client gestuurd.

CableReady maakt het mogelijk om realtime updates te maken door client-side DOM-veranderingen, gebeurtenissen en meldingen te triggeren via ActieCabel. In tegenstelling tot Ajax worden bewerkingen niet altijd geïnitieerd door de gebruiker andere browser, ze kunnen bijvoorbeeld ook worden geïnitieerd door workers.

StimulusReflex is oorspronkelijk geïnspireerd door Phoenix's LiveView (een alternatief voor de SPA). Het doel van StimulusReflex is altijd geweest om het bouwen van moderne apps met Rails de meest productieve en plezierige optie te maken die er is. En naar mijn mening is dat precies wat ze hier hebben bereikt.

Waarom zouden we StimulusReflex gebruiken?

Het is eenvoudig, je richten op het ontwikkelen van een product in plaats van consistente veranderingen in moderne JavaScript. Ook, StimulusReflex toepassingen hebben eenvoudige, beknopte en duidelijke code en naadloos integreren met Ruby on Rails. Hierdoor kunnen kleine RoR-teams grote dingen doen, zelfs zonder grote kennis van React, Vue of hun moderne JavaScript oplossingen.

Hoe werkt StimulusReflex?

Reflex

Reflex is een transactionele UI update die plaatsvindt over een persistente open verbinding met de server. StimulusReflex koppelt verzoeken aan Reflex klasse. Reflex klassen zijn in de app/reflexen map.

 klasse PostReflex < ToepassingReflex
 einde


Als we de Reflex class maken met een generator, kunnen we zien dat onze class dit commentaar bevat:

# Alle Reflex-instanties bevatten CableReady::Broadcaster en stellen de volgende eigenschappen beschikbaar:
  #
  # - verbinding - de ActionCable-verbinding,
  # - channel - het ActionCable-kanaal,
  # - request - een ActionDispatch::Request proxy voor de socketverbinding,
  # - session - de ActionDispatch::Session store voor de huidige bezoeker,
  # - flash - de ActionDispatch::Flash::FlashHash voor het huidige verzoek,
  # - url - de URL van de pagina die de reflex triggerde,
  # - params - parameters van het dichtstbijzijnde formulier van het element (indien aanwezig),
  # - element - een Hash-achtig object dat het HTML-element vertegenwoordigt dat de reflex activeerde,
  # - signed - gebruikt een signed Global ID om een dataset toe te wijzen aan een model, bijv. element.signed[:foo],
  # - unsigned - gebruikt een unsigned Global ID om een dataset toegewezen aan een model in kaart te brengen, bijv. element.unsigned[:foo],
  # - cable_ready - een speciale cable_ready die kan uitzenden naar de huidige bezoeker (geen haakjes nodig),
  # - reflex_id - een UUIDv4 die elke Reflex uniek identificeert.

Zoals we kunnen zien, zijn er weinig eigenschappen die gebruikt kunnen worden in onze klasse. De meest interessante in het begin zal de element eigenschap die alle DOM-elementattributen van de Stimulus-controller bevat, evenals andere eigenschappen, zoals tagnaam, gecontroleerd en waarde.

StimulusReflex geeft ons ook een set callbacks waarmee we onze reflexprocessen kunnen besturen:

• voor_reflex
• rond_reflex
• na_reflex

Zoals je kunt zien lijkt de naamgeving erg op die van Active Record Callbacks.

Een Reflex declareren in HTML met data-attribuut

De snelste manier om Reflexacties in te schakelen is door gebruik te maken van de gegevensreflex attribuut. De syntaxis volgt de indeling van Stimulus: [DOM-gebeurtenis]->[ReflexClass]#[action]

"="">StimulusReflex documentatie. Shoutout aan alle mensen die betrokken zijn bij de ontwikkeling van StimulusReflex!

In dit voorbeeld is de gegevensreflex attribuut wees op de PostRefex klasse en de verhoging methode op de klik op evenement. Hier hebben we ook data-post-id die we later kunnen gebruiken in de Reflexklasse via element.dataset[:post_id].

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

post.increment! :vindt leuk
einde
einde

Morphs

Standaard, StimulusReflex werkt de hele pagina bij (Pagina morph). Na het opnieuw verwerken van de controller actie, het renderen van de view template en het sturen van de ruwe HTML naar de browser, gebruikt StimulusReflex de morphdom bibliotheek om het kleinste aantal DOM-aanpassingen uit te voeren die nodig zijn om je UI in slechts enkele milliseconden te vernieuwen.

StimulusReflex heeft drie verschillende werkingsmodi:

Pagina morph - voert een paginagrote update uit,
Keuzemorf - vervangt de inhoud van een element,
Niets Morph - voert functies uit die je pagina niet bijwerken (bijvoorbeeld je medewerker oproepen).

Om onze PostReflex#oeslag methode kunnen we gewoon de morph trefwoord en richt op de partial die we willen bijwerken.

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

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

Mijn gedachten

Deze vrij korte inleiding is voldoende om je reis met reactive Rails te beginnen met behulp van StimulusReflex. Is het niet geweldig om een reactieve SPA app te kunnen maken met slechts een paar Ruby regels en geen JavaScript? Voor mij is dit hele HTML over-the-wire idee opwindend en ik zal in de toekomst zeker dieper op dit onderwerp ingaan. Voor nu kan ik je het volgende van harte aanbevelen StimulusReflex documentatie. Shoutout aan alle mensen die betrokken zijn bij de ontwikkeling van StimulusReflex!

Lees meer:

Waarom je (waarschijnlijk) Typescript zou moeten gebruiken

Hoe help je een project niet om zeep met slechte codeerpraktijken?

Strategieën voor het ophalen van gegevens in NextJS