複雑なアプリを Redux + MVVMで 完璧に制御する

Transcript

1. 複雑なアプリを Redux + MVVMで 完璧に制御する Android/iOS/Flutter

2. 自己紹介 柿森 隆生(Kakimori Takao) 2021/03/01 join Qiita: Urotea github: Urotea

   興味のあるもの: rust, go, Flutter, Android, iOS, k8s, GCP, react 最近のトレンド: Flutter2.0面白そう 一言で表すなら: Redux芸人

3. 宣伝 Android + Reduxアーキテクチャで状態管理が容易になった話 https://qiita.com/Urotea/items/8cbc8f55406b6ff32bbd Reduxの記事 on Qiita
 本日の話でReduxに興味を持った方は是非


4. 今回のお話 1 複雑なアプリはなぜ複雑なのか 2 複雑なものは抽象化して簡単にする 3 複雑なものをReduxで制御する 4 MVVMとReduxでアプリを制御する

5. 結論 Reduxを使うと... - テストがしやすい - 複雑なアプリが整理される - 保守しやすくなる - レビューしやすい

6. ０ Reduxって何？

7. アプリの状態管理に特化 したフレームワーク

8. 引用: https://www.webopixel.net/javascript/1601.html 1. アプリ外部からのイベントが発火 2. 状態を書き換える 3. 状態が新しくなる 4. 画面に反映される

9. 1 複雑なアプリはなぜ複雑なのか

10. 複雑なアプリはなぜ複雑なのか 画面が多いから？ 通信が多いから？ 入力項目が多いから？ 権限等ルールが多いから？

11. 複雑なアプリはなぜ複雑なのか アプリの状態が複雑 画面が多いから 通信が多いから 入力項目が多いから？ 権限等ルールが多いから

12. 2 複雑なものは抽象化して簡単にする

13. アプリを抽象化して考える

14. アプリを抽象化して考える

15. これがアプリ

16. これがアプリ Action Action Action Action Action Reducer Reducer Reducer Reducer

    Reducer State State State

17. 3 複雑なものをReduxで制御する

18. Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer

19. Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer

20. これがRedux fun main(args: Array<String>) { val oldState = AppState(loggedIn =

    false) val newState = loginReducer(oldState, Action.LoginCompleted) print(newState) } sealed class Action { object LoginCompleted: Action() {} } data class AppState(val loggedIn: Boolean) fun loginReducer(oldState: AppState, action: Action): AppState { return when(action) { is Action.LoginCompleted -> oldState.copy(loggedIn = true) } } State State Action Reducer

21. Reduxはテストが容易 fun main(args: Array<String>) { val oldState = AppState(loggedIn =

    false) val newState = loginReducer(oldState, Action.LoginCompleted) print(newState) } sealed class Action { object LoginCompleted: Action() {} } data class AppState(val loggedIn: Boolean) fun loginReducer(oldState: AppState, action: Action): AppState { return when(action) { is Action.LoginCompleted -> oldState.copy(loggedIn = true) } } ただのオブジェクト ただのオブジェクト ただの純関数

22. まとめ アプリとは状態遷移機械である

23. まとめ Reduxは状態遷移機械を 記述するフレームワーク middlewareなどの細かい話は別の機会に

24. あれ？Viewはどこにいった？

25. Reduxは状態遷移機械を 記述するフレームワーク

26. Viewは専門外 別の仕組みでなんとかする！

27. 4 MVVMとReduxでアプリを制御する

28. MVVM Model-View-ViewModel

29. MVVM 引用: https://developer.android.com/jetpack/guide?hl=ja View ViewModel Model

30. MVVM View ViewModel Model 画面を操作する場所 画面の状態を管理する場所 それ以外 - API通信 -

    DB永続化 - ビジネスロジック

31. MVVM Viewを跨ぐ状態はどうする？

32. MVVM Viewに現れない状態はどうする？

33. MVVM View以外は専門外 別の仕組みでなんとかする！

34. MVVM + Redux Redux

35. MVVM Reduxを抽象化 oldState newState Action Reducer subscribe(Rx or coroutine) data

    binding Redux

36. MVVM Reduxの具体例 oldState newState Action Reducer subscribe(Rx, coroutine) data binding

    Redux View ViewModel Reducer ログインボタン クリック ログイン Action ログイン 完了状態 ・ボタンAを非表示 ・テキストBを表示

37. 実際の言語ではどうする？ iOS: ReSwift, RxSwift, RxCocoa Android: ReKotlin, Coroutine, DataBinding Flutter:

    flutter_redux

38. 詳しくは こんな所にReduxの記事とリポジトリが！ Qiita: https://qiita.com/Urotea/items/8cbc8f55406b6ff32bbd Github: https://github.com/Urotea/flutter_template, https://github.com/Urotea/flutter_nfc_sample, https://github.com/Urotea/android-sample-app

39. で、実際のところどうなの？ Q: プロダクションでの活用事例は？ A: 開発人数2人。期間3カ月。WebViewやセンサに触りまくるアプリで実績あります。 Reduxに助けられっぱなしでした(ので、今話してます)。 Q: どのくらいの規模から使用したほうがよい？ A: 保守しないなら不要。それ以外では検討価値あり。

    Q: メリットは分かった。デメリットは？ A: 初期学習コストが少々高い。Redux + Rx + モバイル特有の知識が要求される。 Q: Reduxって記述量やファイル数が増えて大変じゃない？ A: 記述量が多いことはコーディングにおいて大した問題じゃない。 役割ごとにファイルが分割されることは gitを前提にするとメリット。