Slide 1

Slide 1 text

SwiftUI×TCAリアーキからみえた
 コーディング視点の開発者体験
 2022.11.10
 Maiko Morisaki


Slide 2

Slide 2 text

00
 自己紹介
 ©NewsPicks Inc. All Rights Reserved. 
 Maiko Morisaki
 iOS Engineer たまに Flutterを書く 
 _asa08_
 _asa08_
 
 iOSDC 
 2019スタッフ
 2020登壇(40分でわかるライブ配信)


Slide 3

Slide 3 text

前話し
 目次
 01
 02
 03
 04
 今は昔…
 リアーキで
 受けた恩恵
 心もコードも
 健全に


Slide 4

Slide 4 text

©NewsPicks Inc. All Rights Reserved. 
 01
 前話し


Slide 5

Slide 5 text

01 前話し
 コーディング体験ベースの話がしたい 
 以前はどのような状況だったか 
 リアーキテクチャでのコーディングの体験はどうか 
 
 SwiftUI
 宣言的UIフレームワーク 
 The Composable Architecture(TCA) 
 Redux Likeなシステムアーキテクチャを提供するフレームワーク 
 


Slide 6

Slide 6 text

©NewsPicks Inc. All Rights Reserved. 
 02
 今は昔… ‐ UI


Slide 7

Slide 7 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース


Slide 8

Slide 8 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース
 赤:Viewの階層構造 
 黄:レイアウトの設定 
 青:コンポーネント一覧 


Slide 9

Slide 9 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース
 コードをみるとhtmlのような感じになっている 
 同時に同じxibをいじると勿論競合が発生するが、これを手で直さなけ ればいけない


Slide 10

Slide 10 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース
 コードをみるとhtmlのような感じになっている 
 同時に同じxibをいじると勿論競合が発生するが、これを手で直さなけ ればいけない
 GitHub上でのコードレビューが難しい 
 同じ画面の同時編集ができない 


Slide 11

Slide 11 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース
 コードをみるとhtmlのような感じになっている 
 同時に同じxibをいじると勿論競合が発生するが、これを手で直さなけ ればいけない
 GitHub上でのコードレビューが難しい 
 同じ画面の同時編集ができない 


Slide 12

Slide 12 text

01 今は昔 ‐ UI
 コードベース
 GUI(Xib)ベース
 コードをみるとhtmlのような感じになっている 
 同時に同じxibをいじると勿論競合が発生するが、これを手で直さなけ ればいけない
 GitHub上でのコードレビューが難しい 
 同じ画面の同時編集ができない 
 View階層やレイアウト設定の確認が大変 


Slide 13

Slide 13 text

01 今は昔 ‐ UI
 デザインの印象以上に大変
 チーム開発でボトルネックになることがある


Slide 14

Slide 14 text

01 今は昔 ‐ UI
 SwiftUI!


Slide 15

Slide 15 text

©NewsPicks Inc. All Rights Reserved. 
 02
 今は昔… ‐ UnitTest


Slide 16

Slide 16 text

01 今は昔 ‐ UnitTest
 UnitTestがあると
 既存の複雑なロジックの修正もある程度 の安心がある
 何のテストを書くか
 意味のあるテストを書くために何をテスト するか明確になっているといい 
 テストを書くには
 テストが書ける設計になっている必要が ある


Slide 17

Slide 17 text

01 今は昔 ‐ UnitTest
 UnitTestがあると
 既存の複雑なロジックの修正もある程度 の安心がある
 何のテストを書くか
 意味のあるテストを書くために何をテスト するか明確になっているといい 
 テストを書くには
 テストが書ける設計になっている必要が ある


Slide 18

Slide 18 text

01 今は昔 ‐ UnitTest
 The Composable Architecture!


Slide 19

Slide 19 text

©NewsPicks Inc. All Rights Reserved. 
 03
 リアーキで受けた恩恵


Slide 20

Slide 20 text

03
 UI
 03 リアーキで受けた恩恵 
 SwiftUI
 GtiHub上でのレビューが難しい 
 Viewの階層やレイアウトの確認が大変 
 同じ画面の同時編集ができない 
 体験向上
 体験向上
 体験向上


Slide 21

Slide 21 text

03
 UnitTest
 03 リアーキで受けた恩恵 
 The Composable Architecture 
 View
 State
 Action
 Reducer
 Environment


Slide 22

Slide 22 text

03
 UnitTest
 03 リアーキで受けた恩恵 
 The Composable Architecture 
 テストが書ける設計になっている 
 何のテストを書くか明確 
 体験向上
 体験向上
 View
 State
 Action
 Environment
 Reducer

Slide 23

Slide 23 text

©NewsPicks Inc. All Rights Reserved. 
 04
 心もコードも健全に


Slide 24

Slide 24 text

04 心もコードも健全に
 健全なコードはエンジニアの心を明るくす
 
 パフォーマンスがあがり施策も高速でまわせる
 
 会社もチームも個人も幸せに


Slide 25

Slide 25 text

ありがとうございました。