🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

第65回 HTML5とか勉強会 ー React最新情報 に行ってきたメモ #html5j

React Web


ちなみに、今年のHTML5 Conferenceは9/3（土）だそうです。

React現状確認 by @koba04

The state of React.js 2016 // Speaker Deck

  • React.js meetup #4が6月にあるかも
  • Reactの使用例
  • SFC: StatelessFunctionalComponentsがコンポーネントの基本
  • MixinはなくなったのでHighOrderComponentのスタイルで機能を追加
  • 新しくReact.PureComponentってのが増えるかも
  • `shouldComponentUpdate()`でチューニングするのがやっぱ速い
  • パフォーマンスチューニングするなら
    • 定番の`react-addons-perf`
    • `why-did-you-update`ってパッケージもある
  • PropTypesはLegacyで、FlowやらTypeScriptを使っていく流れに
  • `setState()`は基本的にはまとめて反映される（が、特定の場合にまとめられない
    • `unstable_batchedUpdates()`ってのもあって、まとめて`setState()`してくれる
  • StringRefもLegacyで、Refはcallbackで取るべし
  • テストで使える`shallowRenderer`
  • GitHub - airbnb/enzyme: JavaScript Testing utilities for React
  • ESLint x eslint-plugin-react
  • 最新情報は

あとで`tap-event-plugin`についてきく

メジャーバージョンアップすれば取り込まれるからもうすぐなくなるよ！！って言い続けてたけど、今も結局必要なままで・・。
どうなってるんですか？って聞いたけど、 @koba04 さんも知らないだそうですｗ

なぜReduxを使うのか by @kuy

なぜReduxを使うのか // Speaker Deck

アカウントの読みは[kai]です！

  • Redux機運の高まりを感じる
    • 同時によーわからんって声もきく
  • Reactだけだとつらい問題があってFluxがきたがそれでもつらいのでRedux
  • ReduxはFluxのStoreの債務を分割しただけ
  • Reduxは複数のStoreの存在を許さない
    • 代わりにReducerを複数にする
  • Stateの分割の考え方はボトムアップ
  • 素のReduxはオススメせず、Middlewareをあわせて使うべし
    • redux-form, redux-saga, etc..
  • とあるreducer内で他所ののstateが欲しくなったら、そもそもStateの構造を見直すのが吉
  • 非同期するならredux-sagaがよさげ
  • Reducerの分割がReduxのキモ
  • Middlewareの選定も大事

うーん、やっぱりむずかしいよーーReduxーーーというのが正直なきもち。

なんか違和感がずっと残ってるのは、この発表内でもそうやったけど、

  • Reduxもまだまだ試行錯誤する余地がある
  • なのにReduxが界隈の唯一解として語られてる（ように見える

からなんよなー。

Relay by @hokaccha

relay // Speaker Deck

  • react-relay x graphql-relay
  • データのストア、APIのハンドリングも全部やるのがRelay
    • サーバーの仕様・実装まで規定する
  • GraphQL
    • REST/RPCと同じレイヤー
  • エンドポイントは1つだけ
    • RESTでは複数のリクエストが必要なところを
    • クエリを組み上げ（ネスト）れば1リクエストで済む
  • React.ComponentをRelayコンポーネントにして使う
    • 宣言的に欲しいデータへのクエリが書ける
  • Relay.QL(`ここにクエリを書く`)
    • JSXみたいな記法じゃない！やった！
    • でもBabel通さないと動かない意味ない＼(^o^)／
    • babel-relay-plugin
  • 現状のRelayはつらい
    • Babelもサーバーがいる
    • クエリ脳に慣れない
    • サンプルが少ないというか無い

Falcorと一緒で敷居の高さがすごいやんね・・・。
あと後から導入できるシロモノではないよね。

How to style React components by @Quramy

How to style React components

CSSをコンポーネントに押し込んだところでどのみちカオスなコードを生み出す未来が見えるので、おとなしく綺麗にCSSを書いたらいいのでは？と思ってしまうのは、CSSも一応書けるよっていう人種やからなんかな( ˘ω˘)ｽﾔｧ

Atomic Design powered by React @ AbemaTV by @ygoto3_

Atomic Desigin powered by React @ AbemaTV

個人的にはさっきのCSS in JS問題でもあったようにCSSはCSSで書け派なので、こういうアプローチは割と好き。
BEMと粒度がちょっと違ったりするくらいな気がするけど、やっぱそこは設計する人のセンスに依存しちゃうんかなー。