StimulusReflex: una forma rápida de crear aplicaciones reactivas

Es una nueva forma de crear una interfaz de usuario reactiva en Ruby on Rails.
StimulusReflex amplía las capacidades de Rails y Stimulus capturando las interacciones del usuario y pasándolas a Rails a través de websockets en tiempo real. Las páginas se vuelven a renderizar rápidamente y todas las actualizaciones se envían al cliente a través de CableReady.

CableReady permite crear actualizaciones en tiempo real activando cambios en el DOM del lado del cliente, eventos y notificaciones a través de ActionCable. A diferencia de Ajax, las operaciones no siempre son iniciadas por el usuario otro navegador, por ejemplo, también pueden ser iniciadas por los trabajadores.

EstímuloReflejo se inspiró originalmente en LiveView de Phoenix (una alternativa a SPA). El objetivo de StimulusReflex siempre ha sido hacer que la construcción de aplicaciones modernas con Rails sea la opción más productiva y agradable disponible. Y en mi opinión, esto es exactamente lo que han conseguido aquí.

¿Por qué utilizar StimulusReflex?

Es sencillo, centrarse en desarrollar una producto en lugar de introducir cambios coherentes en JavaScript. También, EstímuloReflejo aplicaciones sean sencillas, concisas y claras código e integrarse perfectamente con Ruby on Rails. Esto permite a pequeños equipos de RoR hacer grandes cosas incluso sin grandes conocimientos de React, Vue o sus modernas soluciones JavaScript.

¿Cómo funciona StimulusReflex?

Reflejo

Reflejo es una actualización transaccional de la interfaz de usuario que tiene lugar a través de una conexión abierta persistente con el servidor. StimulusReflex asigna solicitudes a Reflejo clase. Reflejo clases están en el app/reflejos directorio.

 class PostReflex < ApplicationReflex
 fin


Si creamos la clase Reflex con un generador, podemos ver que nuestra clase contiene este comentario:

# Todas las instancias de Reflex incluyen CableReady::Broadcaster y exponen las siguientes propiedades:
  #
  # - connection - la conexión de ActionCable,
  # - channel - el canal de ActionCable,
  # - request - un proxy ActionDispatch::Request para la conexión socket,
  # - session - el almacén ActionDispatch::Session para el visitante actual,
  # - flash - el ActionDispatch::Flash::FlashHash para la solicitud actual,
  # - url - la URL de la página que desencadenó el reflejo,
  # - params - parámetros del formulario más cercano del elemento (si existe),
  # - element - un objeto tipo Hash que representa el elemento HTML que desencadenó el reflejo,
  # - signed - utiliza un ID global firmado para asignar el conjunto de datos atribuido a un modelo, por ejemplo, element.signed[:foo],
  # - unsigned - utiliza un ID global sin signo para asignar el conjunto de datos atribuido a un modelo, por ejemplo, element.unsigned[:foo],
  # - cable_ready - un cable_ready especial que puede emitir al visitante actual (no necesita paréntesis),
  # - reflex_id - un UUIDv4 que identifica unívocamente cada Reflex.

Como vemos, son pocas las propiedades que podemos utilizar en nuestra clase. La más interesante al principio será la elemento que contiene todos los atributos del elemento DOM del controlador Stimulus, así como otras propiedades, como tagName, comprobado y valor.

EstímuloReflejo también nos proporciona un conjunto de callbacks que nos permiten controlar los procesos de nuestro reflejo:

• antes_del_reflejo
• alrededor_del_reflejo
• after_reflex

Como puede ver, la nomenclatura es muy similar a la de las retrollamadas de Active Record.

Declarar un reflejo en HTML con el atributo data

La forma más rápida de activar las acciones Reflex es utilizando la función datos-reflex atributo. La sintaxis sigue el formato Estímulo: [DOM-event]->[ReflexClass]#[action]

"="">Documentación de StimulusReflex. ¡Un saludo a todas las personas involucradas en el desarrollo de StimulusReflex!

En este ejemplo, el datos-reflex señaló el atributo PostRefex y la clase incrementar en el haga clic en evento. Aquí también pasamos data-post-id que más tarde podremos utilizar en la clase Reflex a través de element.dataset[:post_id].

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

¡post.increment! :likes
end
end

Morphs

Por defecto, EstímuloReflejo actualiza toda la página (Page morph). Después de reprocesar la acción del controlador, renderizar la plantilla de vista y enviar el HTML sin procesar al navegador, StimulusReflex utiliza la función morphdom para realizar el menor número de modificaciones del DOM necesarias para actualizar la interfaz de usuario en unos pocos milisegundos.

EstímuloReflejo presenta tres modos de funcionamiento distintos:

Morph de página - realiza una actualización a toda página,
Selector Morph - sustituye el contenido de un elemento,
Nada Morph - ejecuta funciones que no actualizan su página (por ejemplo, llamar a su empleado).

Para cambiar nuestro PostReflex1TP65Incremento podemos utilizar simplemente el método morph y apuntar al parcial que queremos actualizar.

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

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

Lo que pienso

Esta breve introducción es suficiente para comenzar tu viaje con Rails reactivo utilizando EstímuloReflejo. ¿No es genial poder crear una aplicación SPA reactiva con sólo unas pocas líneas de Ruby y sin JavaScript? Para mí, toda esta idea de HTML over-the-wire es emocionante, y definitivamente voy a profundizar en este tema en el futuro. Por ahora, te recomiendo Documentación sobre StimulusReflex. Muchas gracias a todos los que han participado en el desarrollo de StimulusReflex.

Más información:

Por qué debería (probablemente) utilizar Typescript

¿Cómo no matar un proyecto con malas prácticas de codificación?

Estrategias de obtención de datos en NextJS