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

console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

React.js meetup #2 に行ってきたメモ

いってきたシリーズが続いております。
つまりはメモ記事です。

React v0.14について by @koba04

Reactjs v0.14 changes // Speaker Deck

  • Stateless Components: stateいらずのpropだけなコンポーネントが欲しい場合に
  • this.refs.** でDOMの参照が取れるように
  • よりisomorphicな感じに機能が分割された
  • addon類が個別のパッケージになった
  • react-toolsがdepricatedになってbabel使えになった
  • v0.15もすぐ来そう
  • https://github.com/chenglou/react-motionってのが良いらしい

でもやっぱアニメーションとか考えるのつらそうよねー。

React v0.14 Beta 1 | React

あと読む。

Flowtypeについて by @kelemen_viktor

Facebookの前はMicrosoftとかCookpadにいたりしたらしいですよ。

  • FacebookやReactのコードベースは巨大なので、秩序を保つ仕組みが必要
  • そこで型 -> flowだ!
  • 動機はPHPのためにHack作ったのと一緒で、いろいろ似せてるとこがある
  • NullableTypeは ? を前につける
  • MixedTypeにするとなんでも入る
  • Void, Arrays, Tuples などなどもある
  • Objectに一旦セットした値も型チェックしてくれる
  • UnionTypeって言って | でどれかみたいな指定もできる -> var a: 'bar' | 'foo' = 'bar';
  • これはFluxのAction振り分けるところとかで有用
  • /* @flow */ と /* @flow weak */ って感じでモードを切り替えられる
  • ただの型チェックの仕組みじゃなくて、もっと先の賢いツールを目指してる
  • Facebookのコードでほぼflowが使われてるかというとそうではない
  • けど新しいとこでは基本的に使うようになってる

型を持ち込むことに対しての云々は今まで散々語られてきたと思うけど、Facebook内でもだいたい同じ印象らしい。
だいぶ長いけど過渡期感がすごいですよねー、いま。

Introduction to Redux by @axross_

Macの壁紙がかっこいいw

Introduction to Redux // Speaker Deck

ちなみにReduxはコレ。

Read Me | Redux

  • ReduxはオレオレFluxのひとつ
  • Flummoxよりも最近では人気(というかもうRedux使えみたいになってるらしい)
  • 単一のツリー構造の中にすべてのデータをいれる
  • Tree -> State -> Reducer
  • ReducerっていうやつがStateの前に立つ
  • expressのmiddlewareみたく、途中に噛ませる機能があったり
  • Reactで使うなら、https://github.com/rackt/react-redux
  • React-routerと使うなら、1.0.0-beta2以降が良いらしい

Reduxがいかほどのものか確かめないと!

React Everywhere(仮) by @mizchi

どこでも React する // Speaker Deck

  • v0.14でレンダラーが差し替えられる
  • なので、dom相手(ブラウザ)だけじゃなくても使える
  • react-pixi / react-three / react-**
  • Reactはcomponent(Will|Should)Updateの最適化が結局辛い
  • それに容量がそれなりに重い
  • DDD的にいうとReactはプレゼンテーション層
  • Fluxはアプリケーション層

あとは自作フレームワークの紹介など。

LTたち

会場の懇親会化があってパソコンとじたので思い出してかく。

Google Closure Toolsで作った大規模サービスにReactを導入した話 by @ama_ch

  • Closureの中にReactをどうやって仕込むか
  • Closure Compilerのexternsってのに指定すれば逃がせる
  • createClassじゃなくて、Compoentをつかってやる

Fluxとイベントソーシングの話(仮) by @amagitakayosi

  • DDD的考え方にFluxをあてはめると・・・
  • DDDの例の本むずかしそう
  • どういったActionを発行したかを記録しておけば、いつでもその時点を再現できる

React Componentのコンストラクタ/コンストラクト by @jshosomichi

  • createClass -> renderってやってるアレ、内部でどういうことしてるかの説明
  • Reactやるなら一句詠めなきゃダメです

Our wish to Flowtype by @teppeis

  • Flowは言語感なくていい(!TypeScript)
  • はやい
  • d.tsサポートしてくれない
  • OCamlなのでコントリビュートしにくい

おわりに

どこぞでReactは考えることを減らしてシンプルさを提供してるーみたいな話を聞いたけど、そのほかにもいろいろ考えること増えててなんだかんだプラスマイナス0ではないよねーという感想。

あれ勉強しとかないとなーって思ったまま日がたって、その頃にまた新しいの出てたりするので大変よね。
このへんの使ってイカのやつリニューアルしようかしら・・。