2015/10/28 @Gotanda.js #1

1. `redux`と`flux`を比べてみたときの個人的な感想
2015/10/28 @Gotanda.js #1

2. 自己紹介
@ushisantoasobu
ここ１年以上は主にスマートフォンアプリエンジニア
この秋から業務で久しぶりにjsをさわることに

3. 前提
業務でReactのアプリケーションのデモ版みたいなものをつくっ
てるところ
Fluxフレームワークは話題になっていた`redux`で実装した
が、他のとどう違うのかよくわからなかった
Facebook社製の`flux`でも書いてみた

4. 今日話すこと
個人的に感じた`redux`と`flux`の違い
設計思想とかというよりはフレームワークを利用する側の視点で

5. 余談
`redux` => 8179
`flux` => 8841
2015/10/27時点
starの数

6. https://github.com/voronianski/flux-comparison
余談

7. 余談

8. 学習コスト
`redux`のほうが高い
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
（ 注 : `Provider`と`connect`は正しくはreact-redux ）

9. 学習コスト
`redux`のほうが高い
`Provider`
`reducer`
`connect`
=> FluxアーキテクチャとAPIが合致しづらい
（ 注 : `Provider`と`connect`は正しくはreact-redux ）
stateをハンドリングする役割
(以前はstoresという名称だった)

10. 学習コスト
`redux`のほうが高い
=> ルートまわりの初期設定

11. 学習コスト

12. 学習コスト

13. コードの量
`flux`のほうが冗長になる
`flux`使ったときのStore、ここらへんいちいち書かなくちゃいけないの？

14. コードの量
`flux`使ったときのComponent、ここらへんいちいち書かなくちゃいけないの？
`flux`のほうが冗長になる

15. `store`
`redux` => single state tree の設計
`flux` => そのような制限はない（やろうと思えばできるん
だろうけどそういった設計になっていない、はず）
一番重要なところ

16. `store`
`flux-comparison`のデモ

17. `store`
flux
state
state

18. `store`
state
redux

19. `store`
flux

20. `store`
flux
それぞれのcomponentが
stateを管理している

21. `store`
redux

22. `store`
redux
createStoreで生成されたstore内に
アプリケーション全体のstateが保持されている

23. `store`
redux
`redux-router`を使って
ルーティングもstateで管理する

24. `store`
`redux` = single state tree
=> それぞれのコンポーネントは、
I/Fとしてのpropsのみを書いておけばいいので
キレイに保てる
redux

25. `store`
`redux` = single state tree
=> stateの管理がシンプルになる
redux

26. `store`
single state tree って巨大になっていったときにどうなるの？
redux

27. `store`
single state tree って巨大になっていったときにどうなるの？
redux

28. `store`
single state tree って巨大になっていったときにどうなるの？
redux
reducerは分割して管理することが可能

29. `middleware`
時間ないので省略・・・

30. テスト
`action`はただのオブジェクト
`reducer`はpure function
componentは基本propsをもったもの
テストのドキュメントがしっかり整備されている（非同期ま
わりの処理も含む）
`redux`のほうがテストしやすい

31. ご静聴ありがとうございました (＾ω＾) ｾﾌｾﾌ!