StimulusReflex - uma forma rápida de criar aplicações reactivas

É uma nova forma de criar uma interface de utilizador reactiva em Rubi sobre Carris.
O StimulusReflex amplia as capacidades do Rails e do Stimulus, capturando as interações dos utilizadores e transmitindo-as ao Rails através de websockets em tempo real. As páginas são rapidamente renderizadas e todas as actualizações são enviadas para o cliente através do CableReady.

O CableReady permite criar actualizações em tempo real, desencadeando alterações DOM do lado do cliente, eventos e notificações através de ActionCable. Ao contrário do Ajax, as operações nem sempre são iniciadas pelo utilizador ou pelo navegador, por exemplo, podem também ser iniciadas por trabalhadores.

EstímuloReflexo foi originalmente inspirado no LiveView do Phoenix (uma alternativa ao SPA). O objetivo da StimulusReflex sempre foi tornar a construção de aplicações modernas com Rails a opção mais produtiva e agradável disponível. E na minha opinião, isso é exatamente o que eles conseguiram aqui.

Porque é que devemos utilizar o StimulusReflex?

É simples: concentrar-se no desenvolvimento de uma produto em vez de introduzir alterações consistentes nas modernas JavaScript. Também, EstímuloReflexo as aplicações sejam simples, concisas e claras código e integram-se perfeitamente com Ruby on Rails. Isto permite que os pequenos RoR equipas para fazer grandes coisas mesmo sem grandes conhecimentos de React, Vue ou as suas modernas soluções JavaScript.

Como é que o StimulusReflex funciona?

Reflexo

Reflexo é uma atualização transacional da IU que tem lugar através de uma ligação aberta e persistente ao servidor. O StimulusReflex mapeia pedidos para Reflexo classe. Reflexo as classes estão no app/reflexos diretório.

 class PostReflex < ApplicationReflex
 fim


Se criarmos a classe Reflex com um gerador, podemos ver que a nossa classe contém este comentário:

# Todas as instâncias do Reflex incluem CableReady::Broadcaster e expõem as seguintes propriedades:
  #
  # - connection - a conexão ActionCable,
  # - channel - o canal ActionCable,
  # - request - um proxy ActionDispatch::Request para a conexão de soquete,
  # - session - o armazenamento ActionDispatch::Session para o visitante atual,
  # - flash - o ActionDispatch::Flash::FlashHash para o pedido atual,
  # - url - o URL da página que desencadeou o reflexo,
  # - params - parâmetros do formulário mais próximo do elemento (se houver),
  # - element - um objeto do tipo Hash que representa o elemento HTML que desencadeou a reflexão,
  # - assinado - utiliza um ID global assinado para mapear o conjunto de dados atribuído a um modelo, por exemplo, element.signed[:foo],
  # - não assinado - utiliza um ID Global não assinado para mapear o conjunto de dados atribuído a um modelo, por exemplo, element.unsigned[:foo],
  # - cable_ready - um cable_ready especial que pode ser transmitido ao visitante atual (não são necessários parênteses),
  # - reflex_id - um UUIDv4 que identifica exclusivamente cada Reflex.

Como podemos ver, existem algumas propriedades que podem ser utilizadas na nossa classe. A mais interessante no início será a propriedade elemento que contém todos os atributos do elemento DOM do controlador Stimulus, bem como outras propriedades, como tagName, verificado e valor.

EstímuloReflexo também dá nós um conjunto de chamadas de retorno que nos permite controlar os processos do nosso reflexo:

• antes_reflexo
• em torno de_reflexo
• após_reflexo

Como pode ver, a nomenclatura é muito semelhante à das chamadas de retorno de registos activos.

Declarar um Reflexo em HTML com atributo de dados

A forma mais rápida de ativar as acções Reflex é utilizar a opção dados-reflexo atributo. A sintaxe segue o formato Stimulus: [DOM-event]->[ReflexClass]#[ação]

"="">Documentação do StimulusReflex. Um brinde a todas as pessoas envolvidas no desenvolvimento do StimulusReflex!

Neste exemplo, o dados-reflexo apontou o atributo PostRefex e a classe incremento no método clique evento. Aqui também passámos data-post-id que podemos usar mais tarde na classe Reflex através de elemento.conjunto de dados[:post_id].

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

post.increment! :likes
fim
fim

Morfos

Por defeito, EstímuloReflexo atualiza a página inteira (Page morph). Depois de reprocessar a ação do controlador, renderizar o modelo de exibição e enviar o HTML bruto para o navegador, o StimulusReflex usa o morfologia para fazer o menor número de modificações DOM necessárias para atualizar a sua IU em apenas alguns milissegundos.

EstímuloReflexo apresenta três modos de funcionamento distintos:

Transformar página - efectua uma atualização de página inteira,
Seletor Morph - substitui o conteúdo de um elemento,
Nada Morph - executa funções que não actualizam a sua página (por exemplo, chamar o seu empregado).

Para mudar a nossa PostReflex#incremento podemos simplesmente usar o método morfo e selecionar o parcial que queremos atualizar.

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

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

Os meus pensamentos

Esta breve introdução é suficiente para iniciar a sua viagem com Rails reactivos utilizando EstímuloReflexo. Não é fantástico ser capaz de criar uma aplicação SPA reactiva com apenas algumas linhas Ruby e sem JavaScript? Para mim, toda essa idéia de HTML over-the-wire é excitante, e eu definitivamente vou me aprofundar nesse tópico no futuro. Por agora, recomendo vivamente Documentação StimulusReflex. Um brinde a todas as pessoas envolvidas no desenvolvimento do StimulusReflex!

Ler mais:

Porque é que deve (provavelmente) utilizar Typescript

Como não matar um projeto com más práticas de codificação?

Estratégias de obtenção de dados no NextJS