Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
10 likes2,682 views
Feacbookドックが書いてない説明：ReactJS/GraphQL/RelayJS. Talk at Tokyo React.js Meetup #3 (http://reactjs-meetup.connpass.com/event/26229/) English version: http://www.slideshare.net/KhorSoonHin/tokyo-reactjs-3-missing-pages-reactjsfluxgraphqlrelayjs
![GraphQL
GraphQL出来る
APIエンドポイント
シングルエンドポイントで全てのデーターを提供
store(email: “admin@abc.com”) {
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 },
…
],
...
}, …
],
}](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-6-320.jpg)
![GraphQL (cont.)
query {
store(email: "admin@abc.com") {
categories {
name,
products {
name, price, stock
}
}
}
}
store {
categories: [
{ name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price:, stock: 50 }, …
}, ...
]
}
Hello Shop
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-9-320.jpg)
![GraphQL (cont.)
query {
store(email: "admin@abc.com") {
categories {
name,
products {
name, price, stock
}
}
}
}
store {
categories: [
{ name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price:, stock: 50 }, …
}, ...
]
}
シングル
エンドポイント
階層的な
データー
クライアント
コントロール
クエリー
１ラウンドトリッ
プ
データー
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-10-320.jpg)
![チルドレンにデーターを渡す
this.props = {
store:
name: ‘Hello Shop’
categories: [
{
name: 'Sporting Goods',
items: [
{ name: 'Football', price: … }
…
],
},
...
],
},
}
データーとレンダリング
this.props.store.name
渡す
this.props.store.categories](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-28-320.jpg)
![GraphQL
GraphQL出来る
シングルエンドポイントで全てのデーターを提供
store(email: “admin@abc.com”) {
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 },
…
],
...
}, …
],
}
APIエンドポイント](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-31-320.jpg)
![RelayJS:コンポーネント・データーコロケーション
store(email: “admin@abc.com”) {
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](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-34-320.jpg)
![store(email: “admin@abc.com”) {
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 {
categories {
name,
products,
}
}
RelayJS:コンポーネント・データーコロケーション](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-35-320.jpg)
![store(email: “admin@abc.com”) {
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 },
…
],
...
}, …
],
}
Hello Shop
RelayJSは
各コンポーネントのデー
ターをフェッチ](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-36-320.jpg)
![チルドレンにデーターを渡す
this.props = {
store:
name: ‘Hello Shop’
categories: [
{
name: 'Sporting Goods',
items: [
{ name: 'Football', price: … }
…
],
},
...
],
},
}
データーとレンダリング
this.props.store.name
渡す
this.props.store.categories](https://image.slidesharecdn.com/react-160223045648/85/Tokyo-React-js-3-Meetup-ja-Missing-Pages-ReactJS-GraphQL-RelayJS-37-320.jpg)
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
- 3. アジェンダ ● ピユアなFluxの使い方 ● GraphQL ○ RelayJSなし ○ NodeJSサーバーではないの GraphQLセットアップ ● RelayJS ○ ReactJS: カプリングを下げて, リユースを上げる ○ RelayJSとGraphQLのシナジー ○ NodeJSサーバーではないの RelayJS/GraphQLセットアップ
- 4. Reactのファミリー: 一言で ... ● ReactJS: UIデーターとレンダリング ● Flux: データーフロー とコードのストラクチャー ● GraphQL: シングルAPIエンドポイントデーターアクセス ● RelayJS: Reactコンポーネントのデーターdeclaration&コロケーション
- 6. GraphQL GraphQL出来る APIエンドポイント シングルエンドポイントで全てのデーターを提供 store(email: “admin@abc.com”) { 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 }, … ], ... }, … ], }
- 7. GraphQL (cont.) query { store(email: "admin@abc.com") { name, address } } APIエンドポイント
- 8. GraphQL (cont.) query { store(email: "admin@abc.com") { name, address } } store(email: “admin@abc.com”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ } いらっしゃいませ Hello Shop 住所： 1-3-1 Aoyama オンラインショップ APIエンドポイント
- 9. GraphQL (cont.) query { store(email: "admin@abc.com") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } Hello Shop APIエンドポイント
- 10. GraphQL (cont.) query { store(email: "admin@abc.com") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } シングル エンドポイント 階層的な データー クライアント コントロール クエリー １ラウンドトリッ プ データー APIエンドポイント
- 11. GraphQL: セットアップ
- 15. GraphQL: Enabling the Server ブラウザ GraphQL サーバー バンドル JS サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ GraphQL オーバー http(s)、など.
- 16. GraphQL: JS Code ブラウザ GraphQL サーバー バンドル JS バンドル JS サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ GraphQL オーバー http(s)、など.
- 17. GraphQL: Required JS Libraries ブラウザ バンドルJS バンドル JS サーバー JSライブラリ react react-dom graphql GraphQL オーバー http(s)、など. GraphQL サーバー サーバー ライブラリ graphql GraphQL スキーマ ハッシュ
- 18. GraphQL: Bundling Your JS Code ブラウザ バンドル JS バンドル JS サーバー JSライブラリ react react-dom graphql 自分の JS GraphQL オーバー http(s)、など. GraphQL サーバー サーバー ライブラリ graphql browserify/w ebpackGraphQL スキーマ ハッシュ
- 19. ReactJS (レビュー)
- 23. React (続き。。。) Hello Shop 階層的なビュー => GraphQL 階層的なデーター
- 24. ReactJS (続き。。。) アブストラックション 各ReactJSコンポーネントが理解なこと: ● 自分のデーター ● 自分のレンダリング ● チルドレンに一部分のデーターを渡す
- 28. チルドレンにデーターを渡す this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } データーとレンダリング this.props.store.name 渡す this.props.store.categories
- 29. そんなTight Coupling, High Reuse ではない ● 親はチルドレンの データーを知るのが必要 ○ チルドレンのデーターをフェッチ ○ チルドレンの渡すのデーター部分を理解する render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
- 31. GraphQL GraphQL出来る シングルエンドポイントで全てのデーターを提供 store(email: “admin@abc.com”) { 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 }, … ], ... }, … ], } APIエンドポイント
- 34. RelayJS:コンポーネント・データーコロケーション store(email: “admin@abc.com”) { 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
- 35. store(email: “admin@abc.com”) { 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 { categories { name, products, } } RelayJS:コンポーネント・データーコロケーション
- 36. store(email: “admin@abc.com”) { 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 }, … ], ... }, … ], } Hello Shop RelayJSは 各コンポーネントのデー ターをフェッチ
- 37. チルドレンにデーターを渡す this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } データーとレンダリング this.props.store.name 渡す this.props.store.categories
- 38. そんなTight Coupling, High Reuse ではない ● 親はチルドレンの データーを知るのが必要ない ○ チルドレンのデーターをフェッチ ○ チルドレンの渡すのデーター部分を理解する render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
- 40. なぜRelayJS? ● フィーチャー: ○ コンポーネント・データーコロケーション ○ Connection Id: データー再フィッチ ○ Connections: One-to-Many 関係・プージネション ○ Mutations: データー変更があったとき Reactコンポーネントを自動アップデート ● 暗黙なフィーチャー: ○ 自動データーフィッチ (AJAXコードなしで) ○ データーキャッシュとバッチフィッチ ● 面白いフィーチャー: ○ ロード中のスピナー ○ データーフェッチ失敗な実行なコード ○ オプチミスチックUIアップデート
- 41. RelayJS: セットアップ
- 42. RelayJS:コンポーネント・データーコロケーション ブラウザ GraphQL /RelayJS サーバー バンドル JS サーバー JSライブラリ react react-dom react-relay babelify-relay- plugin babelify RelayJS コンテナ GraphQL オーバー http(s)、など graphql サーバーライ ブラリ graphql 自分の JS と Relay.QL browserify/w ebpack GraphQL スキーマ JSON バンドル JS GraphQL スキーマ ハッシュ コンバーター graphql-relay
- 43. 参考 ● 記事 ○ 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
- 44. ありがとう: ● みんな! ● koba04! ● Facebookエンジニア!