Rails reactivo 100% 루비

No soy un desarrollador que se considere serior ni nada parecido,solo tengo cierta experiencea en algunos frameworks web,sobre todo con Ruby on Rails y cuando el cliente asílo demandaba,AngularJS y React.Donde me siento un“desarrollador feliz”es en Rails,un tanto por las bondades de ruby,otro tanto por la forma de trabajar de Rails.Pero debo 존경하는 que la reactividad era algo engorroso de lograr sin caer en las mixturas y aunque ltimamente salieron grandes intentos de la comunidadad como stimulation reflection (a los que aplaudo y agradezco in menzamente por sus aportes aportes y esfuerzos por hacer del Universo Rails un mejor lugar)siempre me quedaba la sensaci ón de que si bien se iba mejorando el c ó mo trabajar la reactividad a únfaltaba un ajuste de tuerca.Es por eso que me puso muy contento encontrar estagema,un gran trabajo de la gente de Motion.그레시아스는 총계로 ellos y a toda la comunidad이다.
La promeza de Motiones muy atractiva "Motion은 순수 Ruby를 사용하여 Rails 응용 프로그램에서 반응식 실시간 프런트엔드 UI 구성 요소를 구축할 수 있습니다."
Poder ser reactivos en Rails escribiendo 100%código ruby y no dejar de ser Rails en el intento,para mi no tiene precio.Quería aclarar que no tengo nada en contra de JS y todo su ecosistema,es sólo una alegraía poder trabajar con el lenguage que me hace sentir mas cómodo.
Instalarla es muy sencillo y solo hay que seguir los pasos que ellos detallan en surepositorioasíque no voy a detenerme en eso,salvo para comentar que se apoyan en otro gran desarrollo como esViewComponentuna gema de la gente de Github que va a estar en el core de Rails desde la version 6.1.
Esta combinación es ganadora,componentes reactivos!
Veamos un ejemplo extraído de su documentación:
El Hola mundo de la reactividad,un boton Contado Reactivio!
불안정 운동

rails g motion:component <component-name>

Vamos a correr este comando que nos generaránuestro componente.Veremos como nos crea una carpeta“components”y dentro de ella nuestros archivos“button_component.rb”donde va a estar nuestra lógica de component y“button_component.html.erb”donde estaránuestro html

> rails g motion:component button

Running via Spring preloader in process 21091
    generate  component
       rails  generate component Button
Running via Spring preloader in process 21096
      create  app/components/button_component.rb
      invoke  test_unit
   identical    test/components/button_component_test.rb
      invoke  erb
      create    app/components/button_component.html.erb
      insert  app/components/button_component.rb

podemos renderizar nuestro componente en cualquier vista que tengamos usando la siguiente linea

<%= render ButtonComponent.new %>

Pongamos un poco de lógica reactiva a nuestro component

class ButtonComponent < ViewComponent::Base
  include Motion::Component

  attr_reader :total

  def initialize(total: 0)
    @total = total
  end

  map_motion :add
  def add
    @total += 1
  end
end

lo importante de aqíes elmap_motion :addque va a ser la unión entre nuestro component HTML y el método en nuestro component ruby
yo estoy usandoBulmapara esta prueba pero puedes usar cualquier framework CSS o including uno.
Agreguemos nuestro HTMLal 구성 요소

<div>
  <span><%= total %></span>
  <%= button_tag "Increment", data: { motion: "add" }, class: "button is-small is-info" %>
</div>

Dos cosas para destacar aqí:
Una limitación es,que todo en nuestro template del component de be tener un nodo principal,en nuestro caso envolvemos todo con un simple div,esto es por como functiona Motion por detrás,muy similar a cómo trabaja React.
La otra cosa para destacar es 데이터: {motion: "add"}es La conección con nuestro component en ruby, es lo que va a disperor el metodo con el mismo nombre.
Y eso es todo lo que necesitamos,con eso deberíamos tener un boton reactivo completamente functional Y sin describir una linea de javascript.

Otro pequeño ejemplo es el clásico escribo y Reaciono,nuestro código podría ser algo como esto:

<div>
  <p>My name is <%= name %>  <%= 'ok!' if @is_ok %></p>
  <input type="text" data-motion="keyup->update" class="input">
</div>

class InputComponent < ViewComponent::Base
  include Motion::Component

  attr_reader :name

  def initialize(name: "")
    @name = name
  end

  map_motion :update
  def update(event)
    new_value = event.current_target.value
    @name = new_value
    @is_ok = new_value == "sebastián"
  end
end

Otras dos cosas para destacar aqí.
Por defecto motion tomar á como 트리거 en input el evento change pero podemos definir qué evento bindear, como se ve en el ejempo ´ data motion='keyup-> update'´estamos binde ando keyup
Otro aspecto interestante es que nuestro mé todo en ruby recibe un ´ event ´como pará metro, donde tenemos disposible datos como el current_target para obtener su valor(en este ejempo)o poder accepter a sus atributos 등...

Imaginen el Potential de esto usando Active Record, Cable Ready, chartkick 등...
그레시아스 폴 레가 하스타 아규.Esto no 가장ser un tutorial o una introductción a Motion, soloera comparitir con ustedes esta herramienta que seguramente va a pasara ser cotidiana en mi trabajo.
디오스 로스 벤디가!