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

20210621-mftd-GoogleIORecap-Namazu

8f28c7c053fc1e0453475a0b930f2e4b?s=47 Namazu
June 21, 2021

 20210621-mftd-GoogleIORecap-Namazu

8f28c7c053fc1e0453475a0b930f2e4b?s=128

Namazu

June 21, 2021
Tweet

Other Decks in Technology

Transcript

  1. © 2021 eureka, Inc. All Rights Reserved. 初めての Jetpack Compose

    【3社合同】Money Forward Tech Drive - #IO21 Recap 2021.6.21 Namazu @eureka
  2. © 2021 eureka, Inc. All Rights Reserved. 自己紹介 • Namazu

    • 2021年新卒Androidエンジニア •   BlondeNamazu •   @blonde_namazu
  3. © 2021 eureka, Inc. All Rights Reserved.

  4. 4 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting コミュニティチャット © 2021 eureka, Inc. All Rights Reserved. 新機能
  5. 5 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting • Jetpack Composeとは? • Jetpack Compose移行のメリット • Jetpack Compose移行のコスト • まとめ 目次 © 2021 eureka, Inc. All Rights Reserved.
  6. 6 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Composeとは? © 2021 eureka, Inc. All Rights Reserved.
  7. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •

    Googleが提供する宣言的UIツールキット • 既存のxmlベースのViewシステムの代替となる • 2021年7月に1.0 (stable) 配信予定! • 既に導入している企業も多数
  8. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •

    Jetpack Composeの例
  9. © 2021 eureka, Inc. All Rights Reserved. Jetpack Composeとは? •

    Jetpack Composeの例
  10. 10 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のメリット © 2021 eureka, Inc. All Rights Reserved.
  11. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット 宣言的UI

    SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
  12. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:宣言的UI 宣言的UI

    SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
  13. © 2021 eureka, Inc. All Rights Reserved. • 宣言的UIとは何か? ◦

    “Single source of truth”に従う ◦ 与えられた状態に対してのみ依存し、一意に振る舞いが定まるUI ◦ 既存のxmlベースのViewシステムのような、状態に対応したUIの生成方法を記 述する手法とは異なる Jetpack Compose移行のメリット:宣言的UI
  14. © 2021 eureka, Inc. All Rights Reserved. • 各Viewが状態を持ち、コードでそれぞれ更新していく仕組みは複雑 Jetpack

    Compose移行のメリット:宣言的UI
  15. © 2021 eureka, Inc. All Rights Reserved. • 宣言的UIではUIは与えられた状態に対して不変なViewを生成する Jetpack

    Compose移行のメリット:宣言的UI
  16. © 2021 eureka, Inc. All Rights Reserved. • Jetpack Composeの利点:表示ロジックのカプセル化

    ◦ Compose関数の中身に外部から アクセスすることは出来ない ◦ 意図しないUIのバグを未然に防ぐ Jetpack Compose移行のメリット:宣言的UI
  17. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール 宣言的UI

    SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
  18. © 2021 eureka, Inc. All Rights Reserved. Compose Preview •

    UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
  19. © 2021 eureka, Inc. All Rights Reserved. Compose Preview •

    UIパーツ単位でプレビュー出来る • @Preview を付けるだけ! • 同時に様々なパターンをプレビューす ることが可能 ex) Light Theme / Dark Theme スクリーン全体 / UI単体 Jetpack Compose移行のメリット:デザインツール
  20. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:デザインツール Sample

    Data • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
  21. © 2021 eureka, Inc. All Rights Reserved. Sample Data Jetpack

    Compose移行のメリット:デザインツール • UIに与える状態について様々なパター ンを同時に検証可能 ex) リストのデータ数 0/少/多 文字列長 0/短/長
  22. © 2021 eureka, Inc. All Rights Reserved. Interactive Preview Jetpack

    Compose移行のメリット:デザインツール • プレビュー画面でユーザー操作に対応 するUIの挙動を確認可能
  23. © 2021 eureka, Inc. All Rights Reserved. Live literals Jetpack

    Compose移行のメリット:デザインツール • リテラルの変更を即座にプレビューに 反映 ex) テキスト、数値、色、etc…
  24. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のメリット:その他 宣言的UI

    SSOT デザインツール Compose Preview Sample Data Interactive Preview Live literals その他 Theming Fast Rendering Animation Preview
  25. © 2021 eureka, Inc. All Rights Reserved. • Material Designに基づくアプリ独自のテーマ

    • ネストされたUIの描画パフォーマンスの向上 • アニメーションサポートの強化 Jetpack Compose移行のメリット:その他
  26. 26 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting Jetpack Compose移行のコスト © 2021 eureka, Inc. All Rights Reserved.
  27. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト xmlベースのViewシステムと共存可能なので、徐々に移行できる!

  28. © 2021 eureka, Inc. All Rights Reserved. Jetpack Compose移行のコスト Compose

    in XML, XML in Composeのどちらも可能!
  29. 29 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting まとめ © 2021 eureka, Inc. All Rights Reserved.
  30. © 2021 eureka, Inc. All Rights Reserved. まとめ • Jetpack

    Composeとは宣言的UIツールキットである • Jetpack Compose移行のメリットは多数! ◦ 宣言的UIの実現 ◦ デザインツールのサポートが強力 ◦ テーマの一貫性が保てる • Jetpack ComposeはxmlベースのViewシステムと 共存可能なので、徐々に移行可能!
  31. © 2021 eureka, Inc. All Rights Reserved. 関連セッション

  32. 32 © 2021 eureka, Inc. All Rights Reserved. CONFIDENTIAL INFORMATION:

    Not for Public Distribution - Do Not Copy All Hands Meeting 関連セッション © 2021 eureka, Inc. All Rights Reserved.
  33. © 2021 eureka, Inc. All Rights Reserved. 関連セッション What’s new

    in Jetpack Compose • Jetpack Composeの概要を16分で説明 • まずはこれを見るのがオススメ
  34. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack

    Composeの基本的な使い方を 教えてくれるWorkShop • 50分あるが、非常に分かりやすい Jetpack Basics
  35. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • 既存のJetpackライブラリとComposeの

    組み合わせ方を説明 • Composeのベストプラクティスにも触れて いるので、実用に役立ちそう Using Jetpack Libraries in Compose
  36. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • セッション後半でJetpack

    Composeのデ ザインツールについて説明 • 前半の内容はComposeに関係ないが、 アニメーションに関してのアップデートも面 白かったので余裕があれば是非 What’s new in design tools
  37. © 2021 eureka, Inc. All Rights Reserved. 関連セッション • Jetpack

    Compose中でマテリアルデザイ ンを用いる方法の説明 • デザイナーの参考にもなりそう Build beautiful Material Design apps with Jetpack Compose