Reagent & re-frameのすすめ

Copyright © 2018 eureka, Inc. All rights reserved.
Keitaro Takeuchi
Reagent & re-frameのすすめ

Copyright © 2018 eureka, Inc. All rights reserved.2
● 竹内景太郎(a.k.a. BOXP)
● Front-End Engineer at eureka, Inc. （二年目）
● Go,TypeScript,Clojure
● VRChatはじめました
(who (am i))

弊社でのClojureの使われ方
- 社内イベント管理システム
- golang, Clojure(ClojureScript)
- 勉強会の参加者募集などに使用中
- Slackbot
- Clojure
- PRレビューの割当などに使用中

● ClojureScript向けReact.jsラッパー
● 2013年に登場
● ClojureのS式でレイアウトする
○ Hiccup構文
○ Componentは全て関数
Reagentとは

“S式（エスしき、英: S-expression）とは、Lispで導入され、
主にLispで用いられる、2分木ないしリスト構造の形式的な
記述方式。SはSymbolに由来。”
- wikipedia

● Clojureでも例外ではなく頻繁にS式が使われます
● Clojureには様々なS式があります
○ List: ‘()
○ Vector: []
○ Set: #{}
○ HashMap: {}
● 言語標準ライブラリは殆どこれらの為のもの
ClojureにおけるS式

Clojureの真価は
S式を駆使してこそ発揮される

● テンプレートも全てClojureのS式なので評価方法の違いを意識する必要がない
Reagentの利点〜全てがClojureである〜

● Reagentの補助的フレームワーク
○ アーキテクチャやデータフローの提供
■ dispatch
■ event handler
■ effect handler
■ query
■ view
■ Reagent/React
○ ボイラーテンプレートの提供
● 2014年に登場
re-frameとは

re-frameの利点〜全てをリスト処理にする〜
[:post “hello"]
(defn submit [{:keys [db]} [_ text]]
{:http-xhrio {:method :post
:params {:text text}
:on-success [:success]
:on-error [:error]
:db (assoc db :loading-indicator :loading})dispatch
EventHandler

● 外部からの入力をリストで受け取り、外部への作用をS式で返すことでアプリケー
ションの振る舞いが決まる
re-frameの利点〜全てをリスト処理にする〜
[:post “hello"]
(defn submit [{:keys [db]} [_ text]]
{:http-xhrio {:method :post
:params {:text text}
:on-success [:success]
:on-error [:error]
:db (assoc db :loading-indicator :loading})dispatch
postリクエスト
app-stateの更新
＆
画面の再描画
EventHandler

● 予め定義しておいたqueryと、テンプレートを組み立てるview層が描画する内容
を決めます
re-frameの利点〜画面の描画もリスト処理に〜
{:loading-indicator :success}
app-state
(defn loading-indicator
[db _]
(get db :loading-indicator))
query
(defn loading-indicator-view []
(let [state (subscribe :loading-indicator)]
[loading-indicator @state]))
view

re-frameの利点〜画面の描画もリスト処理に〜
{:loading-indicator :loading}
app-state
(defn loading-indicator
[db _]
(get db :loading-indicator))
query
(defn loading-indicator-view []
(let [state (subscribe :loading-indicator)]
[loading-indicator @state]))
view ブラウザ
● 組み立てたテンプレートがReagentによって描画されます

S式の扱いに長けたClojure
＋
S式だけで動くフレームワーク

全てがS式になって最強に見える

〜Fin〜
ご清聴ありがとうございました

Reagent & re-frameのすすめ

More Related Content

What's hot

Similar to Reagent & re-frameのすすめ

Reagent & re-frameのすすめ