Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Zli 夏の大LT 2021 にて発表

3c7020b33ae8880dd9514b6469a28ae0?s=128

Yuta Tomiyama

July 10, 2021
Tweet

Transcript

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

  2. 自己紹介 HN: マヤミト ID: yt8492 会津大学 学部4年 去年までZliの代表やってました GitHub: https://github.com/yt8492

    趣味: Kotlin, Twitter, ウマ娘に狂う 後輩に完全にTwitterの人と認識されてしまっており、謎 深夜帯が賑やかなアカウント Twitter: yt8492
  3. Jetpack Compose使ったことある人󰢧

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

  5. Jetpack Composeって何? - Android のネイティブ UI を構築するための最新のツールキット(公式より) https://developer.android.com/jetpack/compose - Kotlinと宣言的UIでAndroidのネイティブ開発ができる

    - そろそろstableリリースされる - 最近Android界隈で流行っているので調べると記事が結構出てくると思います
  6. Compose for 〇〇 の登場 - 去年11月、Compose for Desktopが登場 - Kotlin/JVMで動く

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

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

  9. 問題点 - ルーティングをどうするか - Androidにはnavigation-composeがある - AndroidのNavigationの仕組みに依存している - DesktopとWebどうする🤔 -

    ルーターがないとキツイ - 既存のライブラリのラッパーを書く? - 自分で実装するのはしんどい
  10. Decompose - Kotlin/MPP向けの、プラットフォームに依存しないlifecycle-awareなビジネスロ ジックコンポーネント+ルーターを提供するライブラリ - https://github.com/arkivanov/Decompose - 豊富な対応target - Android

    - JVM - iosX64, iosArm64 - macosX64 - tvosX64, tvosArm64 - watchosArm32, watchosArm64, watchosX86, watchosX64 - JavaScript
  11. Decomposeでルーティングを実装する - ルーティングを表す型を定義する - 直和型を使うと便利 - ルーティングに引数をもたせたい場合はここで定義する - ルーティングごとのビジネスロジックコンポーネントを定義する -

    ViewModelみたいな役割にするとよさそう? - ルートのコンポーネントでルーティングの型からコンポーネントへのマッピングをす る - ルートのComposable関数でコンポーネントからページごとのComposable関数 へのマッピングをする
  12. TODOアプリを実装してみよう

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

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

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

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

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

  18. 時間があればデモ

  19. 使ってみた感想 - Jetpack Composeで型安全にルーティングが実現できて最高〜〜〜〜〜 - navigation-compose、文字列でのルーティングなのしんどくないすか? - Androidだけのプロジェクトでもこれ使いたいレベル - Kotlinでのクロスプラットフォーム開発の夢が広がるわね

    - ビジネスロジックのコンポーネントの名前がComponentなのちょっとだけしんどい - 宣言的UIだとUIの部品にもcomponentという名前使いがち - 初見でどっち?となる - 思い切ってViewModelという命名にしてしまうのもアリ?
  20. まとめ - Jetpack Composeでクロスプラットフォーム開発をするにはDecomposeがよさそ う - Jetpack Compose、iOSにも対応してくれという気持ち - Kotlin/MPPで全てを実装する未来はすぐそこに(ほんまか?)

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