読者です 読者をやめる 読者になる 読者になる

歌舞伎座.tech#6「VirtualDOMとReact」行ってきた

JavaScript

去年あたりからやたら名前を見るようになったReact、
そして mizchi さんの魂の震える投稿を見てますます気になっていたReact。

その React の勉強会が開催されるだと・・!?ということで参加してきた。

歌舞伎座.tech#6「VirtualDOMとReact」
http://kbkz.connpass.com/event/11254/

結論からいうと、React まじプロジェクトに導入したい。
データセットを受け取って大量の再描画が必要な箇所があって、
今は丸ごとJSONでテンプレート返してDOM差し替えてイベント再バインドなんてやってる。
当然速度もいまいち。
応答速度が重要な場面では特に有用そう。
もちろん速度面だけでなくて、1方向に処理が流れるって設計、いいですね。

アレをjQueryで書き換えて、イベントバインドしてから、次はこっちを書き換えて・・・・
みたいな辛い戦いはいらんかったんや・・・・
それに、t_wada さんの事例で、他のページではAngularだったりを使ってるプロジェクトで
1ページだけReactで実装した例が出ていて、特定のページだけ導入というのも可能。

辛そうなポイントは React 使うなら jQuery 捨てろって話。
VDOMを生DOMに反映する流れをjQueryは簡単にぶっ壊すからかなぁ・・。 (リードオンリー運用ならいけるとのこと)

イベントのキャッチだけに特化させるなら生存可能できるのかな?
jQueryUIも駄目っぽい。
datepickerとか 全部ReactのComponentとなっているものを探すなりしないと。
t_wada さんはほとんど自作したそう・・
そして話を聞いているとアニメーション、バリデーションが辛い感はあった。 アニメーションに関してはtransition程度ならできるっぽい?

JSXで生DOM書く点は、RailsのViewとの住み分けとかどうすればいいのかイメージが沸かなかった。
生HTMLっぽくかけて、他の人が理解しやすい(追いやすい)コードになるとはいっていても、
テンプレートが二重管理になってしまいそうで、筋悪に感じてしまう。
HamlかSlimでかけないものか・・

学習について、
公式のチュートリアルがめちゃくちゃ充実しているので、2回程度写経してから、
ここに書かれているを勉強すると概念を理解できるようになるそう。
http://facebook.github.io/react/docs/thinking-in-react.html

最近だと年末に koba さんがやってた 一人 AdventCalender がめちゃくちゃ参考になるとのこと。
http://qiita.com/advent-calendar/2014/reactjs

発表者と資料

セッション

@kyo_ago さん http://0-9.sakura.ne.jp/pub/kbkz_tech/plumber.html

@koba04 さん https://speakerdeck.com/koba04/dive-into-react-dot-js

@t_wada さん http://twada.herokuapp.com/presentations/react_kbkz_tech/react_kbkz_tech.html#1

@mizchi さん https://speakerdeck.com/mizchi/real-world-virtual-dom

LT

@pad_tech さん http://slides.pab-tech.net/virtual-dom-and-react/#1

@masuidrive さん https://speakerdeck.com/masuidrive/react-plus-cordovade-sumahoapuriwozuo-ru

@teppeis さん http://www.slideshare.net/teppeis/flowtype-introduction

@jigsaw さん

@banana_umai さん http://www.slideshare.net/YutaShimakawa/fluxdispatcheraction

azu さんによるアウトライン

http://efcl.info/2015/02/16/kbkz_tech/