複雑なアプリを Redux + MVVMで 完璧に制御する
by
ANDPAD inc
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
複雑なアプリを Redux + MVVMで 完璧に制御する Android/iOS/Flutter
Slide 2
Slide 2 text
自己紹介 柿森 隆生(Kakimori Takao) 2021/03/01 join Qiita: Urotea github: Urotea 興味のあるもの: rust, go, Flutter, Android, iOS, k8s, GCP, react 最近のトレンド: Flutter2.0面白そう 一言で表すなら: Redux芸人
Slide 3
Slide 3 text
宣伝 Android + Reduxアーキテクチャで状態管理が容易になった話 https://qiita.com/Urotea/items/8cbc8f55406b6ff32bbd Reduxの記事 on Qiita 本日の話でReduxに興味を持った方は是非
Slide 4
Slide 4 text
今回のお話 1 複雑なアプリはなぜ複雑なのか 2 複雑なものは抽象化して簡単にする 3 複雑なものをReduxで制御する 4 MVVMとReduxでアプリを制御する
Slide 5
Slide 5 text
結論 Reduxを使うと... - テストがしやすい - 複雑なアプリが整理される - 保守しやすくなる - レビューしやすい
Slide 6
Slide 6 text
0 Reduxって何?
Slide 7
Slide 7 text
アプリの状態管理に特化 したフレームワーク
Slide 8
Slide 8 text
引用: https://www.webopixel.net/javascript/1601.html 1. アプリ外部からのイベントが発火 2. 状態を書き換える 3. 状態が新しくなる 4. 画面に反映される
Slide 9
Slide 9 text
1 複雑なアプリはなぜ複雑なのか
Slide 10
Slide 10 text
複雑なアプリはなぜ複雑なのか 画面が多いから? 通信が多いから? 入力項目が多いから? 権限等ルールが多いから?
Slide 11
Slide 11 text
複雑なアプリはなぜ複雑なのか アプリの状態が複雑 画面が多いから 通信が多いから 入力項目が多いから? 権限等ルールが多いから
Slide 12
Slide 12 text
2 複雑なものは抽象化して簡単にする
Slide 13
Slide 13 text
アプリを抽象化して考える
Slide 14
Slide 14 text
アプリを抽象化して考える
Slide 15
Slide 15 text
これがアプリ
Slide 16
Slide 16 text
これがアプリ Action Action Action Action Action Reducer Reducer Reducer Reducer Reducer State State State
Slide 17
Slide 17 text
3 複雑なものをReduxで制御する
Slide 18
Slide 18 text
Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer
Slide 19
Slide 19 text
Reduxで状態遷移を考える まずは簡単な状態遷移 State State Action Reducer
Slide 20
Slide 20 text
これがRedux fun main(args: Array) { 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
Slide 21
Slide 21 text
Reduxはテストが容易 fun main(args: Array) { 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) } } ただのオブジェクト ただのオブジェクト ただの純関数
Slide 22
Slide 22 text
まとめ アプリとは状態遷移機械である
Slide 23
Slide 23 text
まとめ Reduxは状態遷移機械を 記述するフレームワーク middlewareなどの細かい話は別の機会に
Slide 24
Slide 24 text
あれ?Viewはどこにいった?
Slide 25
Slide 25 text
Reduxは状態遷移機械を 記述するフレームワーク
Slide 26
Slide 26 text
Viewは専門外 別の仕組みでなんとかする!
Slide 27
Slide 27 text
4 MVVMとReduxでアプリを制御する
Slide 28
Slide 28 text
MVVM Model-View-ViewModel
Slide 29
Slide 29 text
MVVM 引用: https://developer.android.com/jetpack/guide?hl=ja View ViewModel Model
Slide 30
Slide 30 text
MVVM View ViewModel Model 画面を操作する場所 画面の状態を管理する場所 それ以外 - API通信 - DB永続化 - ビジネスロジック
Slide 31
Slide 31 text
MVVM Viewを跨ぐ状態はどうする?
Slide 32
Slide 32 text
MVVM Viewに現れない状態はどうする?
Slide 33
Slide 33 text
MVVM View以外は専門外 別の仕組みでなんとかする!
Slide 34
Slide 34 text
MVVM + Redux Redux
Slide 35
Slide 35 text
MVVM Reduxを抽象化 oldState newState Action Reducer subscribe(Rx or coroutine) data binding Redux
Slide 36
Slide 36 text
MVVM Reduxの具体例 oldState newState Action Reducer subscribe(Rx, coroutine) data binding Redux View ViewModel Reducer ログインボタン クリック ログイン Action ログイン 完了状態 ・ボタンAを非表示 ・テキストBを表示
Slide 37
Slide 37 text
実際の言語ではどうする? iOS: ReSwift, RxSwift, RxCocoa Android: ReKotlin, Coroutine, DataBinding Flutter: flutter_redux
Slide 38
Slide 38 text
詳しくは こんな所に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
Slide 39
Slide 39 text
で、実際のところどうなの? Q: プロダクションでの活用事例は? A: 開発人数2人。期間3カ月。WebViewやセンサに触りまくるアプリで実績あります。 Reduxに助けられっぱなしでした(ので、今話してます)。 Q: どのくらいの規模から使用したほうがよい? A: 保守しないなら不要。それ以外では検討価値あり。 Q: メリットは分かった。デメリットは? A: 初期学習コストが少々高い。Redux + Rx + モバイル特有の知識が要求される。 Q: Reduxって記述量やファイル数が増えて大変じゃない? A: 記述量が多いことはコーディングにおいて大した問題じゃない。 役割ごとにファイルが分割されることは gitを前提にするとメリット。