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

iOSDC2021 - Compositional Layoutsで実現する疎結合な実装

7a0bc9670ff654b04d4361a9afd1bba8?s=47 h.crane
September 17, 2021

iOSDC2021 - Compositional Layoutsで実現する疎結合な実装

7a0bc9670ff654b04d4361a9afd1bba8?s=128

h.crane

September 17, 2021
Tweet

Transcript

  1. Compositional Layoutsで実現する疎結合な実装 Sep 17th, 2021 Hiromu Tsuruta EC Incubation Development

    Dept. Rakuten Group, Inc.
  2. 2 About me 〈Company〉 ・Rakuten Group, Inc. 〈 Application 〉

    ・Rakuma 〈Role〉 ・iOS Developer ・Developer Relations 〈Account〉 ・Twitter: @hcrane14 ・GitHub: @crane-hiromu
  3. 3

  4. 4 iOSDC2021 Pamphlet

  5. 5 Compositional Layouts を使っていますか?

  6. 6 What is Composi'onal Layouts ? Quote: https://developer.apple.com/documentation/uikit/views_and_controls/collection_views/layouts Overview A

    collection view layout defines the visual arrangement of the content in your collection. Layouts are designed to be flexible to let you create any kind of arrangement you need for your content, from simple to complex. The simplest type of collection view layout displays its items in a grid, but you can define layouts to arrange items however you like. For example, you might create a layout where items are arranged in a circle or vary in size. You can also change layouts dynamically at runtime whenever you need to present items differently, such as when a user rotates the device. Collection view layouts are customizable and highly visual. For example, the App Store app uses a single collection view with custom layouts per section to showcase different kinds of content.
  7. 7 App Store app Quote: https://developer.apple.com/videos/play/wwdc2019/215/

  8. 8 Rakuma iOS app

  9. 9 なぜ SwiftUI を選択しなかったのか

  10. 10 技術選定時、iOS13 での Swi7UI は未成熟であった

  11. 11 Reason • 作りたい画面を作成するのに向いていない 1. 縦横スワイプするデザインの場合 → UICollectionView に相当するものがない 2.

    動的にコンテンツが増える場合(追加読み込み実装) → スクロールの offset がデフォルトでとれない • 画面の状態を保持できない - 特定の動作で画面が自動でリフレッシュされてしまう → タブ切り替え → 画面遷移
  12. 12 Compositional Layouts の実装における課題

  13. 13 Simple example

  14. 14 Layout example

  15. 15 レイアウトが増えると ViewController が肥⼤化する

  16. 16 Rakuma iOS へ導⼊する場合

  17. 17 MVP + Clean Architecture ViewController Presenter UseCase Repository DataStore

  18. 18 MVP + Clean Architecture with ComposiConal Layouts ViewController Presenter

    UseCase Repository DataStore Compositional Layouts
  19. 19 実装を分離して、疎結合な実装にすることで肥⼤化を防ぐ

  20. 20 MVP + Clean Architecture with Compositional Layouts of Abstraction

    Presenter UseCase Repository DataStore ViewController ComposiJonal Layouts
  21. 21 レイアウトの抽象化

  22. 22 Layout example

  23. 23 Abstraction of layout Section A Protocol Section C Sec+on

    B
  24. 24 レイアウトごとにコードを隠蔽化

  25. 25 Protocol of Abstraction example

  26. 26 Section example

  27. 27 呼び出し元を⼀元化できる

  28. 28 Before After

  29. 29

  30. 30 レイアウトが増えてもコードが増えず肥⼤化しない

  31. 31 MVP + Clean Architecture with Compositional Layouts of Abstraction

    Presenter UseCase Repository DataStore ViewController ComposiJonal Layouts
  32. 32 Abstracted Compositional layouts flow Presenter ViewController Protocol Section A

    Section B ・ ・ ・ Action Layout Ac+on
  33. 33 Details

  34. None