GUIのデータアーキテクチャと状態管理の変遷

主にSPAの世界の話

---

歴史（過去）を話す

---

似ている記事

SPAにおける状態管理:関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷

WIP

https://www.notion.so/FE-b936264bd83149cf89c1a583d9aab737?pvs=4

koushisa.iconがメタ認知してきた技術の歴史 (下に向かうにつれ現代に近づく & 個人的な関心が高い)

MV*以前

GUI Architectures

開発者が知っておくべき、6つのUIアーキテクチャ・パターン

MV*

Container/Presenterパターン

Higher-Order Component

Recompose

Render Props

単方向データフロー(unidirectional data flow)

MV*脱却の経緯: フロントエンドでMV*フレームワークを使わない理由

The Elm Architecture

State-Action-Model (SAM)パターン

React Hooksパターン

Proxyパターン

Finite State Machine(FSM)パターン

XState

CQS

Almin.js

The Composable Architecture

ミニマムな状態コンテナ

Render As You Fetchパターン

Signal

Data-Flow Graph

Atomic State Management

React way

2023年~

サーバを巻き込んだCQRSやメッセージパッシングとしてのオブジェクト指向技術基盤の進化に期待している

Next.jsとApp RouterとEdgeあたりをまとめたSimple志向

React Server Componentsをアーキテクチャとしてどう捉えるか

マイクロフロントエンドとキャッシュを前提としたCQSアーキテクチャを考える

イベント駆動設計の戦略

番外編

3D, ゲーム開発

ECS(Entity Component System)

DOTS(Data-Oriented Technology Stack)

「ソフトウェア工学としてのオブジェクト指向は終わった」と言われる背景

現代のオブジェクト指向の class の割れ窓化と宣言的プログラミング

現代の主流は「宣言的プログラミング」であると思っている。これはリソースの宣言と、その状態遷移の手続きや振る舞いの付与が中心にある。

技術基盤の進化

#宣言型プログラミング

#単方向データフロー(unidirectional_data_flow)

TSの漸進的型付けによる型システム

関数型プログラミング注目の背景

データ構造と振る舞いを切り離す

問題解決空間と時空の抽象化

Immutable Model, 代数的データ型(ADT), パターンマッチング

スコープは小さいに越したことはない

副作用の局所化や中間状態の廃止から得られるテスト容易性

単方向データフロー(unidirectional data flow)がゲームチェンジャーだった

GUIの主体はユーザーである

外側に近いモジュールほど一方通行のストーリーを作る

ドメインイベント（Domain Event ）をSSoT(唯一の情報源)とする

テスト設計にも影響を与える

→テスティングトロフィーとtesting-libraryによるintegrationテスト

Reducerへのホワイトボックステストのみでは組合わせ爆発を起こしていた

リファクタリング耐性も低く、UIとしては意味のあるテストになりづらかった

これらのBDDフレームワークはビジネス要求の問題領域上で意味のある振る舞いをテストする

ビジネス要求の問題領域上で意味のある振る舞い = ドメインイベント（Domain Event ）

GUIのドメインイベント（Domain Event ） = ユーザーのインタラクションのイベントハンドラ

実装もドメインイベント（Domain Event ）を意識したデータフローにする

例

a11yをロケータとする

ユーザーの操作を模倣してドメインイベント（Domain Event ）を発生させる

前後のDOMのスナップショットを検証する

意味のある振る舞いのテストが書きやすくなった

最近はinteraction testに注目しているkoushisa.icon

バックエンドにも輸入される動きがある

TypeScript による GraphQL バックエンド開発

システム設計向けに一般化しているのがDomain Modeling Made Functional

残念ながらフレームワークが追いついていない印象

---

他

リアクティブステート参照の勘所

GUIアーキテクチャの変遷について理解する

React 状態管理ツールの沼にハマった話

List of state management approaches | Flutter