宣言的UI - koushisa

宣言的UI

宣言型プログラミングスタイルで作られるUIコンポーネント

https://scrapbox.io/files/6413be9699090a001b58ab9b.png

現代のアプリ開発においてデファクトスタンダード

FlutterやSwiftUI、Jetpack Composeなども次々と採用

UI = Component(state)の原則がある

最近のDan Abramov曰く:

@dan_abramov: ui = client(server(data), state)

@dan_abramov: there’s another way to think about it. this one is a bit more precise but also a bit more mindbending.

client = server(data)

ui = client(state)

@t6adev: I like it.

And just want to say it.

view = render(data)

ui = rerender(view, state)

@yutaroadachi: Dan先生曰く、ReactのメンタルモデルがReact Server Componentsの登場で変化しているらしい

⚛️今迄: ui = fn(state)

⚛️今後: ui = client(server(data), state)

差分は「server(data)」の部分なので、「サーバーのデータと」クライアントの状態がUIを決定する、に変化しているみたい

データ構造

どのような操作でデータを変更するか (画面を主体に考える)

UIの差分検知

UIは多くの場合複数の要素の集合体であり、宣言的UIを構築する際はリソースの依存関係を見抜くことが重要