StimulusReflex - リアクティブアプリを素早く作成する方法

でリアクティブなユーザー・インターフェイスを作成する新しい方法である。 Ruby on Rails.
StimulusReflex は、ユーザーインタラクションをキャプチャしてリアルタイムのウェブソケット経由で Rails に渡すことにより、Rails と Stimulus の機能を拡張します。ページは迅速に再レンダリングされ、すべての更新は CableReady を介してクライアントに送信されます。

CableReady を使用すると、クライアント側の DOM の変更、イベント、および以下のような通知をトリガーとして、リアルタイムの更新を作成できます。 アクションケーブル.Ajaxとは異なり、操作は常に他のブラウザのユーザーによって開始されるとは限らず、例えばワーカーによって開始されることもある。

刺激反射 はもともとPhoenixのLiveView（SPAの代替）にインスパイアされたものです。StimulusReflexの目標は常に、Railsでモダンなアプリを構築することを最も生産的で楽しい選択肢にすることです。そして私の意見では、これはまさに彼らがここで達成したことです。

なぜStimulusReflexを使う必要があるのか？

単純なことだ。 製品 現代的な一貫した変化を導入するのではなく JavaScript.また、 刺激反射 アプリケーションは、シンプルで簡潔かつ明確である。 コード とシームレスに統合する。 Ruby on Rails.これにより、Reactの知識がなくても、小さなRoRチームが大きな仕事をすることができる、 Vue または最新のJavaScriptソリューション。

StimulusReflexはどのように機能するのですか？

リフレックス

リフレックス は、サーバーへの持続的なオープン接続を介して行われるトランザクションUI更新です。StimulusReflex はリクエストを リフレックス クラスである。 リフレックス クラスは アプリ/反射神経 ディレクトリにある。

 class PostReflex < ApplicationReflex
 終了


ジェネレーターを使ってリフレックス・クラスを作成すると、クラスにはこのようなコメントが含まれていることがわかる：

# すべてのReflexインスタンスはCableReady::Broadcasterを含み、以下のプロパティを公開します：
  #
  # - connection - ActionCable接続、
  # - channel - ActionCableチャンネル、
  # - request - ソケット接続の ActionDispatch::Request プロキシ、
  # - session - 現在の訪問者の ActionDispatch::Session ストアです、
  # - flash - 現在のリクエストの ActionDispatch::Flash::FlashHash です、
  # - url - リフレックスをトリガーしたページのURLです、
  # - params - 要素に最も近いフォームのパラメータ(もしあれば)
  # - element - リフレックスをトリガーしたHTML要素を表すハッシュライクオブジェクト、
  # - signed - 署名されたグローバルIDを使用して、モデルに帰属するデータセットをマッピングします、
  # - unsigned - 符号なしグローバル ID を使用して、モデルに帰属するデータセットをマッピングします、
  # - cable_ready - 現在の訪問者にブロードキャストできる特別なcable_ready（括弧は必要ありません）、
  # - reflex_id - 各Reflexを一意に識別するUUIDv4。

見ての通り、このクラスで使えるプロパティはいくつかある。最初のうちは エレメント プロパティには、刺激コントローラのすべての DOM 要素属性と、次のような他のプロパティが含まれます。 タグ名, チェック済み そして 価値.

刺激反射 また、反射のプロセスをコントロールするためのコールバックも用意されている：

• ビフォア・リフレックス
• アラウンド・リフレックス
• アフターリフレックス

見ての通り、ネーミングはActive Record Callbacksとよく似ている。

HTMLでリフレックスをdata属性で宣言する

リフレックスアクションを有効にする一番早い方法は データ反射 属性に従います。構文はスティミュラスのフォーマットに従う： [DOM-event]->[ReflexClass]#[action]。

"="">StimulusReflexのドキュメント。StimulusReflexの開発に携わったすべての人々にエールを送ります！

この例では データ反射 属性が指摘した。 ポスト・レフェックス クラスと インクリメント メソッドを クリック イベントを開催した。ここでは データ投稿ID を通して、後でリフレックス・クラスで使うことができる。 要素.データセット[:post_id].

class PostsReflex < ApplicationReflex
def increment
post = Post.find(要素.データセット[:post_id])

post.increment！:likes
end
終了

モルフ

デフォルトでは 刺激反射 はページ全体を更新します (Page morph)。コントローラアクションを再処理し、ビューテンプレートをレンダリングし、生の HTML をブラウザに送信した後、StimulusReflex は モーフドム ライブラリを使って、UIをわずか数ミリ秒で更新するために必要な最小限のDOM修正を行う。

刺激反射 は、3つの異なる動作モードを備えている：

ページモーフ - は全ページを更新する、
セレクター・モーフ - 要素の内容を置き換える、
ナッシング・モーフ - は、ページを更新しない関数を実行します（たとえば、従業員を呼び出すなど）。

私たちを変えるために ポストリフレックス1TP63ティンクリメント メソッドを使うことができます。 モーフ キーワードで、更新したいパーシャルを指定する。

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

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

私の考え

を使ったリアクティブRailsの旅を始めるには、この短い紹介だけで十分です。 刺激反射.Rubyを数行書くだけで、JavaScriptを使わずにリアクティブなSPAアプリを作れるなんて、素晴らしいと思いませんか？私にとっては、このHTML over-the-wireというアイデア全体がエキサイティングで、将来このトピックについて必ず掘り下げるつもりだ。今のところは、以下を強くお勧めする。 StimulusReflex ドキュメント.StimulusReflexの開発に携わったすべての人々にエールを送りたい！

続きを読む

おそらく）Typescriptを使うべき理由

悪いコーディング・プラクティスでプロジェクトを潰さないためには？

NextJSのデータフェッチ戦略