Arda - MetaFluxなフレームワークを作った

Last updated at 2015-02-17Posted at 2015-02-17

僕はIncrements(このQiitaの会社)に入社して以来、KobitoのWindows版を作っていて、その中枢の画面遷移と状態管理をライブラリとして抜き出した。それがArda。

基本的には昨日発表した https://speakerdeck.com/mizchi/real-world-virtual-dom というスライドに書いたとおり。

mizchi/arda

Ardaの概要

Ardaの目的はFluxの概念をベースに、画面遷移と状態とシーンをベースにしたヒストリ管理、その際のDispatcherのコンテキスト切り替えを行うことを主な目的としている。

CoffeeScriptでの最小構成だと次のようなコードになる

Arda = require 'arda'

# Arda.Component extends React.Component
class HelloComponent extends Arda.Component
  render: ->
    React.createElement 'h1', {}, name: 'Hello Arda'

# Arda.Context
class HelloContext extends Arda.Context
  @component: HelloComponent

window.addEventListener 'DOMContentLoaded', ->
  router = new Arda.Router(Arda.DefaultLayout, document.body)
  router.pushContext(HelloContext, {}).then ->
  	console.log 'push context done'

router.pushContextで画面を切り替えている。この画面遷移のあとにさらにpushContext(), popContextで現在の別のコンテキストに遷移することができる。基本的にあらゆる処理をPromise化できるように作っている(promisify)

由来

アルダは指輪物語の中つ国を含む世界そのものであり、シルマリルの物語によれば現実の私達の世界そのものでもある。仮想DOMを扱うので仮想と仮想を繋ぐ概念なのでそういうニュアンスを込めた…ということにしたが単に短くてユニークな名前が欲しかっただけである。最近のJSもうだいたいの名前空間潰れてて辛い。

開発の動機

既存のFluxフレームワークではあまり複数画面や画面遷移というもを意識したものが多くない。そもそもFluxの枠内にそういう概念を含んでいない。(react-routerは使いにくい)

Kobito AtomShell版の開発にあたり、最初にFluxish.tsという名前で、Kobitoの画面遷移の処理を部分を書いていたのだが、ここの処理が分厚くなり、Overworldという名前でOSSとして切り出した。(命名の理由は同上)

(これのAPIが安定した頃に一旦スクラッチで書き直したのがArda)

OSSにした意図は、僕自身がどうしてもソロ作業になりがちで、あわよくばちゃんと使われて一般的な知見のレベルにまで押しあげたいそうすれば属人化しにくい）という意図があった。業務ドメインが一切含まれていないことも大きい。

Overworldは次の特長がある。

一つのFluxのStore-Dispatcher-Viewの塊をSceneと名付ける
Sceneは次へ(pushScene)、前へ(popScene)へ遷移できる
Sceneの内部プロパティはProps(初期化子) - State(ミュータブルな状態) - TemplateProps(実際にViewに渡されるプロパティ)の三段階に分離
ミュータブルな状態(State)に副作用を及ぼす処理の局所化と、型による保護