搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
2 likes2,958 views
Riot 勉強会 #2 の資料です。 http://runstant.com/imakei/projects/36b64780
搁颈辞迟.箩蝉とフォームのテ?ータハ?インテ?ィンク?
- 2. 自己紹介 いまけい @imakei_ サイバーエージェントに2015年新卒入社 Riot.jsを使ってtakusutaのwebアプリを作る 昨年9月にエブリーに転職 主にAndroid, フロントエンドをやることが多いが、 最近はサーバーもちょろっと。 趣味：コーヒー → 最近、高円寺でコーヒー屋を始めました。
- 3. 迟补办耻蝉耻迟补の话
- 6. 何話すか. ● Riotってどんな感じか、 ● 初心者でもわかりやすく、 ● フォームのデータバインディングを题材に、
- 7. 导入
- 8. ダッシュボードをRiot.jsで作ってます。 ● Riot.js ● オレオレFlux ● AtomicDesign ● MaterialDesignLite
- 9. なんで？ ● なるべくフロントとバックエンドを切り分けたかった。 ● 最小工数でちょっとでもリッチに。 ● 後々改修することを前提に。 ● 僕が一番早く書けるのがRiotだった。
- 10. 导入：Flux
- 11. 导入：AtomicDesign
- 13. ここから本题
- 15. どんなフォームが作りたい ● 即時でデータバインドしたい ● MDL使いたい ● Atomicデザインな<input> ○ <input>のタイプごとに違うコンポーネント ○ 再利用可能 ● Fluxなデータフロー
- 16. 界隈どんな感じ？ ● AngularはngModel ● ReactはControlled 颁辞尘辫辞苍别苍迟がスタンダード？
- 17. じゃ搁颈辞迟で书くと
- 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