Gunosy React Meetup行った #gunosyreact
行った。オフィスすごく綺麗だった。 みなさんすごい勢いで発表していくし、ピザの香りでお腹すくし、終わった後の疲労感すごかったｗ
ReactNativeの話も、v0.13〜の話も、実践？の話も聞けて結構満足度高めだった。
感想
- React.jsで考える再利用性の高いUIデザイン
- うまく抽象化できれば確かになんか楽になりそうと、よくわからんけどワクワクした
- 「Componentが貯まればよりスピード感高まる」と言っていて、なるほどーと思った。
- が、まだv0.13だし、Componentのメンテが大変にならないかなーとも思った
- React Canvasで作るFlappy Bird
- 元某エヴァンジェリストが見るReact Native
- React v0.13
- 生koba04さん初めて見た
- context周りは全然しらなかった。というか結構知らないことあって、さすがや～と思った
- ES6 ClassesでComponent書く記法、mixinもいつかは対応するのだろうと思ったけど、対応しない方に向かいそうなのかー
- ES6 Classesは出来ないこと多いしまだ使わんとこと思っていたが、今日から全部classで書くと誓った
以下、メモ貼り付け
メモ
React.jsで考える再利用性の高いUIデザイン
再利用性
- Reusable Components
UI Designとコンポーネントの関係
- UI Design = Micro Design in Macro Design
- Micro Design => UIパーツ
- これらの組み合わせてページを作る => Macro Design
- Component => Micro Design
- 同じ機能のものが同ページ内に複数あるケースが散見
- つらい
- 「機能」にフォーカスすると結構そういうのあるで
- 「機能」
- 同じならテスト楽、使いまわせる、最小単位でUX検証可能に
それが「Reusable Component」なんやないか
既にあるで
- react-components.com
- react rocks
- open source at FaceBook
デザインワークフロー
- これまで
- これから
- Reactの価値を下げないように考えないといけない
- 作り直しの防止
- 例）modal
- ありがちなヘッダーとか閉じるボタンはReactで共通化
- デザイン検証したいとこは画像渡すだけにしとく
- これやるとプロトタイピングから実装への移行が楽や。スピード感マシマシや。
まとめ
- Reusable
- Componentが貯まればよりスピード感高まる
- 全てはComponentに宿るで〜
React Canvasで作るFlappy Bird
www.slideshare.net
- @tejitakさん
- 余興や。楽しんで聞いてくれ
- LINE
React Canvas
- https://github.com/Flipboard/react-canvas
- flipboard社製
- CanvasをDOM的に扱えるReact Component郡
- Flex layoutなどCSS互換なAPIもある
- flipboardのモバイル版で使われている
Glaxy Octopus
どうやって作るか
- とりあえずJS＋DOMで実装してみ手考えた
- 170行くらい、意外と短い
- React Componentでも作ってみた
- パイプ作るときにkeyを一意にしないとうまくいかない
- React Canvas
パフォーマンス
- 今回程度の実装ではあんまり差は出ない
- setStateとアニメーションがあんまり相性良くなかった
- 非同期で値が反映されるため
まとめ
Immutable.js and Kizuna.js
- @Greg at Gunosy
- サーバサイド
- 俺がReactを初めて推したんや
Purity
- 純粋関数
- 参照透過性
- 副作用が無い
- React.PureRenderMixin
- componentが純粋だったら、最適化してくれる
- stateとpropsに変更がない場合、再レンダーしない
- 早くなるで
- 問題点
- 配列やオブジェクトやオブジェクトの比較
- ex) pushなど、内容は変わるのに参照が変わらないので死
- 配列やオブジェクトやオブジェクトの比較
- Immutable.js使おうで
Immutable.js
- Facebook製
- push後は新しいオブジェクトができる
おまけ：Data Flow
- 親のデータをどう変えるか
- 親からCallbackもらう
- 階層増えるとつらい
- thisの扱いつらい
- Flux
- 実装多すぎ
- は？これJava？
- 親からCallbackもらう
- Kizuna.js
- 作った
- テストしてねえけどな！
- おすすめしない
- angular.jsっぽい
- binding属性
- $scope的な感じ
- binding属性
- 作った
元某エヴァンジェリストが見るReact Native
- @masuidriveさん
- http://masuidrive.jp/
- IT芸人で検索
ReactNative
- とある似たようなプロダクトのエヴァンジェリストを2年くらいやってた
- JSでネイティブアプリ
- CSS like
- Androidはcomming soon...
- Learn once, Write everywhere
Titanium Mobile
- 今はXMLで画面書く
- Css Like
- Write once, Adapt everywhere
- ReactNativeについてブログ書いてる
- Titaniumはクライアントだけじゃなくて
- Mbaasとかもやってるんや
共通点
- JS Core
- ネイティブの機能は直接使えない
- ラップしたコンポーネントを呼ぶ
- 1つのソースで全部動くとは言ってない
相違点
- JSX or not
- TitaniumはHyperloopっていうネイティブ呼べるようになるやつがそのうち入る
- Business
共通の問題点
- Nativeをラッピングする必要性
- 使う人と作る人の乖離
- Titaniumの勢いが落ちてきてるのもこれが原因や
じゃあFacebookはやるのか？
React v0.13
- @koba04
v0.13
- 3/10 release
- ES6 Class syntax
- thisのbindがされないとか
- このままmixinはずっと使えないかも
- 他にも使えない関数ガガガ
- getDOMNode, isMouted etc
- prop immutable
- v0.14でこれを前提としたパフォーマンス改善が入る
- shouldComponentUpdateで変更検知できない
- setState
- function渡せる
- 初回のsetStateも非同期に
- isMounted時にsetStateしても死なない
- getDomNode -> findDOMNode
- owner, parent
- context
- ドキュメントにないやーつ
- 暗黙的に子に渡す値
- childContextTypes
- getChildContext
- thic.context
- react-routerもthis.context使う実装になった
- refにfunction渡せる
ref={(c) => this._hoge = c}
- React.cloneElement
- refは保持される
- childrenにIterator渡せるようになった
- keyed objectはWarningでる
- createFragment使え
- --targetのdefaultはes5
- ES6 classで書くとメソッドとかが列挙されない感じになる
- shallow rendering
- 元々合ったけどちゃんとドキュメントになった
- 1階層までをrenderして結果を返す
- nodeでも動く
0.14
- Reuse Constant Value Types #3226
- Tagging ReactElements #3227
- Inline ReactElements #3228
more feature
- Observable API #3398
- React ♡ Parse
1.0
- Road to 1.0
- 既にProduction readyや
- contextどうするか
- Addonsの整理
- Animationの改善
NativeApp開発者からみたReactNative
ネイティブ開発でのスタンス
- ちゃんと各プラットフォームで最適化するべき
- ますいさん「おれもそう思うで」
- あんまりマルチプラットフォームに夢見るべきじゃない
Qiita Reader作ったで
ダメ
- npmモジュールが使いまわせるかは微妙
- 結局iOS+Reactの学習が必要
- RCTBridgeModule
感想
- 劇的に開発を楽にするものではない
最後に
- Reactの文脈をナイティ部に持ってくる仕組みなのでは。
