從 UIKit 到 SwiftUI 的思維轉移

Pofat @ MOPCON 2021

UIKit 十多年來一直是 iOS app 開發者的主力 UI 框架，其基礎元件和 layout 工具都提供了多樣化的設定，以承擔 app 在這些年間不停變化的需求，但從 Swift 開始出現後，事情開始逐漸有了變化。

首先出現了利用 Swift 語言能力與性質提供了以往不同的 UIKit 開發典範。後來在 FRP 盛行數年後，2019 年 Combine 的到來宣告第一方的 FRP solution 終於出現，與此相伴的是基於 Combine 並帶來全新 app 開發體驗，在當年轟動了整個 Apple 開發生態系的 SwiftUI。

從 UIKit 到 SwiftUI ，其中開發的思維落差極大，讓我們一起來聊聊之中的差異以及 Apple 如何一步步地引導這個過程。

Transcript

1. MOPCON2021 從 UIKit 到 SwiftUI 的思維轉移 Pofat Tseng
2. • Co-host @ [weak self] • Host @ Kóng Code • Swift lover • iOS developer I am Pofat
3. 關於議程 • 你不會學到怎麼寫 SwiftUI • 你將會了解 SwiftUI 的設計哲學 • 你將會了解 SwiftUI 的思考⽅式 • 你可能會得到 SwiftUI 入⾨的撇步
4. Mobile App UI 的本質
5. 反應 App 狀態， 
 響應使⽤者的輸入事件
6. State UI Action
7. UIKit 的落實⽅式
8. State UI Action
9. State • Models • View model
10. State UI Action
11. • View / ViewController initialization • Set values while update
12. State UI Action
13. UI • Storyboard / Xib • AutoLayout / Frame calculation • View life cycles management
14. State UI Action
15. Action • Target / Action • Completion handler • Noti fi cation observer
16. State UI Action
17. • Set values to UI components and update them • Recalculate new frame size • Initialize new views. Show/hide existed views
18. State UI Action
19. State UI Action State State State State State State State State UI UI UI UI UI UI UI UI UI UI UI Action Action Action Action Action
20. Will Kill You! Too Much Manual Management
21. Local Reasoning
22. Local Reasoning • Divide logic into sub domains • Only pay attention to current domain • One domain serves for one goal (ideally)
23. Restrict State/View Management
24. View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View
25. Abstraction Value Oriented Composition
26. Shared Mutable State Bad • Shared mutable state produces bugs • Values, can’t emphasize their importance more Shared Mutable State
27. Troubles Of View Management • UIView(Controller)：請把我當⼈看 • Initialization, con fi guration, addSubview, layout
28. Troubles Of View Management
29. What Do We Care About Views? • Relationship to other views • Con fi guration • Layouts
30. What If Views Are Values
31. Layout Code Is Always There
32. Layout Code Is Always There • Separate layout from views • Abstraction over views • [WWDC 16] Protocol And Value Oriented Programming In UIKit Apps
33. Layout Code Is Always There
34. Layout Code Is… Value !?
35. Layout Code Is Composable?
36. Layout Code Is… Elsewhere Layout
37. Dive Into The Layout
38. Dive Into The Layout parentSize childSize1 layout(in: parentSize) childSize2 childSize3 grandChildSize grandChildSize grandChildSize grandChildSize grandChildSize layout(in: childSizeN)
39. What Do We Care About Views? • Relationship to other views • Con fi guration • Layouts
40. What Do We Care About Views? • Relationship to other views • Con fi guration • Layouts
41. Relationship To Other Views • How to describe them e ffi ciently? • How to do this in one place?
42. ViewBuilder In Swift
43. What Do We Care About Views? • Relationship to other views • Con fi guration • Layouts
44. Modifier In SwiftUI
45. What Do We Care About Views? • Relationship to other views • Con fi guration • Layouts
46. Layout In SwiftUI
47. Layout In SwiftUI 200 100 Rectangle Shape 預設會填滿，此 padding 仍視覺上⽅便辨識 View Management
48. How And When To Update UI • Gathering properties into the state of view
49. How And When To Update UI When To Update UI?
50. How And When To Update UI • Gather multiple properties into a state for view presentation • Single code path to update UI • Whenever the state for view changes
51. From Imperative To Reactive • RxSwift • ReactCocoa • Combine
52. Update Path In SwiftUI • Only property changes are able to trigger view update • Update is triggered automatically • Only special properties @State, @ObservedObject, @ObservedObject, @Binding and @EnvironmentObject
53. @ObservableObject
54. @ObservableObject
55. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View
56. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View Single path
57. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View Single path Top-down Layout
58. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View Single path Top-down Layout DSL
59. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View Single path Top-down Layout DSL Single Path
60. SwiftUI View Life Cycle When To Update UI? View Management Layout Shared Mutable State Scalability State View Single path Top-down Layout DSL Single Path Value Types
61. View = f(State)
62. View = f(State) • App = View Relation + Layout + State + Actions(State mutation, side e ff ects) • Managing UI is actually managing your states (Ideally) Except Navigation!!
 For more code and deep dive: SwiftUI 導覽狀態探究
63. The Challenges Of State Management • State design • Decomposition
64. Design Your State With Algebra • Avoid impossible and useless states • Add & Multiply
65. Add • Enum
66. Additive Identity • Never
67. Multiply • Tuple, Function, Struct
68. Multiplicative Identity • Void
69. Decomposition • One State For One App? TCA from Point-Free • Separated by developer, ViewModel
70. Conclusion • Develop state as opposed to view • Tips for UIKit preparation: Extract layout logic, use UIStackView if possible and bind state-view in one place.
71. Thank You @PofatTseng @weak_self @pofat_kongcode