Why SwiftUI? Why TCA? - Speaker Deck

Why SwiftUI? Why TCA?

by Ethan Huang

Slide 1

Slide 1 text

13@iPlayground2024 Why SwiftUI? Why TCA? 13

Slide 2

Slide 2 text

13@iPlayground2024 About Me 13

Slide 3

Slide 3 text

13@iPlayground2024 📸 歡迎拍照本演講結束後暫不提供投影片

Slide 4

Slide 4 text

13@iPlayground2024 About Me iPlayground 與 13 • 3⃣第三次在 iPlayground 演講 • 🎙weak self podcast https://weakself.dev • 📰13 報（Apple 開發者週報） https://ethanhuang13.com 以上皆源自於 iPlayground • 🐦Twitter @ethanhuang13

Slide 5

Slide 5 text

13@iPlayground2024 ㊙ iOS Developer+ 會員 https://iosdeveloper.plus 13 的獨家 iOS 開發經驗分享

Slide 6

Slide 6 text

13@iPlayground2024 About Me 為什麼要講這個題目 • 目前任職於 UI.com，擔任 iOS Lead • 團隊有超過 3 年的 SwiftUI + TCA 實務與踩坑經驗

Slide 7

Slide 7 text

13@iPlayground2024 🚩 今天講 Why，不講 How

Slide 8

Slide 8 text

13@iPlayground2024 Why SwiftUI? Reason 0

Slide 9

Slide 9 text

13@iPlayground2024 🤔 為什麼要學 SwiftUI？

Slide 10

Slide 10 text

13@iPlayground2024 🙅 SwiftUI 無法取代 UIKit 也不需要

Slide 11

Slide 11 text

13@iPlayground2024 🥰 SwiftUI 還是有好些 Bug 或缺陷但已經很實用了

Slide 12

Slide 12 text

13@iPlayground2024 👀 Swift Observation iOS 17 以上

Slide 13

Slide 13 text

13@iPlayground2024 Why SwiftUI? Reason 1

Slide 14

Slide 14 text

13@iPlayground2024 🤔 為什麼要學 SwiftUI？

Slide 15

Slide 15 text

13@iPlayground2024 🤪 這樣你就可以罵 SwiftUI 了

Slide 16

Slide 16 text

13@iPlayground2024

Slide 17

Slide 17 text

13@iPlayground2024 🤕 iOS 開發者有誰不受傷？

Slide 18

Slide 18 text

13@iPlayground2024

Slide 19

Slide 19 text

13@iPlayground2024 🥹 開發者對 SwiftUI 的期待很高

Slide 20

Slide 20 text

13@iPlayground2024 Why SwiftUI? Reason 2

Slide 21

Slide 21 text

13@iPlayground2024 🙋 工作用 SwiftUI > UIKit

Slide 22

Slide 22 text

13@iPlayground2024 🙋 個人專案 SwiftUI > UIKit

Slide 23

Slide 23 text

13@iPlayground2024 👉 你想在下一個 iOS 專案寫 SwiftUI 嗎？

Slide 24

Slide 24 text

13@iPlayground2024 假設兩個新案子或新工作條件完全一樣只差在 UIKit 或 SwiftUI

Slide 25

Slide 25 text

13@iPlayground2024 Why SwiftUI? Reason 3

Slide 26

Slide 26 text

13@iPlayground2024 ↔ 你比較熟悉左邊這一群，還是右邊這一群？

Slide 27

Slide 27 text

13@iPlayground2024 •UIKit •Android View •Xamarin •jQuery •SwiftUI •Flutter •React Native •Jetpack Compose •React •Vue

Slide 28

Slide 28 text

13@iPlayground2024 ❓ 你看得懂下面這三句話嗎？

Slide 29

Slide 29 text

13@iPlayground2024 1. 每個畫面都有一個狀態去對應 2. 只要改變狀態，畫面就會改變 3. 核心邏輯就在於正確改變狀態

Slide 30

Slide 30 text

13@iPlayground2024 🥲 越熟悉 UIKit，學 SwiftUI 越困難

Slide 31

Slide 31 text

13@iPlayground2024 🛒學習遷移：在一種情境中所學到的知識或技能能夠應用到另一種情境中的過程正向 / 負向學習遷移

Slide 32

Slide 32 text

13@iPlayground2024 🥲 越熟悉 UIKit，學 SwiftUI 越困難（負向學習遷移）

Slide 33

Slide 33 text

13@iPlayground2024 🤯 我的 SwiftUI 頓悟時刻

Slide 34

Slide 34 text

13@iPlayground2024

Slide 35

Slide 35 text

13@iPlayground2024

Slide 36

Slide 36 text

13@iPlayground2024 •UIKit •Android View •Xamarin •jQuery •SwiftUI •Flutter •React Native •Jetpack Compose •React •Vue

Slide 37

Slide 37 text

13@iPlayground2024 🛒 學會 SwiftUI 獲得對現代前端框架的正向遷移

Slide 38

Slide 38 text

13@iPlayground2024 🥸Bonus: 為什麼 SwiftUI 有很多 Bug？

Slide 39

Slide 39 text

13@iPlayground2024 1. 每個畫面都有一個狀態去對應 2. 只要改變狀態，畫面就會改變 3. 核心邏輯就在於正確改變狀態

Slide 40

Slide 40 text

13@iPlayground2024 （理想上） 1. 每個畫面都有一個狀態去對應 2. 只要改變狀態，畫面就會改變 3. 核心邏輯就在於正確改變狀態

Slide 41

Slide 41 text

13@iPlayground2024 🤓 理想與現實有巨大的差距

Slide 42

Slide 42 text

13@iPlayground2024 🙂↔ 現實： SwiftUI 與 UIKit 天生不相容

Slide 43

Slide 43 text

13@iPlayground2024 🔧 iOS SwiftUI 的 Bug(fix) 史或許就是縮減理想與現實差距的歷史

Slide 44

Slide 44 text

13@iPlayground2024 Why SwiftUI? Reason 4

Slide 45

Slide 45 text

13@iPlayground2024 👀 在開發流程中使用 Preview 的意義是什麼？

Slide 46

Slide 46 text

13@iPlayground2024 ⚡ 快速得到回饋修正後再快速得到回饋修正後再快速得到回饋

Slide 47

Slide 47 text

13@iPlayground2024 波報 #52

Slide 48

Slide 48 text

13@iPlayground2024 WWDC23: Design with SwiftUI

Slide 49

Slide 49 text

13@iPlayground2024 有些東西不靠 Preview（這種方式）是創造不出來的

Slide 50

Slide 50 text

13@iPlayground2024 🔥 不一定要 Preview，也可以使用 Hot Reloading + Injection

Slide 51

Slide 51 text

13@iPlayground2024 即使 Preview 常常壞掉... 我還是會要求寫 Preview 的另一個原因

Slide 52

Slide 52 text

13@iPlayground2024 💡 能把 SwiftUI Preview 寫好 View 的狀態設計就不會太差

Slide 53

Slide 53 text

13@iPlayground2024 🤣老笑話 iOS 開發就是在做 JSON + TableView

Slide 54

Slide 54 text

13@iPlayground2024

Slide 55

Slide 55 text

13@iPlayground2024 🚧 為了看清楚每種狀態的 Preview 必須把各種狀態的假資料準備好準備的過程就是在檢討架構設計

Slide 56

Slide 56 text

13@iPlayground2024 💡 能把 SwiftUI Preview 寫好 View 的狀態設計就不會太差

Slide 57

Slide 57 text

13@iPlayground2024 Why SwiftUI? Reason 5

Slide 58

Slide 58 text

13@iPlayground2024 🙏 Only SwiftUI Can Do

Slide 59

Slide 59 text

13@iPlayground2024 🎛WidgetKit 家族 Live Activity Dynamic Island Lock Screen Control ⌚Watch App

Slide 60

Slide 60 text

13@iPlayground2024 🙅 請不要用開發 Widget 當作初學 SwiftUI 的題目雙重傷害

Slide 61

Slide 61 text

13@iPlayground2024 Why SwiftUI? Reason 6

Slide 62

Slide 62 text

13@iPlayground2024 👍 跟 TCA 搭配

Slide 63

Slide 63 text

13@iPlayground2024 Why TCA? Reason 0

Slide 64

Slide 64 text

13@iPlayground2024 🙋 有聽過 TCA 嗎？

Slide 65

Slide 65 text

13@iPlayground2024 The Composable Architecture https://github.com/pointfreeco/ swift-composable-architecture

Slide 66

Slide 66 text

13@iPlayground2024 Point-Free https://www.pointfree.co/ Brandon Williams Stephen Celis

Slide 67

Slide 67 text

13@iPlayground2024 1. 每個畫面都有一個狀態去對應 2. 只要改變狀態，畫面就會改變 3. 核心邏輯就在於正確改變狀態

Slide 68

Slide 68 text

13@iPlayground2024 👮 TCA 很擅長管理狀態

Slide 69

Slide 69 text

13@iPlayground2024 🫨 配套的機制與 Libraries 非常多

Slide 70

Slide 70 text

13@iPlayground2024 Swift CasePaths Concurrency Extras Custom Dump Swift Dependencies Identified Collections Swift Navigation Swift Perception Swift Issue Reporting

Slide 71

Slide 71 text

13@iPlayground2024 還學到了超多 Swift 與 Coding 知識 Swift Package 切模組技巧 Package manifest 照 compiler 切版本 Swift Concurrency Swift Macros Swift Observation dynamicMememberLookup Algebraic Data Type

Slide 72

Slide 72 text

13@iPlayground2024 看起來很多但不要被嚇到

Slide 73

Slide 73 text

13@iPlayground2024 😰 不對，你應該已經被嚇到了

Slide 74

Slide 74 text

13@iPlayground2024 🍽 請搜尋「iOS 開發配飯吃」🍚

Slide 75

Slide 75 text

13@iPlayground2024 🤩 學習應該是快樂的先輕鬆地看有興趣再學

Slide 76

Slide 76 text

13@iPlayground2024 Why TCA? Reason 1

Slide 77

Slide 77 text

13@iPlayground2024 🙆 有使用過 TCA 嗎？是 1.0 以後的版本嗎？

Slide 78

Slide 78 text

13@iPlayground2024 🙆 之後的專案你還會選擇使用 TCA 嗎？

Slide 79

Slide 79 text

13@iPlayground2024 🕳 UI Taipei iOS Team 三年以上實際踩坑經驗上架 2 個中型 App 100% SwiftUI + TCA

Slide 80

Slide 80 text

13@iPlayground2024 👉 下個專案，依然會選擇 SwiftUI + TCA

Slide 81

Slide 81 text

13@iPlayground2024 TCA 現在的版本好用了嗎？最新版本 v1.15.2

Slide 82

Slide 82 text

13@iPlayground2024 1.0 正式版 1.4 Macros 1.7 Observations 1.10 Sharing State 1.13 UIKit Navigation 1.15 Concurrency Ready

Slide 83

Slide 83 text

13@iPlayground2024 個人認為唯一明顯缺點 Macros 需要 SwiftSyntax Clean Build 被拖慢

Slide 84

Slide 84 text

13@iPlayground2024 😋 已入坑，小孩愛吃，會再回購

Slide 85

Slide 85 text

13@iPlayground2024 Why TCA? Reason 2

Slide 86

Slide 86 text

13@iPlayground2024 🚦 「TCA 的 T 是 Testable」

Slide 87

Slide 87 text

13@iPlayground2024 測試重要在哪怎麼做測試才合理是個人在職涯中自己領悟來的別人無法輕易說服

Slide 88

Slide 88 text

13@iPlayground2024 至於我我很在意邏輯有沒有測試到

Slide 89

Slide 89 text

13@iPlayground2024 😎 TCA 可以很輕鬆地測試完整的流程

Slide 90

Slide 90 text

13@iPlayground2024 Code 好讀 Code Review 很容易抓重點

Slide 91

Slide 91 text

13@iPlayground2024 TDD

Slide 92

Slide 92 text

13@iPlayground2024 🚥 寫 TCA 不寫測試就太浪費了

Slide 93

Slide 93 text

13@iPlayground2024 Why TCA? Reason 3

Slide 94

Slide 94 text

13@iPlayground2024 👮 狀態的集中管理（原生 SwiftUI 不好做）

Slide 95

Slide 95 text

13@iPlayground2024 🧩 Composable 可組合的

Slide 96

Slide 96 text

13@iPlayground2024 🎤🎸🎷🎺🎹 團隊分工優勢

Slide 97

Slide 97 text

13@iPlayground2024 Why TCA? Reason 4

Slide 98

Slide 98 text

13@iPlayground2024 👽 外部依賴的管理

Slide 99

Slide 99 text

13@iPlayground2024 邏輯的世界是單純的現實的世界是複雜的

Slide 100

Slide 100 text

13@iPlayground2024 系統狀況網路狀況 / Server 狀況 API 回傳值使用者權限 ......

Slide 101

Slide 101 text

13@iPlayground2024 Swift Dependencies https://github.com/pointfreeco/ swift-dependencies

Slide 102

Slide 102 text

13@iPlayground2024 Why TCA? Reason 5

Slide 103

Slide 103 text

13@iPlayground2024 🤖 非常結構化，有利於 AI 輔助工具做 Suggestion / Completion

Slide 104

Slide 104 text

13@iPlayground2024 Summary Why SwiftUI? Why TCA?

Slide 105

Slide 105 text

13@iPlayground2024 Why SwiftUI? 1. 🤪可以罵 SwiftUI 2. 🙋個人興趣與社群氛圍 3. 🛒非 UIKit 思考方式、前端趨勢 4. 💡Preview 快速回饋的開發哲學 5. 🙏Only SwiftUI Can Do

Slide 106

Slide 106 text

13@iPlayground2024 Why TCA? 1. 😋已入坑，小孩愛吃，會再回購 2. 🚥能輕鬆寫出很關鍵的測試 3. 👮狀態集中管理 + 可組合 4. 👽優秀的外部依賴管理能力 5. 🤖適合搭配 AI 工具

Slide 107

Slide 107 text

13@iPlayground2024 適合團隊一起入坑歡迎來玩

Slide 108

Slide 108 text

13@iPlayground2024 謝謝聆聽㊗祝你有個愉快的 iPlayground

Slide 109

Slide 109 text

13@iPlayground2024 📺 YouTube 搜尋「iOS 開發配飯吃」

Slide 110

Slide 110 text

13@iPlayground2024 ㊙ iOS Developer+ 會員 https://iosdeveloper.plus 13 的獨家 iOS 開發經驗分享