Skip to content

Instantly share code, notes, and snippets.

@yusukegoto
Created September 27, 2016 12:47
Show Gist options
  • Save yusukegoto/d14a349bb6b52a0467c1303f87db56aa to your computer and use it in GitHub Desktop.
Save yusukegoto/d14a349bb6b52a0467c1303f87db56aa to your computer and use it in GitHub Desktop.
React.js meetup #4

React.js meetup #4

ページ

GraphQL API

@Quramyさん

欲しい情報を欲しい分だけ返してくれるAPIがGraphQLやFalcor Demand Driven Architectureというらしい

GraphQL Relay

Facebook製 GraphQLは2016.09.14にProduction Ready githubもGraphQL APIを公開 Github GraphQL API

  • Relay ReactとGraphQLを統合したFW
  • react-apollo Meteoの会社が頑張っている

Relayから接続するにはサーバ側でGraphQL Relay Specを満たす必要がある

GitHubは満たしている

Falcor

Netflix製 グラフ思考のライブラリ どちらかといえばModel JSON Graphというデータ形式で構築する

Reactの書き方がちょっと古いがNetflixのスライドが参考になる FalcorJS and React

懸念

  • サーバの結合関係が決めれない
  • N+1が簡単に発生しそう

N+1はキャッシングで頑張る?? 相手が不特定多数の場合には有効だが、対象がクローズドなら不要.

複雑なJavaScriptアプリケーションを考えながら作る話

azuさん

資料

Fluxの中でビジネスロジックはどこに書く? Storeってかいてある. ドメインモデルを作りたい

FluxではStoreは意外にドメイン系は責任を複数持ってしまている(WriteとRead) FluxとDDDの統合方法 CQRS(コマンドクエリ責任分離)は守りたいのでstoreをread/writeでわけたい .Netアーキテクチャパターンに詳しいらしい

Almin.js

Almin.js provide Flux/CQRS patterns for JavaScript application

amin.js

UseCaseには実際の処理を書く.トランザクションスクリプトになる. 依存関係逆転の原則(DIP)

Should I use redux-saga or not?

@kuyさん

このジャンルはside-effectsというらしい. redux-saga redux middleware. ReactにもReduxにも書きたくないコードを書く場所. 非同期も同期で書けるようにしている. 内部はどこまで命令を実行したかの状態マシーン. generator関数書きまくりで同期的に書かせる.

あからさまに非同期ネストが減っている

redux-thunkはコールバックとネスト多い

function* handleFetchAPI() {
  yield take('FETCH_API');
  const username = yield select(getUsername);
  const { data } = yield call(api, username);
  yield push(api, username);
}

とはいいつつactionがrejectできないなど問題点はあり決定打ではない. Middleware戦争は続いている.

sagaよりいいのは? Redux-logicというのをみている Redux Logic

Real World React

@mizchiさん qiitaのフロントサイドエンジニア

スライド

Not SPAの複雑なWebサイトのフロントエンドにReactを入れたい

時代

  • Ajax以前
  • jquery時代
  • 構造化jquery(backbone)
  • データバインディング
  • 仮想DOM
  • (jsx等の縛りなしの仮想DOMの隠蔽が次に来る??)

Reactの難しさの再考

  • React自体のエコシステム
  • Reactの複雑化に対応するFlux

requrieだけで内部で処理が走って副作用が知らない間に起こっている場合がある

昔のQiitaはRails backbone jquery plugin 少量のjasmine ReactだjQueryだという以前にドメインを理解しないといけない

sprocketsをすててbrowserifyにした. ファイルスコープが欲しかった.

旧
qiita.foo

新
const foo = require './foo';

Reactのテストはenzyme一択

airbnb/enzyme

今はReact Railsと自作Flux flowtypeとReactは相性がいい

ReactコンポーネントとCSSコンポーネントは1対1なのか問題について

@shibe97

アトミックデザイン コンポーネントにcssコンポーネントを対応付ける. 工数はかさむので大規模案件だけに限るのでは.

ReactとGoogle Analytics

@naoki_kurosawa

react環境にはscriptタグを書くかcomponentで埋め込むか reduxよりrouter側のonenterにアナライザを埋め込むと効率よくsendできる.

reduxを使わずにreact+railsする

@muratayusuke aiトラベル

1ページ1コンポーネントのWebアプリをRailsとFluxで作ってみると必要なファイルが7個も react-railsはサーバサイドレンダリングをすると初回にv8のロードがあるため激遅らしい

Jest

@cpojer facebookでjest作っている

React用のテストスイート jestは各テストが別プロセスで動くので早いし変数も影響少ない v15が9月にリリースされた watchモードもある snapshotマッチャでレンダリングされたhtmlをjsonとして持っといて比較できる 至れり尽くせり!!

所感

ドメインがやっぱり一番. ReactやFluxがドメインがあまり考えられていないから みんながんばっている.

その他

jsでの作り方の変遷の参考 革命と秩序とSPA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment