🔥虚無との戦い

📝re-frame

5 min read

re-frameとは

reagent をベースにしたWeb開発用フレームワーク.

Getting Started

ref. Overview

(ns my-app.some-namespace
  (:require [re-frame.core :as rf]))

設計思想 | A Data Loop

ref. A Data Loop, Infographics(概念の図解)

re-frameは単に無限ループをしているにすぎない. そして水が海から雲になり雨に変わって川になり海へ戻るように循環するようにデータも循環する(単方向のデータフロー).

re-frameでは6つのステージに分けている.

  1. Event dispatch
  2. Event handling
  3. Effect handling
  4. Query
  5. View
  6. DOM

1-3は外部との副作用がある世界. として4-6はReactのアーキテクチャで有名な v = f(s) の思想. vはview, fはfunction, sはstate.

re-frameの一つの目標はUIコンポーネントから状態とロジックを分離すること.

実装の流れ

以下, 細かく実装レベルで処理をみていくがはじめに全体像をまとめる.

GitHubにある event handler実装チュートリアルも参照.

たぶんどのチュートリアルもこのようなファイル名と実装をしているのでテンプレートがそうなっているのかな？(あとで調査.. )

  • db.cljs
    • 状態管理のdbを定義.
  • events.cljs
    • reg-event-db関数を利用して db操作のためのeventを登録.
  • subs.cljs
    • reg-subs関数を利用して dbから情報取得するqueryを登録.
  • views.cljs
    • event handlerやsubscriptionを用いて情報を画面に描写.

db

アプリケーションの状態を db というマップを保持する単一のReagent atomで集中管理する.

event/event handler

状態(db)の変更は event で行う. [ *] という形式のベクターとして表現.

re-frame/reg-event-db の関数で db と event を引数にとって新しいdbを返す関数を event handler として登録.

以下が基本の型. (fn … ) は純粋関数として記述して副作用であるDB更新はフレームワークに任せる.

(re-frame.core/reg-event-db
  <event-id>
  (fn [<db> <event>
    <db>))

query/subscription

query は dbから情報を取得して view に描写する関数. [ *] という形式のベクターで表現される.

re-frame/reg-sub の関数で db と query を引数にとって任意の値を返す関数を subscription として登録.

(re-frame.core/reg-sub
  <query-id>
  (fn [<db> <query>]
    <value>))

view のロジックは最小限にしdb データの加工は subscription に集約するのがよい(keep views as simple as possible).

view

画面を構築する.

言い換えれば reagentをつかいReactコンポーネントを作成する.

なにかの操作をトリガーにするeventを re-frame.core/dispatch ) で送信する.

イベント経由or 定期監視で状態変更を検出したら その値をsubscription経由で @(re-frame.core/subscribe ) で受信.

References

以下は日本語記事. そもそも情報が少ない上に古いものがある.

グラフビュー

バックリンク

Recents