React.js meetup #1に参加してきました

今日はReact.js meetup #1に参加してきました。
http://reactjs-meetup.connpass.com/event/11232/
一人当たりの持ち時間が短くてバタバタしてる感じでしたが、
とても有意義な話が聞けてすごく刺激を受けて帰ってきました。
メモったことや感想をつらつらと載せていきます。


・React 概論 @naoya_itoさん
https://speakerdeck.com/naoya/reactgai-lun
今日発売のWEB+DB PRESSにreact.jsの記事書いたそうです。

PHPフレームワークのXHPの移植として開発されたのがきっかけ
facebookのプロダクションで絶賛使われてるってのがいい

≒サーバーサイド脳で書ける
Viewは常に全更新
Viewは宣言的に定義

従来の手法の難しさ=DOM操作の難しさ
-DOMが状態を持っている
-グローバル　(どこからでも書き換えられる)
-非同期 (外部と通信したりとか)

VirtualDOM
-速度チューニングする余地は残されている
-通常使う時はVirtualDOM気にすることはない

Reactの責務
1 DOMの更新
2 イベントへの反応

サーバーサイド脳でいける
コンポーネント指向(変更がコンポーネントに局所化される)
データフローが明確

生産性より信頼性
-可読性、保守性など長期的な信頼性に重きを置いている
-書く時間より読む時間の方が長いよね

jquery併用できる
-DOM操作はパラダイムが違うのでよくわかんないでやるべきではない
-$ajaxとかは使ってかまわない


・react-rails @hokacchaさん
https://speakerdeck.com/hokaccha/react-rails-1
react-railsはreactjsの公式が作っているgem

mount view helper and UJS
-マウントするコードを書かなくていい
-APIリクエストしない分高速

server side Rendering
-{ prerender: true }をつける
どうやってやっているか
--ExecJSでJSを実行
--therubyracer(V8)推奨

ベンチマーク
-react > haml
-hamlと同等かそれより早いくらい
-死ぬほど遅いわけではなさそうというのがわかるベンチマーク

turbolinks
-普段はまっさきにOFFにするけど、使っても動く

まとめ
-グリングリン動くSPAとかにはたぶん向かない
-部分的に動的コンテンツがあるようなアプリケーションだと使いどころあるかも
-Turbolinksにわんちゃんあるかも


・10分で実装するflux @azuさん
http://azu.github.io/slide/react-meetup/flux.html
#データフローを追っかけていったので、フローがわかりやすかったですが、
#話は難しかったです。。


・mercury/mithril.js @yosuke_furukawaさん
https://speakerdeck.com/yosuke_furukawa/mithril-dot-js
introduction to react=神資料
https://speakerdeck.com/hokaccha/introduction-to-react

react
-shouldComponentUpdate
-子ノードのすべてを再描画しないようにさせる

mithrilのアプローチ
-再描画のタイミングを制御して回数を減らす
-イベントの最後に再描画という形にしなくてよくなる

mercuryのアプローチ
-再描画の回数を減らす
-VDOMのtreeの探索範囲を限定する


・React/SPAの設計と運用 @mizchiさん
https://gist.github.com/mizchi/ee8256f7783dde2bea8d
#実際に開発していってぶちあたった壁とどう乗り越えたかのお話でした


・LT - React.jsと、Railsとかアイドルとか @sugyanさん
http://sugyan.com/presentations/reactjs-meetup-1/#/
@hokacchaさんの話でも出てきたturbolinksではまったのでOFFにしたそうです


・LT - Java+React.jsでServer Side Rendering @makingさん
http://www.slideshare.net/makingx/reactjs-meetupjavassr
javaでも標準でjsのengine使えるよ


・LT - React.js(React Native) + UI Design Prototyping @tsuyoshi higuchiさん
https://speakerdeck.com/tyshgc/rapid-react-prototyping-react-dot-jsdeuidezainpurototaipuwozuo-ru
デザイナーがコンポーネントを意識してデザインを作る
Photoshopのcomponent情報からreactのjsx吐き出すツール作ってた。
#すごい