riot.js と戦った話 (8月26日 oro lt 会)
TRANSCRIPT
![Page 1: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/1.jpg)
Riot.jsと戦った話片山真也 フロントエンドエンジニア
![Page 2: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/2.jpg)
![Page 3: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/3.jpg)
![Page 4: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/4.jpg)
React
![Page 5: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/5.jpg)
Riot.js
![Page 6: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/6.jpg)
<ul>
<li each=“{ item, i in list }”>{ item.text }</li>
</ul>
![Page 7: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/7.jpg)
<input type=“text” value=“{ text }”
onchange=“{ onChangeInput }”>
![Page 8: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/8.jpg)
<div class=“item { selected: selected == item }”
each=“{ item in list }”>
{ item.text }
</div>
シンタックスの数が少なく、 短い学習ですぐに書ける
![Page 9: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/9.jpg)
![Page 10: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/10.jpg)
React-like とつくからには Flux っぽく書きたい
![Page 11: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/11.jpg)
Riot.jsCustom tags (View + Action)
<modal> <accordion> <profile>
EJS
RiotControlDispatcher
ModalStore AccordionStore ProfileStoreStore
WebPack
業務ではこんな感じの構成で使ってるけど、 双方向にデータが流れてるから Flux のような何か
![Page 12: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/12.jpg)
RiotControl はたったの 17 行のライブラリ
![Page 13: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/13.jpg)
RiotControl.on(‘updateMessage’, (messages) => {
this.messages = messages;
this.update();
});
Dispatcher として使える
![Page 14: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/14.jpg)
他の実装だと riot-todo が Flux を実現しつつ、 簡略なコードで良い感じ
![Page 15: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/15.jpg)
Riot.js バグが割と多い
![Page 16: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/16.jpg)
業務で使っている時も結構地雷踏みました
![Page 17: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/17.jpg)
何度もバージョンを変えつつバグを避けたり
![Page 18: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/18.jpg)
RiotControl も実装が簡単すぎるので、 使い方を気をつけないと意図しない動作が
![Page 19: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/19.jpg)
each={ item, index in list } のバグ
インデックスが一文字に (index -> x)
ネストしてると値がおかしくなる
each をネストさせると riot.js 内部エラー
変数を省略すると update されない
each 内のカスタムタグが取得できない
etc…最新版では直ってる (はず)
![Page 20: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/20.jpg)
![Page 21: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/21.jpg)
![Page 22: Riot.js と戦った話 (8月26日 oRo LT 会)](https://reader030.vdocuments.net/reader030/viewer/2022020108/58732ae11a28ab596c8b58ad/html5/thumbnails/22.jpg)
Riot.js 2.2.4 は (たぶん) 安定してるので、 2.2.4 を使いましょう