{"id":3615,"date":"2019-04-24T08:53:32","date_gmt":"2019-04-24T08:53:32","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/stimulusreflex-a-quick-way-to-create-reactive-apps\/"},"modified":"2026-04-24T11:28:38","modified_gmt":"2026-04-24T11:28:38","slug":"stimulusreflex-ett-snabbt-satt-att-skapa-reaktiva-appar","status":"publish","type":"post","link":"https:\/\/thecodest.co\/sv\/blog\/stimulusreflex-a-quick-way-to-create-reactive-apps\/","title":{"rendered":"StimulusReflex - ett snabbt s\u00e4tt att skapa reaktiva appar"},"content":{"rendered":"\n

It is new way to create reactive user interface in Ruby on Rails<\/a><\/strong>.
StimulusReflex extends the capabilities of Rails<\/a> and Stimulus by capturing user interactions and passing them to Rails over real-time websockets. Pages are quickly re-rendered and all updates are sent to the client via CableReady.<\/p>\n\n\n\n

CableReady allows to create real-time updates by triggering client-side DOM changes, events and notifications via ActionCable<\/strong>. Unlike Ajax, operations are not always initiated by the user other browser, for example, they can also be initiated by workers.<\/p>\n\n\n\n

StimulusReflex<\/strong> was originally inspired by Phoenix\u2019s LiveView (an alternative to the SPA). StimulusReflex\u2019s goal has always been to make building modern apps with Rails the most productive and enjoyable option available. And in my opinion, this is exactly what they achieved here.<\/p>\n\n\n\n

Why should we use StimulusReflex?<\/h3>\n\n\n\n

It\u2019s simple, to focus on developing a product<\/a> instead of introducing consistent changes in modern JavaScript<\/a>. Also, StimulusReflex<\/strong> applications have simple, concise and clear code<\/a> and integrate seamlessly with Ruby<\/a> on Rails<\/strong>. This allows small RoR<\/a> teams to do big things even without great knowledge of React<\/a>, Vue<\/a> or their modern JavaScript solutions.<\/p>\n\n\n\n

How does StimulusReflex works?<\/h2>\n\n\n\n

Reflex<\/h3>\n\n\n\n

Reflex<\/strong> is a transactional UI update that takes place over a persistent open connection to the server. StimulusReflex maps requests to Reflex<\/strong> class. Reflex<\/strong> classes are in the app\/reflexes<\/code> directory.<\/p>\n\n\n\n

 class PostReflex < ApplicationReflex\n end<\/code><\/code><\/pre>\n\n\n\n

<\/code>If we create Reflex class with a generator, we can see that our class contains this comment:<\/p>\n\n\n\n
# All Reflex instances include CableReady::Broadcaster and expose the following properties:\n  #\n  #   - connection \u2013 the ActionCable connection,\n  #   - channel \u2013 the ActionCable channel,\n  #   - request \u2013 an ActionDispatch::Request proxy for the socket connection,\n  #   - session \u2013 the ActionDispatch::Session store for the current visitor,\n  #   - flash \u2013 the ActionDispatch::Flash::FlashHash for the current request,\n  #   - url \u2013 the URL of the page that triggered the reflex,\n  #   - params \u2013 parameters from the element\u2019s closest form (if any),\n  #   - element \u2013 a Hash-like object that represents the HTML element that triggered the reflex,\n  #     - signed \u2013 uses a signed Global ID to map dataset attributed to a model e.g., element.signed[:foo],\n  #     - unsigned \u2013 uses an unsigned Global ID to map dataset attributed to a model e.g., element.unsigned[:foo],\n  #   - cable_ready \u2013 a special cable_ready that can broadcast to the current visitor (no brackets needed),\n  #   - reflex_id \u2013 a UUIDv4 that uniquely identifies each Reflex.<\/code><\/code><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
As we can see, there are few properties that can be used in our class. The most interesting at the beginning will be the element<\/code> property that contains all of the Stimulus controller\u2019s DOM element attributes as well as other properties, like tagName<\/code>, checked<\/code> and value<\/code>.<\/p>\n\n\n\n
StimulusReflex<\/strong> also gives us<\/a> a set of callbacks to allow us to control our reflex\u2019s processes:<\/p>\n\n\n\n