Declarative UI on iOS (without SwiftUI) - ShihTing Huang (Neo)
===

{%hackmd FGRWt1UuTFKk0wSbGgg-SA %}

> 請從這裡開始

## YouTube
{%youtube YinWPNTKeVc %}

## Slide
{%speakerdeck koromiko/declarative-ui-without-swiftui %}

[Code](https://github.com/koromiko/SimpleDeclarativeSyntax)

## Declarative UI Pattern 實戰大全！

* 什麼是 Declarative Programming
* 怎樣有效率地更新 UI
* 怎樣讓語法更 Declarative？
* 在實務上怎麼實作？

## UI的挑戰

過去的UI 可能就一個tableView
現代的UI 參考appstore (CollectionView + tableView + 很多View)

直接操作UI元件 --> Imperactive Programming
* 主動告訴UI狀態應該要改成什麼狀態
* 可能會導致UI更新的程式同時存在A funcion / B Function散落各地

### 有沒有更直觀的方式呢？ ==> SwiftUI
讓UI自己直接知道要做什麼事 -> Declatrative Programming
* 資料在更新的時候 -> UI會自動更新
* but ! swiftUI only iOS13 support

### 在iOS 13的限制下，How declatrative UI?

* 根據資料狀態單獨更新有異動資料的cell
* Edit distance演算法計算差異
* 利用 hash value 來比對兩個 table 中不同的 cell

### pseudo code of auto-update list

let diffs = [remove(at: x), insert(b, at: y), ...]
for operate in diffs
    do ui operate refer to newValue

### 來看看程式上的架構

* 資料必須是Hashable
* 小心NSObject
* (oldData + data) -> Edit distance Calculator -> Layout Renderer

### 讓語法更 (像SwiftUI)

#### Declarative Style

func render() {
    hostView.update([
        Label(text1),
        Label(text2),
        Label(text3)
    ])
}

struct Label: Hashable {
    var text: String
    init(_ text: String) {
        self.text = text
    }
}

var text1: String {
    didSet {
        render()
    }
}

text1 = "New text"

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

謝謝～

###### tags:`iPlayground2019`