Riot 勉強会 #2 の資料です。 http://runstant.com/imakei/projects/36b64780

1. Riot.jsと
フォームのデータバインディング
いまけい(@imakei_)

2. 自己紹介
いまけい @imakei_
サイバーエージェントに2015年新卒入社
Riot.jsを使ってtakusutaのwebアプリを作る
昨年9月にエブリーに転職
主にAndroid, フロントエンドをやることが多いが、
最近はサーバーもちょろっと。
趣味：コーヒー
→ 最近、高円寺でコーヒー屋を始めました。

3. takusutaの話

4. takusutaの話
2017/01/31 サービス終了

5. DelishKitchenの話
昨年12月アプリリリース
１位
フードカテゴリ
無料ランキング
※12月末 時点
※全職種において、
絶賛エンジニア募集中

6. 何話すか.
● Riotってどんな感じか、
● 初心者でもわかりやすく、
● フォームのデータバインディングを題材に、

7. 導入

8. ダッシュボードをRiot.jsで作ってます。
● Riot.js
● オレオレFlux
● AtomicDesign
● MaterialDesignLite

9. なんで？
● なるべくフロントとバックエンドを切り分けたかった。
● 最小工数でちょっとでもリッチに。
● 後々改修することを前提に。
● 僕が一番早く書けるのがRiotだった。

10. 導入：Flux

11. 導入：AtomicDesign

12. 導入：Material Design Lite

13. ここから本題

14. みなさん、<form>どうしてます？

15. どんなフォームが作りたい
● 即時でデータバインドしたい
● MDL使いたい
● Atomicデザインな<input>
○ <input>のタイプごとに違うコンポーネント
○ 再利用可能
● Fluxなデータフロー

16. 界隈どんな感じ？
● AngularはngModel
● ReactはControlled Componentがスタンダード？

17. じゃRiotで書くと

19. 要件なんだっけ？

20. 要件
● 即時でデータバインドしたい
● MDL使いたい
● Atomicデザインな<input>
○ <input>のタイプごとに違うコンポーネント
○ 再利用可能
● Fluxなデータフロー

21. さっきのソースコード

22. パターン１

25. 要件
● ❌ 即時でデータバインドしたい
● MDL使いたい
● Atomicデザインな<input>
○ ◯ <input>のタイプごとに違うコンポーネント
○ 再利用可能
● ❌ Fluxなデータフロー

26. パターン２

29. 要件
● ◯ 即時でデータバインドしたい
● MDL使いたい
● Atomicデザインな<input>
○ ◯ <input>のタイプごとに違うコンポーネント
○ ❌ 再利用可能 → optsはプリミティブがいい。
● ❌ Fluxなデータフロー

30. パターン３

32. パターン３’

34. 要件
● ◯ 即時でデータバインドしたい
● MDL使いたい
● Atomicデザインな<input>
○ ◯ <input>のタイプごとに違うコンポーネント
○ ◯ 再利用可能
● ◯ Fluxなデータフロー

35. 結論

36. 結論
● <input>ごとにコンポーネント分けましょう
● optsはプリミティブとonChange(onInput)のコールバック
● データの更新はコールバックの中でAction叩きましょう
今回発表分のソースコードはここにあります.
http://runstant.com/imakei/projects/36b64780