$30 off During Our Annual Pro Sale. View details »

從 UIKit 到 SwiftUI 的思維轉移

Pofat
October 23, 2021

從 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 如何一步步地引導這個過程。

Pofat

October 23, 2021
Tweet

More Decks by Pofat

Other Decks in Programming

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