Android cookpadLiveの開発改善 / cookpad_tech_kitchen#23

80a3a3857a55f154d23acb705eff72cc?s=47 star_zero
January 30, 2020

Android cookpadLiveの開発改善 / cookpad_tech_kitchen#23

80a3a3857a55f154d23acb705eff72cc?s=128

star_zero

January 30, 2020
Tweet

Transcript

  1. Android cookpadLiveの 開発改善 Cookpad Tech Kitchen #23 2020/01/30

  2. About me •Kenji Abe •2018/07入社 •Android cookpadLive •Google Developers Expert

    for Android •Twitter: @STAR_ZERO
  3. 話すこと •Android cookpadLiveで改善してきた色々なこと ‣ たくさんあるので一部抜粋して •今後やりたいこと

  4. アーキテクチャの変更

  5. VIPER MVVM

  6. VIPER •View / Interactor / Presenter / Entity / Router

    •iOS由来のアーキテクチャ •https://cheesecakelabs.com/blog/ios-project- architecture-using-viper/
  7. View Presenter Interactor Entity Router

  8. VIPERの問題点 •Jetpackとの相性 ‣ これらを活かせないため効率と品質を上げられない ‣ Lifecycleの管理が面倒でクラッシュも起きやすい •コード量が多い ‣ Interfaceによるやりとり ‣

    あちこちにViewの更新コード
  9. MVVM •Model / View / ViewModel •Google 推奨のアーキテクチャ •https://developer.android.com/jetpack/docs/guide

  10. Activity / Fragment ViewModel Repository Room(DB) Retrofit(API) AppSync LiveData

  11. MVVMの良いとこ •Jetpackが活用しやすい ‣ 特にViewModel, LiveData, DataBinding便利 ‣ これらを活用することでバグが減らせる ‣ 効率よく開発できる

    ‣ その他Jetpackライブラリも導入が簡単
  12. Activity / Fragment ViewModel Repository Room(DB) Retrofit(API) AppSync LiveData Jetpack

    Jetpack Jetpack
  13. MVVMの良いとこ •Google推奨(デファクトスタンダード) ‣ 知見やサンプルがたくさんある ‣ 新しく来た人が理解しやすい(可能性が高い) ‣ 去っていく人も次に活かせる(可能性が高い)

  14. Modularization

  15. Single Module Multi Module

  16. Single Module •スマートフォンアプリのみ ‣ AndroidTV / FireTVとコードが重複 •ビルドスピードの問題 •依存関係の絡まり

  17. Multi Module •スマートフォンアプリ、AndroidTV、FireTV ‣ APIアクセスなどは共有 •ビルドスピードの改善 •関心事の分離

  18. app 最初のSingleModule時代

  19. core app 共通部分をcoreに分ける

  20. core smarttv app androidtv firetv AndroidTV / FireTVをプロジェクト統合

  21. core smarttv app androidtv firetv appsync AppSyncをcoreから分離

  22. core smarttv appcore app androidtv firetv appsync app専用の共通モジュールを作成

  23. core smarttv appcore app androidtv firetv features appsync 機能単位にモジュールを分ける

  24. core smarttv appcore app androidtv firetv features appsync 機能単位にモジュールを分ける まだ途中

  25. コメント表示改善

  26. 改善前 •受信したコメントをそのまま表示 ‣ 描画負荷が高い ‣ 場合によってはクラッシュを引き起こす •RecyclerViewのアニメーション ‣ デフォルトがそのまま ‣

    大量のコメントで違和感
  27. 改善後 •受信したコメントを少しバッファリングして表示 ‣ ある程度まとめ描画させて、描画負荷を軽減 •RecyclerViewのアニメーションは無効に ‣ 無効にしたほうが自然な感じ

  28. Activity Repository ViewModel AppSync LiveData

  29. Activity Repository ViewModel AppSync LiveData RxJavaのObservableに変換

  30. Activity Repository ViewModel AppSync LiveData ここで数msバッファリング

  31. Activity Repository ViewModel AppSync LiveData LiveDataでコメントActivityへ

  32. コード自動生成

  33. コード自動生成 •現状、サーバー側がRails Garageを使ってる ‣ 欲しいレスポンスをGETパラメータで指定する ‣ 例: /api/episodes?fields=hoge,foo •面倒なので、Retrofitの戻り値から自動生成 ‣

    Annotation Processing
  34. /api/episodes?fields=hoge,foo interface APIService { @Garage @GET("/api/episodes") fun getEpisodes(): Single<List<Episode>> }

    data class Episode( val hoge: String? val foo: String? ) このアノテーションから自動生成
  35. デバッグツールの活用

  36. デバッグツールの活用 •Hyperion ‣ アプリ実行中にデバッグメニューから色々できる ‣ 設定値をクリアしたり、APIのエンドポイントを切り替え たり ‣ https://github.com/willowtreeapps/Hyperion-Android

  37. None
  38. デバッグツールの活用 •Flipper ‣ デスクトップアプリを使ったデバッグツール ‣ Stethoみたいなもの ‣ ログ、Preferences、Layoutなどの確認 ‣ プラグインを作れる

    ‣ https://fbflipper.com/
  39. None
  40. デバッグツールの活用 •Flipper ‣ プラグインを作成して、ダミーのLive配信 • OkHttp Interceptorでダミーデータを差し込む ‣ 簡単な見た目の確認すぐできる ‣

    ステージングの配信を作る必要がない
  41. None
  42. OkHttp API Server Flipper OkHttp Interceptor レスポンス 書き換え ダミーデータ

  43. 今後やりたいこと

  44. 今後やりたいこと •Coroutinesの導入 •テストを充実 •リソースの整理 •さらなる効率化

  45. ありがとうございました