Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CLで取り込み始めた階層的なUiStateについて

 CLで取り込み始めた階層的なUiStateについて

Yoshikane Fumitaka

November 25, 2022
Tweet

More Decks by Yoshikane Fumitaka

Other Decks in Programming

Transcript

  1. GO BEYOND TOGETHER Chief Creative Officer BABY NAIL EXILE EXILE

    THE SECOND 三代目 J SOUL BROTHERS from EXILE TRIBE GENERATIONS from EXILE TRIBE THE RAMPAGE FANTASTICS from EXILE TRIBE BALLISTIK BOYZ from EXILE TRIBE 劇団EXILE DEEP SQUAD DOBERMAN INFINITY Dream Ami Dream Shizuka Happiness 伶 PKCZ DJ DARUMA m-flo MIYAVI Crystal Kay JAY’ED Leola MABU Girls² iScream Lucky² PSYCHIC FEVER ACTOR MODEL ATHLETE AMAZING COFFEE CLで取り込み始めた 階層的なUiStateについて Yoshikane Fumitaka, @black_bracken CyberAgent, Android
  2. GO BEYOND TOGETHER Jetpack ComposeとUiState h Compose• h 新規画面をFragment +

    Composeo h 既存のレイアウトもComposeViewで部分 的に置き換X h ComposeでのUiStateの取り扱€ h 信頼できる唯一の情報源としてVMが持7 h 状態を持つScreenとそうでないScreenを 切り分けてホイスティングすF h UiStateはどのような形で定義する? 状態の流れ
  3. GO BEYOND TOGETHER UiState - flattened ™ data classを使ったUiStateの定F ™

    UIの状態を全て1つのdata classに詰め– ™ メリッp ™ 慣れた方W ™ シンプルな構造なので拡張する上で破綻し にく‡ ™ デメリッp ™ どのプロパティがいつ使われているか文脈 を考慮しておく必要があ– ™ 現状はCLではこちらが多く使われている
  4. GO BEYOND TOGETHER UiState - hierarchized ~ sealed interfaceを使ったUiStateの定e ~

    画面の各状態をそれぞれdata class/objectj ~ 共通の状態はsealed interfaceq ~ UIの状態のモデリングを厳格に行えt ~ メリッA ~ 排他な状態を型で表現できt ~ UI側から不必要なプロパティを隠蔽できt ~ どのタイミングでどの状態が使われるべきか明確 になt ~ 状態遷移時に使われない状態が自動で初期化されt ~ デメリッA ~ 共通化するプロパティが多いと煩雑になt ~ 少しずつ様子を見ながら複数の画面で利用
  5. GO BEYOND TOGETHER まとめ — UiStateを階層的に定義するアプローv — 特に関数単位でコンポーネントを切り分け られるComposeとの噛み合いが良8 —

    画面の複雑さによっては恩恵が薄くな• — 部分的に共通のプロパティが大量にあるよう なケースでなければ採用の価値あり
  6. LIVE CAST ONDEMAND PROGRAM LIVE STREAMING COMMUNITY ありがとうございました Y GitHub

    - android/nowinandroid - feature/foryoe Y https://github.com/android/nowinandroid/blob/main/feature/foryou/src/ main/java/com/google/samples/apps/nowinandroid/feature/foryou/ ForYouInterestsSelectionUiState.kB Y developers - Compose UI を設計すS Y https://developer.android.com/jetpack/compose/ architecture#architecture-events