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

by h.crane

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 iOSDC2021 Pamphlet

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 Rakuma iOS app

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

13 Simple example

Slide 14

Slide 14 text

14 Layout example

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 Rakuma iOS へ導⼊する場合

Slide 17

Slide 17 text

17 MVP + Clean Architecture ViewController Presenter UseCase Repository DataStore

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 レイアウトの抽象化

Slide 22

Slide 22 text

22 Layout example

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

25 Protocol of Abstraction example

Slide 26

Slide 26 text

26 Section example

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 Before After

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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