このリポジトリは、概念を簡単に紹介し、Reactive Railsの旅に役立つ可能性のある役立つコンテンツを紹介することを目的としています。このリポジトリをウォッチして、Reactive RailsについてWebで公開されている最新情報を入手してください。（コントリビュートは大歓迎です。PRを送ってください。）
Reactive Rails は、Ruby on Railsを使用したWebアプリケーション開発のある設計哲学またはアーキテクチャスタイルを説明するための用語です。このスタイルは、RESTful（aka「vanila」）HTMLサーバーでレンダリングされたアプリケーションと、Rails API + React または他のフロントエンドフレームワークのシングルページアプリケーション（SPA）の真ん中に位置するものです。
Reactive Railsは、フルスタックRails開発者の小さなチームが、サーバーでレンダリングされたHTMLと最小限のJavaScriptを使用して、リッチでリアルタイムのユーザーエクスペリエンスを実現できるようにします。これは、Elixirで書かれたRailsの競合WebフレームワークであるPhoenix LiveViewに（恥じることなく）触発され、小さなチームが大きなことを行えるようにするというRuby on Railsフレームワークのモチベーションとなった精神を尊重しています。
Reactive Railsは、ユーザーのイベントに対する高速な非同期処理（fast asynchronous reaction）を可能にします。これは、最近までReactやAngularなどのフロントエンドフレームワークを使用した場合にのみ可能でした。通常のサーバーでレンダリングされたページリクエストの処理には、少なくとも100〜500ミリ秒かかります。サーバーから送信されたHTMLペイロードを使用してブラウザが画面を再レンダリングするために必要な時間を考慮すると、リクエストサイクルは次のようになります。多くの場合、ミリ秒単位で測定されます。
Reactive Railsアプリでは、ユーザーの操作は通常のHTTPリクエストではなくWebSocketを介してサーバーに渡されます。軽量なハンドラーはサーバー上のアプリケーションの状態を変更し、現在のページが自動的に再レンダリングされてブラウザーに送り返されます。 DOMの差分は、ドキュメント全体を再レンダリングすることなく、新しいアプリケーションの状態を反映するように画面を変更するために使用されます。ベストケースなシナリオの場合、画面は20〜30ミリ秒で更新できます。 200〜300ミリ秒未満のページの更新は、通常、感知できないと見なされています。
このスタイルが「Reactive」と呼ばれるもう1つの理由は、多くの人が行っているように、テンプレートだけでなくコンポーネント指向のビューを追加すると、デザインパターンがReactでアプリを作成するために使用されるものにだんだん似てくることです。主要なプログラミング言語は、JavaScriptではなくRubyのままです。
Reactive Railsは、ActionCableによって可能になります。Turbolinks 5とStimulusJSからも影響を受けていますが、この2つは必ずしも使用する必要はありません。
Reactive Railsの開発を行うために使用できるフレームワークは他にもありますが、最も牽引力と、勢い、コミュニティを備えているのは、Nate Hopkins aka hopsoft によって作成された StimulusReflex です。 これは StimulusJS の基盤の上に大きく構築されています。
StimulusReflexは、Railsを「Reactive」にするために追加されたメインライブラリです。これはStimulusJSに大きく影響を受けており、ブラウザーイベントにフックするための書き方は同じですが、ローカルのJavaScriptベースのコントローラーでアクションをトリガーする代わりに、ActionCableチャネルを介してサーバーでアクションをトリガーします。イベントはサーバー側で受け取りますが、これは "reflex" として実装されています。"reflex" は、主にサーバーの状態の変更に関する軽量なコントローラーのアクションです。
StimulusReflexは、CableReadyの上に構築されています。これは、主にサーバーからブラウザーのDOMを直接制御できるようにすることで、その機能を大幅に強化するActionCableのラッパーです。
ViewComponentは、Githubのメインのモノリスアプリケーションから抽出されたフレームワークであり、「再利用可能、テスト可能、カプセル化」されたビューコンポーネントを構築するために使用されます。ビューコンポーネントを使用すると、Reactive Railsの開発は、ビューを構築するためのコンポーネントクラスに重点が置かれているため、Reactのコードを書いているように感じられます。
ViewComponentReflexを使用すると、ビューコンポーネントコードに reflex を直接書くことができるため、Motionと非常に近い感覚です。
StimulusReflex showcaseチャット、カレンダー、Todoなど、完全なソースコード付き。
ViewComponentReflex showcase には、Local State、ローダー、Todo、およびデータテーブルの例とコードがあります。
Shoelaceを使ったToast-style alerts system
Modern Datatablesは、2つのアプリと動いているデモを備えたリポジトリです。1つはサーバーレンダリングビュー、Stimulus、Stimulus Reflex、Turbolinksを備えた古典的で学校で学ぶようなRailsアプリケーションを備えています。もう1つは、バックエンドAPIとしてRailsを使用し、フロントエンドで完全な静的SPAとしてVue.jsを使用します。
Boxdropは、StimulusReflexを使用して構築されたDropboxクローンであり、StimulusReflexを使用してアプリケーションを構築する方法を示しています。
今日のReactive Railsの（Rails開発者の間での）メインストリームは、Hopsoftの Build a real-time Twitter clone in 10 mins with Rails and StimulusReflex から影響を受けています（ha！） このビデオは、Ruby on Railsが世界をワクワクさせる発端となった、DHHのHow to build a blog engine in 15 minutesと同じようなものです。
Mike McCrackenによるTwitterクローンチュートリアル付きの素晴らしいブログ投稿もあります。
TechmakerTVによるRuby on Rails 6とStimulus Reflexを使用したリアクティブTodoリストの作成 link
Episode #209 - Reactive Applications with Stimulus Reflex by DriftingRuby link to preview
Introduction to StimulusReflex by GoRails link
Create Fast Apps With Stimulus Reflex And RailsBytes Templates In Ruby On Rails 6 by Deanin link
Stimulus Reflex Morph Modes | Selector Morphs with Rails View Components by TechmakerTV link
Two Patterns for Stimulus Reflex form submissions
ブログポストなど。
A future for Rails: StimulusReflexには、チャットアプリのソースが含まれています
Reactive Rails Applications with StimulusReflex
Twitter Clone with StimulusReflex gone Hybrid Native App は、HopsoftによるTwitterクローンのビデオを元に、ネイティブアプリを作ります。
Reactive Map with Rails, Stimulus Reflex and Mapbox は、Reactive Railsを活用してマップアプリケーションをすばやく構築します。
Infinite Horizontal Slider with CableReady and the Intersection Observer API
Lightning fast reactive action with Stimulus Reflex partial morphs introduces morphing in reflexes.
Using Tippy.js with StimulusReflex and CableReady
このワクワクするようなブログ記事は、私がReactive Railsが全てだと、そう思った時に書いたものです。
Announcement of morph in StimulusReflex 3.3は、StimulusReflexコミュニティで、最も率直な意見を持つメンバーの1人であるleastbadによるものです。
Shoelace コンポーネントについて考えたら、事前にパッケージ化されたWebコンポーネントを使用する方がはるかに魅力的ですから。
Optimism drop-in remote form validation.
Futurism lazy-load view partials.
Turbolinks iOS Wrapperは、React Nativeに対するReactive Railsとしてのアンサーになっています。
StimulusComponentsは、便利なStimulusコンポーネントのコレクションです。
StimulusUse by Adrien Polyは、Stimulusコントローラーのための、コンポーザブルな使用方法のコレクションです。
StimulusControllers by Hopsoft は、オートサジェストやクリップボードコピーなどの、便利なStimulusコントローラーのコレクションを備えています。
Stimulus Form Utilities by Hopsoftは、任意の入力フィールドの文字数のカウントや自動テキストフィールドのサイズ変更などの便利なフォームヘルパーのコレクションです。
StimulusReflexGlobalIdは、"reflex"の時にグローバルIDをインスタンス変数に自動的にマップします。
StimulusShortcutは、キーストロークを要素のアクションに簡単にバインドします。
TailwindCSS StimulusComponentsは、Bootstrapのコンポーネントに影響を受けています。
StimulusReflex Testingは、「reflex」のユニットテストをサポートしています。
Motionは、StimulusReflexに最も近く、直接的な代替になるかもしれません。ピュアなRubyを使用したRailsアプリケーションの中に、リアクティブでリアルタイムなフロントエンドUIコンポーネントのための統合されたフレームワークを持ちます。
Matestackも別の選択肢になりえます。
Hyperstackは、Ruby DSLであり、Opalによってコンパイルされ、Webpackによってバンドルされ、Reactによって提供されます。
Snabberb Ruby / Opalで記述され、Snabbdomに基づく最小限のリアクティブフロントエンドWebフレームワークです。
Sockpuppet PythonでDjangoを使用して最新のリアクティブなリアルタイムアプリを構築します。
Reactive Phoenix はElixirで書かれており、「Reactive Rails」のすべてに影響を与えました。
Prismは、RubyとWebAssemblyを使用してWebアプリケーションを作成するためのフレームワークです。
Hat tip to Skatkov for the idea.