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

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
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 {
name,
address
}
}
}
Welcome to Hello Shop
Visit us at 1-3-1 Aoyama
Or shop online

GraphQL (cont.)
API Endpoint
query {
categories {
name,
products {
name, price, stock
}
}
}
}
store {
categories: [
{ name: ‘Sporting Goods’,
products: [
{ name: ‘Football’, price:, stock: 50 }, …
}, ...
]
}
Hello Shop

GraphQL (cont.)
API Endpoint
query {
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: 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
● Single-Page Application (SPA)
Courtesy: https://facebook.github.io/react/docs/thinking-in-react.html
Hello Shop

ReactJS (cont.)
● Cascading Views
Hello Shop

React (cont.)
● 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.)
● Cascading Views
Fetch
Data
Hello Shop

React (cont.)
● 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

Sample App: Refresh your Memory
Hello Shop

Sample App: Simplified
Hello Shop

RelayJS: Component & Data Co-location
categories: [
{
products: [
…
],
...
}, …
],
}
fragment on Store {
name,
address
}
Hello Shop

categories: [
{
products: [
…
],
...
}, …
],
}
fragment on Store {
categories {
name,
products,
}
}
RelayJS: Component & Data Co-location

categories: [
{
products: [
…
],
...
}, …
],
}
Hello Shop
RelayJS will fetch
UNION of data

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: 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!

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
}
}
}
Edit Todo
onEditTodo() {
$.ajax {
url: …PUT
}
}
}
. . .
Data
this.setState = {
todos: [
‘Todo #1’, ‘Todo #2’
]
}

Flux: Code Organization
Views
Actions
Get Todos
getTodot() {
$.ajax {
url: …GET
}
}
}
Add Todo
addToto() {
$.ajax {
url: …POST
}
}
}
Edit Todo
editTodo() {
$.ajax {
url: …PUT
}
}
}
this.setState = {
todos: [
]
}

Flux: Data Flow
Views
Actions
Get Todos
getTodos() {
$.ajax {
url: …GET
}
}
}
Add Todo
addTodo() {
$.ajax {
url: …POST
}
}
}
Edit Todo
editTodo() {
$.ajax {
url: …PUT
}
}
}
this.setState = {
todos: [
]
}
Dispatcher
● Throttles one Action at a time
● waitsFor()

Get Todos
getTodot() {
$.ajax {
url: …GET
}
}
}
Add Todo
addToto() {
$.ajax {
url: …POST
}
}
}
Edit Todo
editTodo() {
$.ajax {
url: …PUT
}
}
}
Flux: Data Flow
Views
this.setState = {
todos: [
]
users: [
‘User #1, ‘User #2’
]
}
Actions
Views
Get Users
getUsers() {
$.ajax {
url: …GET
}
}
}
Add User
addUser() {
$.ajax {
url: …POST
}
}
}
Edit User
editUser() {
$.ajax {
url: …PUT
}
}
}
Dispatcher
● waitsFor()

Flux: Data Flow
Views
Actions
Views
Dispatcher
● waitsFor()
Todo Store
User Store
register
this.setState = {
todos: [
]
} this.setState = {
users: [
]
}
register
Get Todos
getTodot() {
$.ajax {
url: …GET
}
}
}
Add Todo
addToto() {
$.ajax {
url: …POST
}
}
}
Edit Todo
editTodo() {
$.ajax {
url: …PUT
}
}
}
Get Users
getUsers() {
$.ajax {
url: …GET
}
}
}
Add User
addUser() {
$.ajax {
url: …POST
}
}
}
Edit User
editUser() {
$.ajax {
url: …PUT
}
}
}

Flux: Data Flow
Views
Actions
Views
Dispatcher
● waitsFor()
Todo Store
User Store
listen
this.setState = {
todos: [
]
} this.setState = {
users: [
]
}
listen
listen
Todo Actions
listen
User Actions
Get Todos
getTodot() {
$.ajax {
url: …GET
}
}
}
Add Todo
addToto() {
$.ajax {
url: …POST
}
}
}
Edit Todo
editTodo() {
$.ajax {
url: …PUT
}
}
}
Get Users
getUsers() {
$.ajax {
url: …GET
}
}
}
Add User
addUser() {
$.ajax {
url: …POST
}
}
}
Edit User
editUser() {
$.ajax {
url: …PUT
}
}
}

Flux
Courtesy: http://fluxxor.com/what-is-flux.html

Todo App: React with props
Data
const _props = {
todos: [
]
}
Code
render() {
return (_.map(
this.props.todos,
)
}
Initialize
const _root = document.findElementById(‘root’);
ReactDOM.render(<TodoApp {..._props} />, _root);

Todo App with Flux
Data
const _props = {
todos: [
]
}
Code
render() {
return (_.map(
this.props.todos,
)
}
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

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

More Related Content

What's hot (20)

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

More from Khor SoonHin (6)

Recently uploaded (20)

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