Cycle.js
https://cycle.js.org/img/cyclejs_logo.svg
最高.js
ryota-ka.icon Everything is an effect.
これはなに
公式サイトから引用
A functional and reactive JavaScript framework for predictable code
Cycle’s core abstraction is your application as a pure function main() where inputs are read effects (sources) from the external world and outputs (sinks) are write effects to affect the external world. These I/O effects in the external world are managed by drivers: plugins that handle DOM effects, HTTP effects, etc.
つまりどういうことだってばよ……!?
effectful なアプリケーション main() が存在する
DOM「ユーザからの入力を受け取りたい!」「描画されている画面を更新したい!」
API「バックエンドにリクエストを送りたい!」「レスポンスを受け取りたい!」
state「現在の state を取得したい!」「state を更新したい!」
history「現在の location が取りたい!」「pushState / replaceState したい!」
エト・ケートラ,エト・ケートラ.
計算自体は副作用を持たない
「こういう effect を起こしたい!」と表明するだけ
driver や higher-order component を使って,effect を handle する
DOM → DOMDriver (npm @cycle/dom)
state → withState (npm @cycle/state)
テスタブル!
DOM → MockDOMDriver
But why?
関心の分離
異なる副作用を別々に扱える
React + Redux + Redux middleware
DOM + state + IO
テスタビリティ
異なる副作用が増えた際の拡張性が高い
built-in 非同期
Redux,お前はなぜ同期的な dispatch しか想定しなかった??
こんなん HERP 以外に production で使ってるとこあるんか!?w
リクルートマーケティングパートナーズ
スタディサプリEnglishのフロントエンド
LegalForce
References