Riot.jsと戦った話片山真也　フロントエンドエンジニア

React

Riot.js

<ul>

<li each=“{ item, i in list }”>{ item.text }</li>

</ul>

<input type=“text” value=“{ text }”

onchange=“{ onChangeInput }”>

<div class=“item { selected: selected == item }”

each=“{ item in list }”>

{ item.text }

</div>

シンタックスの数が少なく、 短い学習ですぐに書ける

React-like とつくからには Flux っぽく書きたい

Riot.jsCustom tags (View + Action)

<modal> <accordion> <profile>

EJS

RiotControlDispatcher

ModalStore AccordionStore ProfileStoreStore

WebPack

業務ではこんな感じの構成で使ってるけど、 双方向にデータが流れてるから Flux のような何か

RiotControl はたったの 17 行のライブラリ

RiotControl.on(‘updateMessage’, (messages) => {

this.messages = messages;

this.update();

});

Dispatcher として使える

他の実装だと riot-todo が Flux を実現しつつ、 簡略なコードで良い感じ

Riot.js バグが割と多い

業務で使っている時も結構地雷踏みました

何度もバージョンを変えつつバグを避けたり

RiotControl も実装が簡単すぎるので、 使い方を気をつけないと意図しない動作が

each={ item, index in list } のバグ

インデックスが一文字に (index -> x)

ネストしてると値がおかしくなる

each をネストさせると riot.js 内部エラー

変数を省略すると update されない

each 内のカスタムタグが取得できない

etc…最新版では直ってる (はず)

Riot.js 2.2.4 は (たぶん) 安定してるので、 2.2.4 を使いましょう