?? React ???
??? @dfguo
CTO
GraphQL Relay
????????
??????????
??????
React ???
• ????
• ????
• ??
????
React ???
Brief History
• ?????
• ?????
????
• ???????????
• ??????
• SEO
• Twitter 11 ?????????????
???????+??????
Virtual DOM = UI???
?????iOS & Android
React Native
?????iOS & Android
• Facebook Ads Manager
• 85% ????
?????TUI
????
• TUI
• React canvas
• React three (3D)
• React art
?????
• Virtual DOM = UI???
• ???????????
• ????????? SEO ??
• ??????????
????????
Excited!
????
React ???
????
• Flux
• GraphQL / Relay
GraphQL
What is this?
GraphQL?RESTful API?
????????????
??????????
REST API ???
• ???????
• /api/v1/site/{id}
• /api/v1/site/{id}/analytics
REST API ???
• Custom endpoint?/api/v1/site_info/{id}
• ????????????
• Over-fetching
• iOS ????????????????
• ???????
???????
???????
“The REST interface is designed to
be efficient for large-grain
hypermedia data transfer…”
- Dr Roy T Fielding, Author of REST
REST???????????
???UI????????????????
??????
GraphQL?RESTful API
???????????
???????????
???????????
GraphQL at Facebook
• 3 years
• 26 billion request / day
GraphQL Client-side
• GraphQL as a unified query interface - only 1
endpoint
• Describe the shape of the data
GraphQL Query JSON Response
GraphQL Server-side
????
GraphQL??
Server Client
???? ???
???? UI
Big Picture ???
REST API ????????
• Custom endpoint
• Over-fetching
• ???????
???????
???????
Relay
Using GraphQL in React
Component
• Component is at the core of React
• Reusing any component, we are reusing
• HTML - React
• Javascript - React
• CSS - Maybe React?
• Data - Relay
Relay
Comments (3)
Nate
This is a great speech! Reply
Kevin
This is a great speech! Reply
Bood
This is a great speech! Reply
Leave a comment…
Submit
<CommentBox>
<Header />
<CommentList />
<SubmitForm />
</CommentBox>
GraphQL Query
GraphQL Query
Relay
• Co-locate data definition with React component
• Using GraphQL to describe the data
• Automatically batch and fetch the data for you
Other solutions
• Relay + GraphQL
• Falcor + JSONGraph
• Om Next
• Meteor
??
React ???
??
•
• CommonJS
• NPM
• ES6
• Immutable - changes create new copy on every
change
• Persistent - old copies will be kept
• Structural sharing - new/old objects shares
memory
• Om
• a clojure wrapper of
• faster than Why?
• high performant application
• compiler friendlier
• Immutability might become part of JavaScript
language in the future
flow
Static typed JavaScript (opt-in)
CSS
CSS Problems
1. Global namespace
2. Dependencies
3. Dead code elimination
4. Minification
5. Sharing constants
6. Non-deterministic resolution
7. Isolation
CSS in JavaScript
• s
JSX
CSS in JavaScript
1. Global namespace - solved
2. Dependencies - solved
3. Dead code elimination - solved
4. Minification - solved
5. Sharing constants - solved
6. Non-deterministic resolution - solved
7. Isolation - solved
CSS in JavaScript
• Not without its own problems
• media queries
• hover state
• Ongoing work: Radium, react-style, css-module
?? React ???
• ????
• ?????
• Virtual UI Machine
• ????
• Flux
• GraphQL / Relay ??
REST API ???
•??
• ES6
•
• Flow
• CSS in JavaScript
Q&A
????
• Flux
• unidirectional data flow
• single source of truth
Flux
??
React ???
• Webpack
• Babel
Dev tool
React hot load
??
React ???
Webpack
• webpack ???????????????????????
??????
• ?? CommonJS / AMD
• ??????? loader ???????
• ??? CSS????????????
• ????? Code splitting ????????????
• ?????? hot module replacement ?????????
