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

iOSDC2021
Initiatives in Rakuma iOS App

【詳細】
Qiita：https://qiita.com/hcrane/items/f16560ebf12b7a12588a
R-Hack：https://commerce-engineer.rakuten.careers/entry/tech/0038
Github：https://github.com/crane-hiromu/CompositionalLayouts-MVP

Transcript

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

   View Slide

2. 2
   About me
   〈Company〉
   ・Rakuten Group, Inc.
   〈 Application 〉
   ・Rakuma
   〈Role〉
   ・iOS Developer
   ・Developer Relations
   〈Account〉
   ・Twitter: @hcrane14
   ・GitHub: @crane-hiromu
   

   View Slide

3. View Slide

4. 4
   iOSDC2021 Pamphlet
   

   View Slide

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

   View Slide

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.
   

   View Slide

7. 7
   App Store app
   Quote: https://developer.apple.com/videos/play/wwdc2019/215/
   

   View Slide

8. 8
   Rakuma iOS app
   

   View Slide

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

   View Slide

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

    View Slide

11. 11
    Reason
    • 作りたい画面を作成するのに向いていない
    1. 縦横スワイプするデザインの場合
    → UICollectionView に相当するものがない
    2. 動的にコンテンツが増える場合（追加読み込み実装）
    → スクロールの offset がデフォルトでとれない
    • 画面の状態を保持できない
    - 特定の動作で画面が自動でリフレッシュされてしまう
    → タブ切り替え
    → 画面遷移
    

    View Slide

12. 12
    Compositional Layouts の実装における課題
    

    View Slide

13. 13
    Simple example
    

    View Slide

14. 14
    Layout example
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 18
    MVP + Clean Architecture with ComposiConal Layouts
    ViewController
    Presenter UseCase Repository DataStore
    Compositional
    Layouts
    

    View Slide

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

    View Slide

20. 20
    MVP + Clean Architecture with Compositional Layouts of Abstraction
    Presenter UseCase Repository DataStore
    ViewController
    ComposiJonal
    Layouts
    

    View Slide

21. 21
    レイアウトの抽象化
    

    View Slide

22. 22
    Layout example
    

    View Slide

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

    View Slide

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

    View Slide

25. 25
    Protocol of Abstraction example
    

    View Slide

26. 26
    Section example
    

    View Slide

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

    View Slide

28. 28
    Before
    After
    

    View Slide

29. View Slide

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

    View Slide

31. 31
    MVP + Clean Architecture with Compositional Layouts of Abstraction
    Presenter UseCase Repository DataStore
    ViewController
    ComposiJonal
    Layouts
    

    View Slide

32. 32
    Abstracted Compositional layouts flow
    Presenter
    ViewController
    Protocol
    Section A
    Section B
    ・
    ・
    ・
    Action
    Layout
    Ac+on
    

    View Slide

33. 33
    Details
    

    View Slide

34. View Slide