tokyo react.js #3 meetup (ja): missing pages: reactjs/graphql/relayjs

Missing Pages: ReactJS/Flux/GraphQL/RelayJS

Khor, @neth_6, re:Culture

FBのドックで書いてない説明

アジェンダ

● ピユアなFluxの使い方

● GraphQL○ RelayJSなし

○ NodeJSサーバーではないのGraphQLセットアップ

● RelayJS○ ReactJS: カプリングを下げて , リユースを上げる

○ RelayJSとGraphQLのシナジー

○ NodeJSサーバーではないのRelayJS/GraphQLセットアップ

Reactのファミリー: 一言で ...● ReactJS: UIデーターとレンダリング

● Flux: データーフローとコードのストラクチャー

● GraphQL: シングルAPIエンドポイントデーターアクセス ● RelayJS: Reactコンポーネントのデーターdeclaration&コロケーション

GraphQL: RelayJSなし

GraphQL

GraphQL出来る

APIエンドポイント

シングルエンドポイントで全てのデーターを提供

store(email: “[email protected]”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ],}

GraphQL (cont.)query { store(email: "[email protected]") { name, address }}


GraphQL (cont.)query { store(email: "[email protected]") { name, address }}

store(email: “[email protected]”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’}

いらっしゃいませHello Shop

住所： 1-3-1 Aoyama オンラインショップAPIエンドポイント

GraphQL (cont.)query { store(email: "[email protected]") { categories { name, products { name, price, stock } } }}

store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ]}

Hello Shop


GraphQL (cont.)query { store(email: "[email protected]") { categories { name, products { name, price, stock } } }}

store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ]}

シングルエンドポイント

階層的なデーター

クライアントコントロールクエリー

１ラウンドトリップ

データー


GraphQL: セットアップ

GraphQL: クライアントサーバーモデル

ブラウザ

http(s)

サーバー

GraphQL: オーバーHTTP(S)

ブラウザ

GraphQLサーバー

バンドル JS

GraphQLオーバー

http(s)、など.

サーバー

GraphQLオーバーhttp(s)

GraphQLオーバーhttp

GraphQL: Enabling the Server

ブラウザ

GraphQLサーバー

バンドル JSサーバー

サーバーライブラリ

graphqlGraphQL スキーマハッシュ

GraphQLオーバー

http(s)、など.

GraphQL: JS Code

ブラウザ

GraphQLサーバー

バンドル JS

バンドル JS

サーバー



GraphQLオーバー

http(s)、など.

GraphQL: Required JS Libraries

ブラウザ

バンドルJS

バンドルJS

サーバー

JSライブラリ

reactreact-domgraphql

GraphQLオーバー

http(s)、など.GraphQLサーバー



GraphQL: Bundling Your JS Code

ブラウザ

バンドル JS

バンドル JS

サーバー

JSライブラリ

reactreact-domgraphql

自分の JS

GraphQLオーバー

http(s)、など.GraphQLサーバー


graphql

browserify/webpackGraphQL

スキーマハッシュ

ReactJS (レビュー)

ReactJS

Courtesy: https://facebook.github.io/react/docs/thinking-in-react.html

Hello Shop

ReactJS (続き。。。)Hello Shop

React (続き。。。)Hello Shop

階層的なビュー => GraphQL 階層的なデーター

ReactJS (続き。。。)アブストラックション

各ReactJSコンポーネントが理解なこと:

● 自分のデーター

● 自分のレンダリング

● チルドレンに一部分のデーターを渡す

React (続き。。。)Fetch Data

Hello Shop

React (続き。。。)Hello Shop

チルドレンにデーターを渡す

this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], },}

データーとレンダリング this.props.store.name

渡すthis.props.store.categories

そんなTight Coupling, High Reuse ではない

● 親はチルドレンのデーターを知るのが必要○ チルドレンのデーターをフェッチ

○ チルドレンの渡すのデーター部分を理解する

render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }

RelayJS: コンポーネント・データーコロケーション

カプリングを下げて、リユースを上げる

GraphQL

GraphQL出来る

シングルエンドポイントで全てのデーターを提供



サンプルアップ

Hello Shop

サンプルアップ: 簡単化

Hello Shop

RelayJS:コンポーネント・データーコロケーションstore(email: “[email protected]”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price: 20, stock: 50 }, { name: ‘Baseball’, price: 5, stock: 30 }, … ], ... }, … ],}

fragment on Store { name, address}

Hello Shop


fragment on Store { categories { name, products, }}

RelayJS:コンポーネント・データーコロケーション


Hello Shop

RelayJSは各コンポーネントのデーターをフェッチ

チルドレンにデーターを渡す

this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], },}

データーとレンダリング this.props.store.name

渡すthis.props.store.categories

そんなTight Coupling, High Reuse ではない

● 親はチルドレンのデーターを知るのが必要ない○ チルドレンのデーターをフェッチ

○ チルドレンの渡すのデーター部分を理解する

render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }

RelayJS: GraphQLとのシナジー

なぜRelayJS?● フィーチャー:

○ コンポーネント・データーコロケーション

○ Connection Id: データー再フィッチ

○ Connections: One-to-Many 関係・プージネション

○ Mutations: データー変更があったとき Reactコンポーネントを自動アップデート

● 暗黙なフィーチャー:○ 自動データーフィッチ (AJAXコードなしで)○ データーキャッシュとバッチフィッチ

● 面白いフィーチャー:○ ロード中のスピナー

○ データーフェッチ失敗な実行なコード

○ オプチミスチックUIアップデート

RelayJS: セットアップ

RelayJS:コンポーネント・データーコロケーション

ブラウザ

GraphQL/RelayJSサーバー

バンドル JSサーバー

JSライブラリ

reactreact-dom

react-relay

babelify-relay-plugin

babelify

RelayJS コンテナ GraphQLオーバー

http(s)、など

graphql


graphql

自分の JS と

Relay.QL

browserify/webpack

GraphQL スキーマ

JSON

バンドル JS

GraphQL スキーマハッシュ

コンバーター

graphql-relay

参考

● 記事○ GraphQL/RelayJS (non NodeJS): https://medium.com/@khor/relay-facebook-on-rails-8b4af2057152○ Pure ‘Flux’ (non NodeJS): https://medium.com/@khor/back-to-front-rails-to-facebook-s-flux-ae815f81b16c

● スタータキット○ Rails: https://github.com/nethsix/relay-on-rails

● チョイス: React, React (with Container), Flux/Redux, GraphQL/RelayJS ○ Shared by @koba04 - http://andrewhfarmer.com/react-ajax-best-practices/

● フォロー: @neth_6, @reculture_us

ありがとう:● みんな!● koba04!● Facebookエンジニア!

tokyo react.js #3 meetup (ja): missing pages: reactjs/graphql/relayjs

Technology