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
Android cookpadLiveの 開発改善 Cookpad Tech Kitchen #23 2020/01/30
Slide 2
Slide 2 text
About me •Kenji Abe •2018/07入社 •Android cookpadLive •Google Developers Expert for Android •Twitter: @STAR_ZERO
Slide 3
Slide 3 text
話すこと •Android cookpadLiveで改善してきた色々なこと ‣ たくさんあるので一部抜粋して •今後やりたいこと
Slide 4
Slide 4 text
アーキテクチャの変更
Slide 5
Slide 5 text
VIPER MVVM
Slide 6
Slide 6 text
VIPER •View / Interactor / Presenter / Entity / Router •iOS由来のアーキテクチャ •https://cheesecakelabs.com/blog/ios-project- architecture-using-viper/
Slide 7
Slide 7 text
View Presenter Interactor Entity Router
Slide 8
Slide 8 text
VIPERの問題点 •Jetpackとの相性 ‣ これらを活かせないため効率と品質を上げられない ‣ Lifecycleの管理が面倒でクラッシュも起きやすい •コード量が多い ‣ Interfaceによるやりとり ‣ あちこちにViewの更新コード
Slide 9
Slide 9 text
MVVM •Model / View / ViewModel •Google 推奨のアーキテクチャ •https://developer.android.com/jetpack/docs/guide
Slide 10
Slide 10 text
Activity / Fragment ViewModel Repository Room(DB) Retrofit(API) AppSync LiveData
Slide 11
Slide 11 text
MVVMの良いとこ •Jetpackが活用しやすい ‣ 特にViewModel, LiveData, DataBinding便利 ‣ これらを活用することでバグが減らせる ‣ 効率よく開発できる ‣ その他Jetpackライブラリも導入が簡単
Slide 12
Slide 12 text
Activity / Fragment ViewModel Repository Room(DB) Retrofit(API) AppSync LiveData Jetpack Jetpack Jetpack
Slide 13
Slide 13 text
MVVMの良いとこ •Google推奨（デファクトスタンダード） ‣ 知見やサンプルがたくさんある ‣ 新しく来た人が理解しやすい（可能性が高い） ‣ 去っていく人も次に活かせる（可能性が高い）
Slide 14
Slide 14 text
Modularization
Slide 15
Slide 15 text
Single Module Multi Module
Slide 16
Slide 16 text
Single Module •スマートフォンアプリのみ ‣ AndroidTV / FireTVとコードが重複 •ビルドスピードの問題 •依存関係の絡まり
Slide 17
Slide 17 text
Multi Module •スマートフォンアプリ、AndroidTV、FireTV ‣ APIアクセスなどは共有 •ビルドスピードの改善 •関心事の分離
Slide 18
Slide 18 text
app 最初のSingleModule時代
Slide 19
Slide 19 text
core app 共通部分をcoreに分ける
Slide 20
Slide 20 text
core smarttv app androidtv firetv AndroidTV / FireTVをプロジェクト統合
Slide 21
Slide 21 text
core smarttv app androidtv firetv appsync AppSyncをcoreから分離
Slide 22
Slide 22 text
core smarttv appcore app androidtv firetv appsync app専用の共通モジュールを作成
Slide 23
Slide 23 text
core smarttv appcore app androidtv firetv features appsync 機能単位にモジュールを分ける
Slide 24
Slide 24 text
core smarttv appcore app androidtv firetv features appsync 機能単位にモジュールを分ける まだ途中
Slide 25
Slide 25 text
コメント表示改善
Slide 26
Slide 26 text
改善前 •受信したコメントをそのまま表示 ‣ 描画負荷が高い ‣ 場合によってはクラッシュを引き起こす •RecyclerViewのアニメーション ‣ デフォルトがそのまま ‣ 大量のコメントで違和感
Slide 27
Slide 27 text
改善後 •受信したコメントを少しバッファリングして表示 ‣ ある程度まとめ描画させて、描画負荷を軽減 •RecyclerViewのアニメーションは無効に ‣ 無効にしたほうが自然な感じ
Slide 28
Slide 28 text
Activity Repository ViewModel AppSync LiveData
Slide 29
Slide 29 text
Activity Repository ViewModel AppSync LiveData RxJavaのObservableに変換
Slide 30
Slide 30 text
Activity Repository ViewModel AppSync LiveData ここで数msバッファリング
Slide 31
Slide 31 text
Activity Repository ViewModel AppSync LiveData LiveDataでコメントActivityへ
Slide 32
Slide 32 text
コード自動生成
Slide 33
Slide 33 text
コード自動生成 •現状、サーバー側がRails Garageを使ってる ‣ 欲しいレスポンスをGETパラメータで指定する ‣ 例: /api/episodes?fields=hoge,foo •面倒なので、Retrofitの戻り値から自動生成 ‣ Annotation Processing
Slide 34
Slide 34 text
/api/episodes?fields=hoge,foo interface APIService { @Garage @GET("/api/episodes") fun getEpisodes(): Single> } data class Episode( val hoge: String? val foo: String? ) このアノテーションから自動生成
Slide 35
Slide 35 text
デバッグツールの活用
Slide 36
Slide 36 text
デバッグツールの活用 •Hyperion ‣ アプリ実行中にデバッグメニューから色々できる ‣ 設定値をクリアしたり、APIのエンドポイントを切り替え たり ‣ https://github.com/willowtreeapps/Hyperion-Android
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
デバッグツールの活用 •Flipper ‣ デスクトップアプリを使ったデバッグツール ‣ Stethoみたいなもの ‣ ログ、Preferences、Layoutなどの確認 ‣ プラグインを作れる ‣ https://fbflipper.com/
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
デバッグツールの活用 •Flipper ‣ プラグインを作成して、ダミーのLive配信 • OkHttp Interceptorでダミーデータを差し込む ‣ 簡単な見た目の確認すぐできる ‣ ステージングの配信を作る必要がない
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
OkHttp API Server Flipper OkHttp Interceptor レスポンス 書き換え ダミーデータ
Slide 43
Slide 43 text
今後やりたいこと
Slide 44
Slide 44 text
今後やりたいこと •Coroutinesの導入 •テストを充実 •リソースの整理 •さらなる効率化
Slide 45
Slide 45 text
ありがとうございました