React と、Flux フレームワークのひとつである DeLorean.js 、そして今年のJS関係のアドベントカレンダーのネタをいくつか散りばめて、サンプルレベルのものですが Todo 登録アプリを作成してみました。
主な構成は以下です：
- React(without JSX), DeLorean.js
- CoffeeScript, gulp, webpack
- mocha, power-assert, 実行はnodeで行う
- スタイルは Semantic UI (
ui xxxのようなクラス指定はこれのルール) - express のサーバアプリの中の一部分として配置
各要素の連携を確かめたかったので、無駄に gulp を介したり、無駄にサーバサイドを含めて express 上で動かしたり、しています。
アプリの内容は、入力フォームに値を入れてEnterすると..
下にどんどん出る、だけです。 ザ・サンプル。
なお、外部に動かせる環境は建てていません。
リポジトリは https://github.com/kjirou/react-deloreanjs-todo-list です。
- client 以下が、SPAなJSアプリの世界
- これ以下を webpack がビルドして .js にしてくれる
- client 外が、大体 express-generator で生成されたサーバサイドアプリの世界
- (ちなみに、何これ？という npm パッケージは、大体 experss-generator 実行時に自動で登録したもの)
というディレクトリ構成です。
その中で DeLorean.js のコードは、client/dispacher と client/stores/* 、そして Flux.mixins.storeListener を Mix-in している client/views/* が該当します。
本アプリにおいて、DeLorean.js が特にやっていることは、Flux.mixins.storeListener による Store インスタンスの共有です。
これはこれで便利ですが、Component 内に設定が残り続けるので、個人的にはあんまり好きじゃないなーと感じてしまいました。
以上
Virtual DOM 、あまり関係なくてすみませんでした。
メリークリスマス！