This document discusses declarative user interfaces (UIs) on iOS. It begins with an overview of declarative programming and the challenges of updating UIs. It then presents a model where UI is separated into data and state. It demonstrates how to make the UI reactive to changes in data and state by finding differences between old and new values. The document outlines an architecture for declarative UIs with components for data, difference calculation, layout, and rendering. It provides examples of using this approach with SwiftUI-like declarative syntax.

1. Declarative UI on iOS Neo

2. About me
• 從 Objective-C 開始入坑的 iOS ⼯工程師
• 主修電機⼯工程、⾃自然語⾔言處理理
• 業餘前端 (react.js)
• AppCoda TW 作者
• Tokyo WebHack Meetup 組織者
• Blog: 鍵盤藍藍綠藻、S.T.H Brewery (拖稿中)
黃⼠士庭
Neo

3. About me
台北
東京

4. About me

5. About me
• 🏂
• 🚴
• 🎬
•☕

6. ⼤大綱
• 背景
• 甚麼是 Declarative Programming
• 怎樣有效率地更更新 UI
• 怎樣讓語法更更 declarative
• 在實務上怎麼實作？

7. UI 的挑戰

8. 過去的 UI

9. 現代的 UI

10. UI = 資料 + 狀狀態
title
title
title
UI Data
{
"id": 1,
"title": "A title"
},
{
"id": 2,
"title": "A title"
},
{
"id": 3,
"title": "A title"
}

11. UI = 資料 + 狀狀態
title
loading
download
title
title
UI Data
{
"id": 1,
"title": "A title"
},
{
"id": 2,
"title": "A title"
},
{
"id": 3,
"title": "A title"
}
State
struct Item {
var isLoading: Bool
var isDownloaded:
Bool
}

12. UI = 資料 + 狀狀態
title
loading
download
title
title
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
}
}

13. UI = 資料 + 狀狀態
title
loading
download
title
title
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
}
}
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
cell.downloadBtn.state = stateArray[indexPath.row]
}

14. UI = 資料 + 狀狀態
title
+
download
title
title
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
}
}
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
cell.downloadBtn.state = stateArray[indexPath.row]
}

15. UI = 資料 + 狀狀態
title
+
download
title
title
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
}
}
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
cell.downloadBtn.state = stateArray[indexPath.row]
}
func addBookmark(indexPath: IndexPath) {
bookmarkArray[indexPath.row] = .bookmarked
}

16. UI = 資料 + 狀狀態
title
+
download
title
title
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
cell.bookmarkBtn.state = .bookmarked
}
}
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
cell.downloadBtn.state = stateArray[indexPath.row]
}
func addBookmark(indexPath: IndexPath) {
bookmarkArray[indexPath.row] = .bookmarked
}

17. UI = 資料 + 狀狀態
title
+
download
title
title
loading
😱
func downloadBtnPressed(at indexPath: IndexPath) {
if let cell = tableView.cellForRow(
at: indexPath) as? ListTableViewCell {
cell.downloadBtn.state = .loading
stateArray[indexPath.row] = .loading
cell.bookmarkBtn.state = .bookmarked
}
}
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
cell.downloadBtn.state = stateArray[indexPath.row]
}
func addBookmark(indexPath: IndexPath) {
bookmarkArray[indexPath.row] = .bookmarked
}

18. 直接操作 UI 元件
cell.downloadBtn.state = .loading
cell.titleLabel.text = "title"
cell.backgroundColor = .gray

19. 直接操作 UI 元件
title
loading
download
title
title
program
Imperative Programming

20. 有沒有更更直觀的⽅方式？

21. SwiftUI
title
loading
download
title
title
Cell
var body: some View {
HStack {
Text(item.title)
Spacer()
Button(item.loadingText)
}
}

22. SwiftUI
title
loading
download
title
title
var body: some View {
HStack {
Text(item.title)
Spacer()
Button(item.loadingText)
}
}
Cell

23. SwiftUI
title
loading
download
title
title
}var body: some View {
List(items) { item in
Cell(item)
}
}
List

24. 直接操作 UI 元件
cell.titleLabel.text = item.title
cell.downloadBtn.state = item.loadingState

25. 讓 UI ⾃自⼰己對資料做出反應
HStack {
Text(item.title)
Spacer()
Button(item.loadingState)
}

26. Declarative UI
title
loading
download
title
title item
item
item
Declarative Programming

27. Declarative UI
• 只要告訴 UI 最終的狀狀態
• UI ⾃自⼰己會判別狀狀態的變化做更更新

28. But!

29. SwiftUI & iOS 13

30. SwiftUI & iOS 13

31. How? 😩

32. How? 🤔

33. 來來分解 Declarative UI

34. 來來分解 Declarative UI
title
loading
download
title
title title
title
title
UI Data

35. 來來分解 Declarative UI
title
loading
download
title
title title
title
title
UI Data

36. 直觀作法
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
...
cell.setup(items[indexPath.row])
...
}
Datasource

37. 直觀作法
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
...
cell.setup(items[indexPath.row])
...
}
Datasource
var items: [CellItem] {
didSet {
tableView.reloadData()
}
}
資料

38. 直觀作法
var items: [CellItem] {
didSet {
tableView.reloadData()
}
}
更更新資料
items[3].titleText = "New Title!"

39. 直觀作法
title
loading
download
title2
title title
title2
title
UI State
reloadData( )

40. 直觀作法

41. 很⽅方便便，但是...🤨

42. ⼤大量量重覆的運算
func tableView(_ tableView: UITableView, cellForRowAt
indexPath: IndexPath) -> UITableViewCell {
...
cell.setup(items[indexPath.row])
...
}

43. 只更更新狀狀態有變化的部分🕵

44. 找出不同
title
loading
download
title2
title title
title2
title
UI Data
reload

45. 找出不同
title
title
title
Old
title
title2
title
New

46. 找出不同
title
title
Old
title
title
New
remove title2

47. 找出不同
title
title
title
Old
title
title
New
insert title2title2

48. 找出不同
tableView.reloadData()
tableView.deleteRows(at: [IndexPath(row: 1, section:
0)], with: .automatic)
tableView.insertRows(at: [IndexPath(row: 1, section:
0)], with: .automatic)

49. 怎麼找出差異異？

50. 怎麼找出差異異？
title
title
title
Old
title
title2
title
New

51. 怎麼找出差異異？
title
title
title
title
title2
title
protocol Hashable { ... }
=
=
!=
A
A A
A
A B

52. 怎麼找出差異異？
=
=
!=
A
A A
A
A B
[ ] [ ]

53. Edit distance 演算法
s w i f t
s h i f t y
• remove w at 1
• insert h at 1
• insert y at 5

54. 怎麼找出差異異？
A
A A
A
A B
[ ] [ ]

55. 怎麼找出差異異？
A
A A
A
A B
[ ] [ ]
• remove A at 1
• insert B at 1

56. 找出不同
diffs = [.remove(1), .insert(B, at: 1)]
for diff in diffs {
switch diff {
case .insert(let index):
tableView.insertRows(xxx)
case .remove(let index):
tableView.deleteRows(xxx)
}
}

57. Edit distance 演算法
• Wagner–Fischer algorithm: O(MN)
• Heckel algorithm: Linear time
• Myers algorithm: O(ND)

58. Edit distance 演算法
• Wagner–Fischer algorithm: O(MN)
• Heckel algorithm: Linear time
• Myers algorithm: O(ND)
Diffing.swift
on Swift 5.1

59. Edit distance 演算法
• https://github.com/ra1028/DifferenceKit with Heckel
• https://github.com/onmyway133/DeepDiff with Heckel
• https://github.com/jflinter/Dwifft with Myers
• https://github.com/tonyarnold/Differ with Myers
💦

60. 來來看看程式上的架構

61. 架構
data
Edit distance
Calculator
Layout
Renderer
old
data

62. 架構
data
Edit distance
Calculator
Layout
Renderer
old
data

63. 資料
• 簡單的 struct 代表 UI 的狀狀態
• 必需是 Hashable
• 多數狀狀況可以被 compiler
auto-synthesis
• ⼩小⼼心NSObject！！
struct CellItem: Hashable {
var title: String
var backgroundColor: UIColor
}

64. 資料
• 簡單的 struct 代表 UI 的狀狀態
• 必需是 Hashable
• 多數狀狀況可以被 compiler
auto-synthesis
• ⼩小⼼心NSObject！！
struct CellItem: Hashable {
var title: String
var backgroundColor: UIColor
}

65. 資料
struct CellItem: Hashable {
var title: String
var backgroundColor: UIColor
}
var items: [CellItems]

66. 架構
state
Edit distance
Calculator
Layout
Renderer
old
state

67. Edit distance calculator
var items: [CellItems] {
didSet {
let diffs = items.difference(from: oldValue)
tableView.apply(diffs)
}
}

68. Edit distance calculator
var items: [CellItems] {
didSet {
let diffs = items.difference(from: oldValue)
tableView.apply(diffs)
}
}

69. 架構
state
Edit distance
Calculator
Layout
Renderer
old
state

70. Layout Renderer
extension UITableView {
func apply(diffs: CollectionDifference) {
self.beginUpdates()
for diff in diffs {
switch diff {
case .insert(let index):
self.insertRows(at: index)
case .remove(let index):
self.deleteRows(at: index)
}
}
self.endUpdates()
}
}

71. Layout Renderer
extension UITableView {
func apply(diffs: CollectionDifference) {
self.beginUpdates()
for diff in diffs {
switch diff {
case .insert(let index):
self.insertRows(at: index)
case .remove(let index):
self.deleteRows(at: index)
}
}
self.endUpdates()
}
}

72. 找出不同
title
loading
download
title2
title title
title2
title
UI Data
reload

73. 不夠 declarative 😒

74. 架構
state
Edit distance
Calculator
Layout
Renderer
old
state

75. SwiftUI
title
loading
download
title
title
Cell
var body: some View {
HStack {
Text(item.title)
Spacer()
Button(item.loadingText)
}
}

76. 當然不⾏行行

77. 長得像就好 🙏

78. ⽬目標
text3
text2
text1

79. Declarative style
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
text1 = "New value"
text3
text2
text1

80. 架構
text3
text2
text1
hostView: UIStackView
新的狀狀態舊的狀狀態
difference
insertArrangedSubview
removeFromSuperview

81. Declarative style
text3
text2
text1
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
struct Label: Hashable {
var text: String
init(_ text: String) {
self.text = text
}
}

82. Sub-class: UIStackView
private var current: [Label] = []
func update(_ updated: [Label]) {
let diffs = updated.difference(from: current)
for diff in diffs {
switch diff {
case .insert(let index):
insertArrangedSubview(labelView, at: offset)
case .remove(let index):
arrangedSubviews[index].removeFromSuperview()
}
}
current = updated
}

83. Sub-class: UIStackView
private var current: [Label] = []
func update(_ updated: [Label]) {
let diffs = updated.difference(from: current)
for diff in diffs {
switch diff {
case .insert(let index):
insertArrangedSubview(labelView, at: offset)
case .remove(let index):
arrangedSubviews[index].removeFromSuperview()
}
}
current = updated
}

84. 更更新資料
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
text1 = "New value"

85. 更更新資料
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
text1 = "New value"
var text1: String {
didSet {
render()
}
}

86. 更更新資料
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
text1 = "New value"
var text1: String {
didSet {
render()
}
}

87. 重覆的部份很多
var text1: String {
didSet {
render()
}
}
var text2: String {
didSet {
render()
}
}
var text3: String {
didSet {
render()
}
}

88. 簡單的Wrapper
class StateStore<T: Hashable>: Hashable {
private weak var renderer: Renderer?
var value: T {
didSet {
assert(renderer != nil)
renderer?.render()
}
}
init(renderer: Renderer, value: T) {
self.renderer = renderer
self.value = value
}
}

89. 簡單的Wrapper
let text1 = StateStore(renderer: self, value:"Label 1”)
let text2 = StateStore(renderer: self, value:"Label 1”)
let text3 = StateStore(renderer: self, value:"Label 1”)
func render() {
hostView.update([
Label(text1),
Label(text2),
Label(text3),
])
}
text1.value = "update!"

90. 更更複雜的狀狀況
View
state

91. 更更複雜的狀狀況
render( )

92. 最後

93. Demo

94. Demo
https://github.com/koromiko/SimpleDeclarativeSyntax

95. Demo

96. Declarative UI
Vue.js

97. 參參考資料
• Swift 5.1 Collection Diffing - Federico Zanetello
• A better way to update UICollectionView data in Swift
with diff framework - Khoa Pham
• Introduction to declarative UI - Flutter
• DifferenceKit - Ryo Aoyama

98. 來來聊天吧
• Twitter: @KoromikoNeo
• GitHub: https://github.com/koromiko
• Website: https://huangshihting.works/
• LinkedIn: https://www.linkedin.com/in/huangshihting/

99. Thank you