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

pirosikick's diary

君のハートにunshift

Gunosy React Meetup行った #gunosyreact

gunosy-frontend.connpass.com

行った。オフィスすごく綺麗だった。 みなさんすごい勢いで発表していくし、ピザの香りでお腹すくし、終わった後の疲労感すごかったw

ReactNativeの話も、v0.13〜の話も、実践?の話も聞けて結構満足度高めだった。

感想

  • React.jsで考える再利用性の高いUIデザイン
    • うまく抽象化できれば確かになんか楽になりそうと、よくわからんけどワクワクした
    • 「Componentが貯まればよりスピード感高まる」と言っていて、なるほどーと思った。
    • が、まだv0.13だし、Componentのメンテが大変にならないかなーとも思った
  • React Canvasで作るFlappy Bird
    • 逆にJS+DOMでも170行くらいで作れるのかというのに驚いた
    • パフォーマンスはそんなに変わらなかったと言っていて、Flipboardが言っている60fpsの恩恵を受けれるのはケースは案外少ないのかもしれない
    • Canvasと意識しないで書けるなら、Canvasでパフォーマンス出なかった時に普通のDOMに戻すのも案外楽なのかなと思った
  • 元某エヴァンジェリストが見るReact Native
    • すごくためになる発表だった!!
    • 「使う人と作る人の乖離」というのはさすがエヴァンジェリストやでと思った
    • Facebookくらい大きくていろんなプラットフォームで同じUI・UXにしないといけないケースじゃないと、仕事ではあんまり活用できなそう。俺は使わない気がした。
  • React v0.13
    • 生koba04さん初めて見た
    • context周りは全然しらなかった。というか結構知らないことあって、さすがや~と思った
    • ES6 ClassesでComponent書く記法、mixinもいつかは対応するのだろうと思ったけど、対応しない方に向かいそうなのかー
    • ES6 Classesは出来ないこと多いしまだ使わんとこと思っていたが、今日から全部classで書くと誓った

以下、メモ貼り付け

メモ

React.jsで考える再利用性の高いUIデザイン

speakerdeck.com

再利用性

  • 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

デザインワークフロー

  • これまで
    • ワイヤーフレームやプロトタイピング
    • ステート・ページ単位で画像作る
      • 多い、つらい
      • 動的パーツは忘れがち
    • スタイルガイド作成
      • staticなフロント実装
        • だいたいjQueryとかでエンジニアに渡すときつらい
        • Reactに載ってないやつあるからエンジニアts
    • フィードバック
      • 各工程に戻る
  • これから
    • Reactの価値を下げないように考えないといけない
    • 作り直しの防止
    • 例)modal
      • ありがちなヘッダーとか閉じるボタンはReactで共通化
      • デザイン検証したいとこは画像渡すだけにしとく
    • これやるとプロトタイピングから実装への移行が楽や。スピード感マシマシや。

まとめ

  • Reusable
    • Componentが貯まればよりスピード感高まる
  • 全てはComponentに宿るで〜

React Canvasで作るFlappy Bird

www.slideshare.net

  • @tejitakさん
  • 余興や。楽しんで聞いてくれ
  • LINE

React Canvas

Glaxy Octopus

どうやって作るか

  • とりあえずJS+DOMで実装してみ手考えた
    • 170行くらい、意外と短い
  • React Componentでも作ってみた
    • パイプ作るときにkeyを一意にしないとうまくいかない
  • React Canvas

パフォーマンス

  • 今回程度の実装ではあんまり差は出ない
  • setStateとアニメーションがあんまり相性良くなかった
    • 非同期で値が反映されるため

まとめ

  • Canvasで意識しないでCanvas使えるで
  • 本家の更新が1ヶ月以上、止まっているのでちょい微妙

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
  • Kizuna.js
    • 作った
      • テストしてねえけどな!
      • おすすめしない
    • angular.jsっぽい
      • binding属性
        • $scope的な感じ

元某エヴァンジェリストが見るReact Native

speakerdeck.com

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をラッピングする必要性
    • iOSのバージョンが上がるたびに
    • 最新機能が使えない
    • 結局Nativeの知識要るやんけ、しかもiOSAndroid両方や
  • 使う人と作る人の乖離
    • Titaniumの勢いが落ちてきてるのもこれが原因や

じゃあFacebookはやるのか?

  • Facebookの世界観の共有
  • 開発基盤として有用
  • Facebook以外のComponent郡(Bootstrapのような)がでるかが今後の鍵やで

React v0.13

speakerdeck.com

  • @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

  • @y_matsuwitter at Gunosy
  • ますいさんとほとんど一緒やから聞き流してちょ♡
  • 開発本部執行役員
  • インフラ→なんでもやってる
  • golan布教係

ネイティブ開発でのスタンス

  • ちゃんと各プラットフォームで最適化するべき
    • ますいさん「おれもそう思うで」
  • あんまりマルチプラットフォームに夢見るべきじゃない

Qiita Reader作ったで

ダメ

  • npmモジュールが使いまわせるかは微妙
  • 結局iOS+Reactの学習が必要
  • RCTBridgeModule

感想

  • 劇的に開発を楽にするものではない

最後に

  • Reactの文脈をナイティ部に持ってくる仕組みなのでは。