Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
•
10 likes•2,675 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
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Similar to Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS (16)
Recently uploaded
Recently uploaded (16)
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エンジニア!