$30 off During Our Annual Pro Sale. View Details »

Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発

Jetpack Compose + Decomposeで始めるクロスプラットフォーム開発

Zli 夏の大LT 2021 にて発表

Yuta Tomiyama

July 10, 2021
Tweet

More Decks by Yuta Tomiyama

Other Decks in Programming

Transcript

  1. Jetpack Compose +
    Decomposeで始める
    クロスプラットフォーム開発
    2021/07/10 Zli 大LT

    View Slide

  2. 自己紹介
    HN: マヤミト
    ID: yt8492
    会津大学 学部4年
    去年までZliの代表やってました
    GitHub: https://github.com/yt8492
    趣味: Kotlin, Twitter, ウマ娘に狂う
    後輩に完全にTwitterの人と認識されてしまっており、謎
    深夜帯が賑やかなアカウント
    Twitter: yt8492

    View Slide

  3. Jetpack Compose使ったことある人󰢧

    View Slide

  4. Android以外のCompose使ったことある人󰢧

    View Slide

  5. Jetpack Composeって何?
    - Android のネイティブ UI を構築するための最新のツールキット(公式より)
    https://developer.android.com/jetpack/compose
    - Kotlinと宣言的UIでAndroidのネイティブ開発ができる
    - そろそろstableリリースされる
    - 最近Android界隈で流行っているので調べると記事が結構出てくると思います

    View Slide

  6. Compose for 〇〇 の登場
    - 去年11月、Compose for Desktopが登場
    - Kotlin/JVMで動く
    - Swing上でSkiaを動かしている
    - 今年5月、Compose for Webの登場
    - Kotlin/JSで動く
    - DOMベース
    - Android, Desktop, WebでUIのコード共有が可能に(ココ重要)

    View Slide

  7. UIコード共有の例

    View Slide

  8. UIコード共有の例
    common
    android desktop web

    View Slide

  9. 問題点
    - ルーティングをどうするか
    - Androidにはnavigation-composeがある
    - AndroidのNavigationの仕組みに依存している
    - DesktopとWebどうする🤔
    - ルーターがないとキツイ
    - 既存のライブラリのラッパーを書く?
    - 自分で実装するのはしんどい

    View Slide

  10. Decompose
    - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ
    ジックコンポーネント+ルーターを提供するライブラリ
    - https://github.com/arkivanov/Decompose
    - 豊富な対応target
    - Android
    - JVM
    - iosX64, iosArm64
    - macosX64
    - tvosX64, tvosArm64
    - watchosArm32, watchosArm64, watchosX86, watchosX64
    - JavaScript

    View Slide

  11. Decomposeでルーティングを実装する
    - ルーティングを表す型を定義する
    - 直和型を使うと便利
    - ルーティングに引数をもたせたい場合はここで定義する
    - ルーティングごとのビジネスロジックコンポーネントを定義する
    - ViewModelみたいな役割にするとよさそう?
    - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす

    - ルートのComposable関数でコンポーネントからページごとのComposable関数
    へのマッピングをする

    View Slide

  12. TODOアプリを実装してみよう

    View Slide

  13. ルーティングを表す型を定義する

    View Slide

  14. ルーティングごとのコンポーネントを定義する

    View Slide

  15. ルーティングの型からコンポーネントへマッピングをする

    View Slide

  16. コンポーネントからComposable関数へのマッピング

    View Slide

  17. 今回のリポジトリ
    - 全てを解説していたらLTではなくセッションになってしまうため
    - https://github.com/yt8492/todoCompose
    - 公式のサンプルよりシンプルに作っています
    - 時間なくてもろもろ雑だけどゆるして……

    View Slide

  18. 時間があればデモ

    View Slide

  19. 使ってみた感想
    - Jetpack Composeで型安全にルーティングが実現できて最高〜〜〜〜〜
    - navigation-compose、文字列でのルーティングなのしんどくないすか?
    - Androidだけのプロジェクトでもこれ使いたいレベル
    - Kotlinでのクロスプラットフォーム開発の夢が広がるわね
    - ビジネスロジックのコンポーネントの名前がComponentなのちょっとだけしんどい
    - 宣言的UIだとUIの部品にもcomponentという名前使いがち
    - 初見でどっち?となる
    - 思い切ってViewModelという命名にしてしまうのもアリ?

    View Slide

  20. まとめ
    - Jetpack Composeでクロスプラットフォーム開発をするにはDecomposeがよさそ

    - Jetpack Compose、iOSにも対応してくれという気持ち
    - Kotlin/MPPで全てを実装する未来はすぐそこに(ほんまか?)

    View Slide

  21. あわせて読みたい
    - 過去の登壇資料
    - Kotlin/MPP関連でいっぱい登壇してるのでぜひ参考にしてください
    - https://speakerdeck.com/yt8492

    View Slide