owned this note   changed 6 years ago  
Published Linked with GitHub

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

所有議程請見議程表。

歡迎來到 https://hackmd.io/@iPlayground/2019 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

點擊本頁上方的 開始用 Markdown 一起寫筆記！
手機版請點選上方 按鈕展開議程列表。

請從這裡開始

YouTube

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Slide

Code

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
Select a repo