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.
2. 2 About me 〈Company〉 ・Rakuten Group, Inc. 〈 Application 〉 ・Rakuma 〈Role〉 ・iOS Developer ・Developer Relations 〈Account〉 ・Twitter: @hcrane14 ・GitHub: @crane-hiromu
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
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