SlideShare a Scribd company logo

Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS

Khor SoonHin, profile picture
Khor SoonHin

The document discusses the integration and setup of React with GraphQL and RelayJS, highlighting their roles in managing data flow and component rendering. It details how to create a single API endpoint for data retrieval and the benefits of using RelayJS for reducing coupling and enhancing reusability in React applications. Additional insights include usage patterns and code examples for building a sample app, along with references for further reading.

Technology
Related topics:
Insights on Software Development
1 of 61
Downloaded 17 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Missing Pages: ReactJS/Flux/GraphQL/RelayJS Khor, @neth_6, re:Culture
Shed light on assumptions/details glossed over in FB’s docs
Agenda ● Using pure Flux ● GraphQL ○ Sans RelayJS ○ Setup GraphQL on non-NodeJS servers ● RelayJS ○ Revisiting ReactJS: Reduce coupling, increase reusability ○ What RelayJS Brings to GraphQL ○ Setup RelayJS/GraphQL on non-NodeJS servers
React Family: In a Few Words ... ● ReactJS: UI data & rendering ● Flux: Data flow & code organization ● GraphQL: Single API endpoint data retrieval ● RelayJS: React component data declaration & co-location
GraphQL: Sans RelayJS
GraphQL I speak GraphQL API Endpoint Single Endpoint can Deliver all data 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 }, … ], ... }, … ], }
GraphQL (cont.) API Endpoint query { store(email: "admin@abc.com") { name, address } }
GraphQL (cont.) API Endpoint query { store(email: "admin@abc.com") { name, address } } store(email: “admin@abc.com”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ } Welcome to Hello Shop Visit us at 1-3-1 Aoyama Or shop online
GraphQL (cont.) API Endpoint 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
GraphQL (cont.) API Endpoint query { store(email: "admin@abc.com") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } Single endpoint Hierarchical data query Client-specified query Data in 1 round-trip
GraphQL: Setup
GraphQL: Like all Client-Server Browser http(s) Any Server
GraphQL: Over HTTP(S) Browser GraphQL Server Bundled JS GraphQL over http(s), etc. Any Server
GraphQL Over http(s) GraphQL over http
GraphQL: Enabling the Server Browser GraphQL Server Bundled JS GraphQL over http(s), etc. Any Server Server Libraries graphql GraphQL Schema in Hash
GraphQL: JS Code Browser GraphQL Server Bundled JS Bundled JS Any Server GraphQL over http(s), etc. Server Libraries graphql GraphQL Schema in Hash
GraphQL: Required JS Libraries Browser GraphQL Server Bundled JS Bundled JS Any Server JS Libraries react react-dom graphql GraphQL over http(s), etc. Server Libraries graphql GraphQL Schema in Hash
GraphQL: Bundling Your JS Code Browser GraphQL Server Bundled JS Bundled JS Any Server JS Libraries react react-dom graphql GraphQL over http(s), etc. Server Libraries graphql Your JS browserify/w ebpackGraphQL Schema in Hash
ReactJS (Review)
ReactJS ● Single-Page Application (SPA) Courtesy: https://facebook.github.io/react/docs/thinking-in-react.html Hello Shop
ReactJS (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
ReactJS (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop Hierarchical Views => GraphQL Hierarchical Data
ReactJS (cont.) Abstraction Each ReactJS element knows: ● The data it needs ● How to render itself with HTML fragments ● The data it passes to its children
React (cont.) ● Single-Page Application (SPA) ● Cascading Views Fetch Data Hello Shop
React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
Passing Data to Children this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } Use Data & Render this.props.store.name Pass Down this.props.store.categories
Not so Loose Coupling, Not so High Reuse ● Parent needs to know about child’s data ○ Need to fetch data for children ○ Need to pass correct data to children render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
RelayJS: Component-Data Co-location Reduce coupling, increase reusability
GraphQL I speak GraphQL API Endpoint Single Endpoint can Deliver all data 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 }, … ], ... }, … ], }
Sample App: Refresh your Memory Hello Shop
Sample App: Simplified Hello Shop
RelayJS: Component & Data Co-location 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
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: Component & Data Co-location
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 will fetch UNION of data
Passing Data to Children this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } Use Data & Render this.props.store.name Pass Down this.props.store.categories
Not so Loose Coupling, Not so High Reuse ● Parent needs to need NOT know about child’s data ○ Need to fetch data for children ○ Need to pass correct data to children render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
RelayJS: What it Brings to GraphQL
Why RelayJS? ● Usable features: ○ Component-Data Co-location ○ Connection Id: Data re-fetching ○ Connections: One-to-Many Relationships/Pagination ○ Mutations: Modified data auto-updates affected React components ● Implicit features: ○ Auto-fetch declared data (no AJAX code) ○ Caching, batching data ● Bells & Whistles: ○ Show spinner, etc. during loading ○ Show error message, etc., if data fetch fail ○ Optimistic UI updates
RelayJS: Setup
RelayJS: Component-Data Co-location Browser GraphQL /RelayJS Server Bundled JSAny Server JS Libraries react react-dom react-relay babelify-relay- plugin babelify RelayJS containers calling GraphQL over http(s), etc. graphql Server Libraries graphql Your JS with Relay.QL browserify/w ebpack GraphQL Schema in JSON Bundled JS GraphQL Schema in Hash Converter graphql-relay
References ● Articles ○ 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 ● Starter-kit ○ Rails: https://github.com/nethsix/relay-on-rails ● Choices: React, React (with Container), Flux/Redux, GraphQL/RelayJS ○ Shared by @koba04 - http://andrewhfarmer.com/react-ajax-best-practices/ ● Follow: @neth_6, @reculture_us
Thank you: ● All for coming! ● Toru for invite! ● Facebook for tech & engineers!
Flux: The ‘pure’ version
Todo App New Todo Create Todo #1 Todo #2 Created Todo List
Todo App: React with AJAX Render render() { return (_.map( this.state.todos, (e) => { return <div>{e}</div> }) ) } Get Todos componentDidMount() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo onAddTodo() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo onEditTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } . . . Data this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] }
Flux: Code Organization Views Actions Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] }
Flux: Data Flow Views Actions Get Todos getTodos() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addTodo() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Dispatcher ● Throttles one Action at a time ● waitsFor()
Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Flux: Data Flow Views this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] users: [ ‘User #1, ‘User #2’ ] } Actions Views Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Dispatcher ● Throttles one Action at a time ● waitsFor()
Flux: Data Flow Views Actions Views Dispatcher ● Throttles one Action at a time ● waitsFor() Todo Store User Store register this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } this.setState = { users: [ ‘User #1, ‘User #2’ ] } register Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } }
Flux: Data Flow Views Actions Views Dispatcher ● Throttles one Action at a time ● waitsFor() Todo Store User Store listen this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } this.setState = { users: [ ‘User #1, ‘User #2’ ] } listen listen Todo Actions listen User Actions Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } }
Flux Courtesy: http://fluxxor.com/what-is-flux.html
Flux: Additional Slides
Todo App: React with props Data const _props = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Code render() { return (_.map( this.props.todos, (e) => { return <div>{e}</div> }) ) } Initialize const _root = document.findElementById(‘root’); ReactDOM.render(<TodoApp {..._props} />, _root);
Todo App with Flux Data const _props = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Code render() { return (_.map( this.props.todos, (e) => { return <div>{e}</div> }) ) } Initialize const _root = document.findElementById(‘root’); ReactDOM.render(<TodoApp {..._props} />, _root);
Action Creator Trigger <form> <input id=’todo-text’ type=’text’ /> <button onClick=TodoActions.create($(‘#todo-text’).val())>Create</button> </form>
Action Creator TodoActions: { create: function(text) { // Take some action, e.g., call REST API AppDispatcher.dispatch({ actionType: TodoConstants.TODO_CREATE, // Basically ‘create’ text: text }); }, …. }
Store AppDispatcher.register(function(action) { // action is passed in by Action Creator var event = action.event; switch(action.actionType) { case TodoConstants.TODO_CREATE: // Do whatever, e.g., update local store data or fetch fresh data from server TodoStore.emitChange(); break; …. } } register
Store (cont.) var TodoStore = assign({}, EventEmitter.prototype, { // EventEmitter provides emit, on, removeListener, etc. methods addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); }, emitChange: function() { this.emit(CHANGE_EVENT); }, ... } register
Controller-View // This is where React is used var TodoApp = React.createClass({ componentDidMount: function() { TodoStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { TodoStore.removeChangeListener(this._onChange); }, _onChange: function() { this.setState(TodoStore.getData()); }, ... } register

More Related Content

PDF
From Back to Front: Rails To React Family
Khor SoonHin
 
PDF
Rails + Webpack
Khor SoonHin
 
PPTX
HTL(Sightly) - All you need to know
Prabhdeep Singh
 
PPTX
Sightly - Part 2
Prabhdeep Singh
 
PDF
jQuery and Rails: Best Friends Forever
stephskardal
 
PDF
Hands On With Rich Faces 4 - JavaOne 2010
Max Katz
 
PPT
jQuery and AJAX with Rails
Alan Hecht
 
PDF
Angular2 Development for Java developers
Yakov Fain
 
From Back to Front: Rails To React Family
Khor SoonHin
 
Rails + Webpack
Khor SoonHin
 
HTL(Sightly) - All you need to know
Prabhdeep Singh
 
Sightly - Part 2
Prabhdeep Singh
 
jQuery and Rails: Best Friends Forever
stephskardal
 
Hands On With Rich Faces 4 - JavaOne 2010
Max Katz
 
jQuery and AJAX with Rails
Alan Hecht
 
Angular2 Development for Java developers
Yakov Fain
 

What's hot (20)

PPT
A quick guide to Css and java script
AVINASH KUMAR
 
PDF
Introduction to Sightly
Ankit Gubrani
 
KEY
Templates
soon
 
PDF
React Native Workshop - React Alicante
Ignacio Martín
 
PDF
JavaFX in Action (devoxx'16)
Alexander Casall
 
PDF
JavaFX – 10 things I love about you
Alexander Casall
 
PPTX
e-suap - client technologies- english version
Sabino Labarile
 
PPTX
Angular Js Advantages - Complete Reference
EPAM Systems
 
PDF
How we improved performance at Mixbook
Anton Astashov
 
PDF
Unobtrusive JavaScript
Vitaly Baum
 
PDF
An Introduction to ReactJS
All Things Open
 
PPTX
React + Redux Introduction
Nikolaus Graf
 
PDF
Module 3: Working with the DOM and jQuery
Daniel McGhan
 
PPTX
AEM - Client Libraries
Prabhdeep Singh
 
PDF
SproutCore and the Future of Web Apps
Mike Subelsky
 
PPTX
ReactJs presentation
nishasowdri
 
PDF
Intro to ReactJS
Harvard Web Working Group
 
PPTX
Java script Session No 1
Saif Ullah Dar
 
PPTX
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
PDF
Introduction to AngularJS By Bharat Makwana
Bharat Makwana
 
A quick guide to Css and java script
AVINASH KUMAR
 
Introduction to Sightly
Ankit Gubrani
 
Templates
soon
 
React Native Workshop - React Alicante
Ignacio Martín
 
JavaFX in Action (devoxx'16)
Alexander Casall
 
JavaFX – 10 things I love about you
Alexander Casall
 
e-suap - client technologies- english version
Sabino Labarile
 
Angular Js Advantages - Complete Reference
EPAM Systems
 
How we improved performance at Mixbook
Anton Astashov
 
Unobtrusive JavaScript
Vitaly Baum
 
An Introduction to ReactJS
All Things Open
 
React + Redux Introduction
Nikolaus Graf
 
Module 3: Working with the DOM and jQuery
Daniel McGhan
 
AEM - Client Libraries
Prabhdeep Singh
 
SproutCore and the Future of Web Apps
Mike Subelsky
 
ReactJs presentation
nishasowdri
 
Intro to ReactJS
Harvard Web Working Group
 
Java script Session No 1
Saif Ullah Dar
 
SharePoint Saturday St. Louis - SharePoint & jQuery
Mark Rackley
 
Introduction to AngularJS By Bharat Makwana
Bharat Makwana
 
Ad

Similar to Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS (20)

PPTX
Getting started with react &amp; redux
Girish Talekar
 
PPTX
Relay: Seamless Syncing for React (VanJS)
Brooklyn Zelenka
 
PDF
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
Pavel Chertorogov
 
PDF
React JS and why it's awesome
Andrew Hull
 
PPTX
2.React tttttttttttttttttttttttttttttttt
MrVMNair
 
PPTX
ReactJs
Sahana Banerjee
 
PPSX
React introduction
Kashyap Parmar
 
PPTX
Reactjs
Neha Sharma
 
PDF
貴圈真亂 React生態圈
Ben Liu
 
PPTX
React workshop
Imran Sayed
 
PDF
Boosting Data Fetching in Turkish Apps with React Native and GraphQL
Shiv Technolabs Pvt. Ltd.
 
PDF
React native meetup 2019
Arjun Kava
 
PDF
ReactJS presentation
Thanh Tuong
 
PPTX
reactJS
Syam Santhosh
 
PDF
An Intense Overview of the React Ecosystem
Rami Sayar
 
PDF
An Overview of the React Ecosystem
FITC
 
PPTX
React Workshop: Core concepts of react
Imran Sayed
 
PDF
ReactJS - A quick introduction to Awesomeness
Ronny Haase
 
PDF
theory-slides-vueh3urh4ur4ur4r44oirj4riu4ri
paridhiagarwal129
 
PDF
GraphQL With Relay Part Deux
Brad Pillow
 
Getting started with react &amp; redux
Girish Talekar
 
Relay: Seamless Syncing for React (VanJS)
Brooklyn Zelenka
 
React, GraphQL и Relay - вполне себе нормальный компонентный подход (nodkz)
Pavel Chertorogov
 
React JS and why it's awesome
Andrew Hull
 
2.React tttttttttttttttttttttttttttttttt
MrVMNair
 
ReactJs
Sahana Banerjee
 
React introduction
Kashyap Parmar
 
Reactjs
Neha Sharma
 
貴圈真亂 React生態圈
Ben Liu
 
React workshop
Imran Sayed
 
Boosting Data Fetching in Turkish Apps with React Native and GraphQL
Shiv Technolabs Pvt. Ltd.
 
React native meetup 2019
Arjun Kava
 
ReactJS presentation
Thanh Tuong
 
reactJS
Syam Santhosh
 
An Intense Overview of the React Ecosystem
Rami Sayar
 
An Overview of the React Ecosystem
FITC
 
React Workshop: Core concepts of react
Imran Sayed
 
ReactJS - A quick introduction to Awesomeness
Ronny Haase
 
theory-slides-vueh3urh4ur4ur4r44oirj4riu4ri
paridhiagarwal129
 
GraphQL With Relay Part Deux
Brad Pillow
 
Ad

More from Khor SoonHin (6)

PDF
The Many Flavors of OAuth - Understand Everything About OAuth2
Khor SoonHin
 
PDF
Gentlest Introduction to Tensorflow - Part 3
Khor SoonHin
 
PDF
RMSLE cost function
Khor SoonHin
 
PDF
Gentlest Introduction to Tensorflow - Part 2
Khor SoonHin
 
PDF
Gentlest Introduction to Tensorflow
Khor SoonHin
 
PDF
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Khor SoonHin
 
The Many Flavors of OAuth - Understand Everything About OAuth2
Khor SoonHin
 
Gentlest Introduction to Tensorflow - Part 3
Khor SoonHin
 
RMSLE cost function
Khor SoonHin
 
Gentlest Introduction to Tensorflow - Part 2
Khor SoonHin
 
Gentlest Introduction to Tensorflow
Khor SoonHin
 
Tokyo React.js #3 Meetup (ja): Missing Pages: ReactJS/GraphQL/RelayJS
Khor SoonHin
 

Recently uploaded (20)

PDF
Advanced IT Governance
University of Hertfordshire
 
PDF
GamePlan Trading System Review: Professional Trader's Honest Take
SOFTTECHHUB
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
PDF
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PDF
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
Advanced IT Governance
University of Hertfordshire
 
GamePlan Trading System Review: Professional Trader's Honest Take
SOFTTECHHUB
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
How Onsite IT Support Drives Business Efficiency, Security, and Growth.pdf
Captain IT
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
AI And Its Effect On The Evolving IT Sector In Australia - Elevate
Elevate
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
IAESIJAI
 
Teaching material agriculture food technology
LiaRayya
 
CIFDAQ's Market Wrap: Ethereum Leads, Bitcoin Lags, Institutions Shift
CIFDAQ
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
Big Data Technologies - Introduction.pptx
kuthubussaman1
 
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Akar16
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
SHREYAS PHANSE
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 

Tokyo React.js #3: Missing Pages: ReactJS/Flux/GraphQL/RelayJS

  • 2. Shed light on assumptions/details glossed over in FB’s docs
  • 3. Agenda ● Using pure Flux ● GraphQL ○ Sans RelayJS ○ Setup GraphQL on non-NodeJS servers ● RelayJS ○ Revisiting ReactJS: Reduce coupling, increase reusability ○ What RelayJS Brings to GraphQL ○ Setup RelayJS/GraphQL on non-NodeJS servers
  • 4. React Family: In a Few Words ... ● ReactJS: UI data & rendering ● Flux: Data flow & code organization ● GraphQL: Single API endpoint data retrieval ● RelayJS: React component data declaration & co-location
  • 6. GraphQL I speak GraphQL API Endpoint Single Endpoint can Deliver all data 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 }, … ], ... }, … ], }
  • 7. GraphQL (cont.) API Endpoint query { store(email: "[email protected]") { name, address } }
  • 8. GraphQL (cont.) API Endpoint query { store(email: "[email protected]") { name, address } } store(email: “[email protected]”) { name: ‘Hello Shop’, address: ‘1-3-1 Aoyama’ } Welcome to Hello Shop Visit us at 1-3-1 Aoyama Or shop online
  • 9. GraphQL (cont.) API Endpoint query { store(email: "[email protected]") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } Hello Shop
  • 10. GraphQL (cont.) API Endpoint query { store(email: "[email protected]") { categories { name, products { name, price, stock } } } } store { categories: [ { name: ‘Sporting Goods’, products: [ { name: ‘Football’, price:, stock: 50 }, … }, ... ] } Single endpoint Hierarchical data query Client-specified query Data in 1 round-trip
  • 12. GraphQL: Like all Client-Server Browser http(s) Any Server
  • 15. GraphQL: Enabling the Server Browser GraphQL Server Bundled JS GraphQL over http(s), etc. Any Server Server Libraries graphql GraphQL Schema in Hash
  • 16. GraphQL: JS Code Browser GraphQL Server Bundled JS Bundled JS Any Server GraphQL over http(s), etc. Server Libraries graphql GraphQL Schema in Hash
  • 17. GraphQL: Required JS Libraries Browser GraphQL Server Bundled JS Bundled JS Any Server JS Libraries react react-dom graphql GraphQL over http(s), etc. Server Libraries graphql GraphQL Schema in Hash
  • 18. GraphQL: Bundling Your JS Code Browser GraphQL Server Bundled JS Bundled JS Any Server JS Libraries react react-dom graphql GraphQL over http(s), etc. Server Libraries graphql Your JS browserify/w ebpackGraphQL Schema in Hash
  • 20. ReactJS ● Single-Page Application (SPA) Courtesy: https://facebook.github.io/react/docs/thinking-in-react.html Hello Shop
  • 21. ReactJS (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
  • 22. ReactJS (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
  • 23. React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop Hierarchical Views => GraphQL Hierarchical Data
  • 24. ReactJS (cont.) Abstraction Each ReactJS element knows: ● The data it needs ● How to render itself with HTML fragments ● The data it passes to its children
  • 25. React (cont.) ● Single-Page Application (SPA) ● Cascading Views Fetch Data Hello Shop
  • 26. React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
  • 27. React (cont.) ● Single-Page Application (SPA) ● Cascading Views Hello Shop
  • 28. Passing Data to Children this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } Use Data & Render this.props.store.name Pass Down this.props.store.categories
  • 29. Not so Loose Coupling, Not so High Reuse ● Parent needs to know about child’s data ○ Need to fetch data for children ○ Need to pass correct data to children render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
  • 30. RelayJS: Component-Data Co-location Reduce coupling, increase reusability
  • 31. GraphQL I speak GraphQL API Endpoint Single Endpoint can Deliver all data 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 }, … ], ... }, … ], }
  • 32. Sample App: Refresh your Memory Hello Shop
  • 34. RelayJS: Component & Data Co-location 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
  • 35. 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 { categories { name, products, } } RelayJS: Component & Data Co-location
  • 36. 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 }, … ], ... }, … ], } Hello Shop RelayJS will fetch UNION of data
  • 37. Passing Data to Children this.props = { store: name: ‘Hello Shop’ categories: [ { name: 'Sporting Goods', items: [ { name: 'Football', price: … } … ], }, ... ], }, } Use Data & Render this.props.store.name Pass Down this.props.store.categories
  • 38. Not so Loose Coupling, Not so High Reuse ● Parent needs to need NOT know about child’s data ○ Need to fetch data for children ○ Need to pass correct data to children render() { return ( <Store>{this.props.store} /> <Categories categories={this.props.store.categories} /> ) }
  • 39. RelayJS: What it Brings to GraphQL
  • 40. Why RelayJS? ● Usable features: ○ Component-Data Co-location ○ Connection Id: Data re-fetching ○ Connections: One-to-Many Relationships/Pagination ○ Mutations: Modified data auto-updates affected React components ● Implicit features: ○ Auto-fetch declared data (no AJAX code) ○ Caching, batching data ● Bells & Whistles: ○ Show spinner, etc. during loading ○ Show error message, etc., if data fetch fail ○ Optimistic UI updates
  • 42. RelayJS: Component-Data Co-location Browser GraphQL /RelayJS Server Bundled JSAny Server JS Libraries react react-dom react-relay babelify-relay- plugin babelify RelayJS containers calling GraphQL over http(s), etc. graphql Server Libraries graphql Your JS with Relay.QL browserify/w ebpack GraphQL Schema in JSON Bundled JS GraphQL Schema in Hash Converter graphql-relay
  • 43. References ● Articles ○ 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 ● Starter-kit ○ Rails: https://github.com/nethsix/relay-on-rails ● Choices: React, React (with Container), Flux/Redux, GraphQL/RelayJS ○ Shared by @koba04 - http://andrewhfarmer.com/react-ajax-best-practices/ ● Follow: @neth_6, @reculture_us
  • 44. Thank you: ● All for coming! ● Toru for invite! ● Facebook for tech & engineers!
  • 46. Todo App New Todo Create Todo #1 Todo #2 Created Todo List
  • 47. Todo App: React with AJAX Render render() { return (_.map( this.state.todos, (e) => { return <div>{e}</div> }) ) } Get Todos componentDidMount() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo onAddTodo() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo onEditTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } . . . Data this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] }
  • 48. Flux: Code Organization Views Actions Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] }
  • 49. Flux: Data Flow Views Actions Get Todos getTodos() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addTodo() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Dispatcher ● Throttles one Action at a time ● waitsFor()
  • 50. Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Flux: Data Flow Views this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] users: [ ‘User #1, ‘User #2’ ] } Actions Views Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Dispatcher ● Throttles one Action at a time ● waitsFor()
  • 51. Flux: Data Flow Views Actions Views Dispatcher ● Throttles one Action at a time ● waitsFor() Todo Store User Store register this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } this.setState = { users: [ ‘User #1, ‘User #2’ ] } register Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } }
  • 52. Flux: Data Flow Views Actions Views Dispatcher ● Throttles one Action at a time ● waitsFor() Todo Store User Store listen this.setState = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } this.setState = { users: [ ‘User #1, ‘User #2’ ] } listen listen Todo Actions listen User Actions Get Todos getTodot() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add Todo addToto() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit Todo editTodo() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } } Get Users getUsers() { $.ajax { url: …GET success: (data) => { this.setState(data); } } } Add User addUser() { $.ajax { url: …POST success: (data) => { this.setState(data); } } } Edit User editUser() { $.ajax { url: …PUT success: (data) => { this.setState(data); } } }
  • 55. Todo App: React with props Data const _props = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Code render() { return (_.map( this.props.todos, (e) => { return <div>{e}</div> }) ) } Initialize const _root = document.findElementById(‘root’); ReactDOM.render(<TodoApp {..._props} />, _root);
  • 56. Todo App with Flux Data const _props = { todos: [ ‘Todo #1’, ‘Todo #2’ ] } Code render() { return (_.map( this.props.todos, (e) => { return <div>{e}</div> }) ) } Initialize const _root = document.findElementById(‘root’); ReactDOM.render(<TodoApp {..._props} />, _root);
  • 57. Action Creator Trigger <form> <input id=’todo-text’ type=’text’ /> <button onClick=TodoActions.create($(‘#todo-text’).val())>Create</button> </form>
  • 58. Action Creator TodoActions: { create: function(text) { // Take some action, e.g., call REST API AppDispatcher.dispatch({ actionType: TodoConstants.TODO_CREATE, // Basically ‘create’ text: text }); }, …. }
  • 59. Store AppDispatcher.register(function(action) { // action is passed in by Action Creator var event = action.event; switch(action.actionType) { case TodoConstants.TODO_CREATE: // Do whatever, e.g., update local store data or fetch fresh data from server TodoStore.emitChange(); break; …. } } register
  • 60. Store (cont.) var TodoStore = assign({}, EventEmitter.prototype, { // EventEmitter provides emit, on, removeListener, etc. methods addChangeListener: function(callback) { this.on(CHANGE_EVENT, callback); }, removeChangeListener: function(callback) { this.removeListener(CHANGE_EVENT, callback); }, emitChange: function() { this.emit(CHANGE_EVENT); }, ... } register
  • 61. Controller-View // This is where React is used var TodoApp = React.createClass({ componentDidMount: function() { TodoStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { TodoStore.removeChangeListener(this._onChange); }, _onChange: function() { this.setState(TodoStore.getData()); }, ... } register