React.js meetup #2 #React

Official

slide
v0.14の変更点について
今Beta3、来週RC出るよ
StatelessComponentsが追加される
DOM node refs
- refでDOMノードが直接触れるようになった
パッケージの分割が変わった
- react
- react-dom
- react-addones-xxx
- unstable_batchedUpdates
- react-toolsはDeprecate。Babelを利用する。
- constantElements,inlineElements (Babel)
Babel6.0で結構変わる
v0.15の変更点
- GCリリース
- v0.14後にすぐ出るかも
- https://github.com/facebook/react/pull/3583
Animation
- React-Motion
Slack
discuss

slide
Flow
jsの静的解析ツール
FBのコードはめちゃデカイ
FlowのアイディアはHackから借りた
Type inference (型チェック)
- Mixed type (特別な型。何でもあり)
- Any type (特別な型。何でもありだけど、レガシーコードが合った時に仕方なく使うやつ)
- Void type (undefined)
- Array,Tuple,Ojbect,Union
Nullable Types
- Type Inference (?string, ?numberとか)
Gradual Migration

/* @flow */ // これ書くと型チェックしてくれる
/* @flow wark */

slide
Redux
jsの状態管理コンテナ
Fluxの仲間
Flummoxの作者からRedux使えとの事
SPA作る時に状態管理が必要になってきた
- 状態管理は難しい
ReactでDOMと状態は切り離されたけど、Fluxというフローに当てはめたけど、これだってのがなかった。Reduxがしめしてくれそう。
SingleStateTree
Reducer
- Stateのfilter/mapper
- 自分のStateを変更するかどうか持っている
- event -> view -> action distach -> message -> 全てのReducerがcallされる
Middlewares
- メッセージを伝達途中で改ざんする
- 例:流れてくるメッセージをロギング
reactとの併用はreact-reduxが便利
- Reactバインディングを提供する。connect()関数とか

slide
Universal Javascript
- ES modeuls
- Browserify
- Nativeモジュール避ける
- DOMの仕様入ってない
ReactはUniversalJavascript？
- ReactComponentはUniversal
- VirtualDOMはUniversalじゃない
- documentはUniversalじゃない
Reactv0.14はrendererがすり替えられる
- react-dom
- react-native
- react-canvas
- react-pixi
- react-three
- react-blessed
- etc...
React使ってみてどうだったか
- 状態管理が楽(handling state transaction becomes easy)
- componetnWillUpdateとかcomponetnShoudUpdateとか細かい管理が必要でキツかった
- reactが119KBあって、あまりデカイのは作れない
ReactとDDD
- UILayer: React
- Application Layer: Flux
- Domain Layer:
- ...
mizchi/arda
react-routerはクセがあって嫌だった
Domainはユニバーサルで書かれるべき
SmartUIは避ける