8月26日の oRo LT 会で話した内容です。 実際に使ったものに文字を追加するなどしてます。

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

4. React

5. Riot.js

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

7. <input type=“text” value=“{ text }”
onchange=“{ onChangeInput }”>

8. <div class=“item { selected: selected == item }”
each=“{ item in list }”>
{ item.text }
</div>
シンタックスの数が少なく、
短い学習ですぐに書ける

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

11. Riot.js
Custom tags
(View + Action)
<modal> <accordion> <profile>
EJS
RiotControlDispatcher
ModalStore AccordionStore ProfileStoreStore
WebPack
業務ではこんな感じの構成で使ってるけど、
双方向にデータが流れてるから Flux のような何か

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

13. RiotControl.on(‘updateMessage’, (messages) => {
this.messages = messages;
this.update();
});
Dispatcher として使える

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

15. Riot.js バグが割と多い

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

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

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

19. each={ item, index in list } のバグ
インデックスが一文字に (index -> x)
ネストしてると値がおかしくなる
each をネストさせると riot.js 内部エラー
変数を省略すると update されない
each 内のカスタムタグが取得できない
etc…
最新版では直ってる (はず)

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