- 本月热门
-
互联网+时代的人才培养 -
秒开-安全，快速，可靠 by 许霞@百度 -
Docker架构私有云的机遇和挑战 by 王振威 -
初创公司构建数据分析平台 by 桑文锋@SensorsData -
刀尖上的舞蹈—DDoS攻防对抗 by 朱家睿@阿里巴巴 -
创业公司快速发展转型期研发体系构建 by Logan Wang@Mobvista -
Java JDK 9-变化与未来 by 范学雷 -
Docker应用：超大规模容器调度系统的设计与实现 The Power of Native by Allen Sun@DaoCloud -
内建安全的软件开发 by 刘庆华@ThoughtWorks -
支持百度万人开发的工具装备及百度工程效率提升实践 by 夏仲璞
第1页
React
@dfguo Strikingly.com CTO
@dfguo Strikingly.com CTO
第5页
GraphQL Relay
第9页
React
• • •
• • •
第10页
React
第11页
Brief History
• •
• •
第12页
• •
• SEO • Twitter 11
• SEO • Twitter 11
第13页
+
第14页
Virtual DOM = UI
第15页
iOS & Android
React Native
React Native
第16页
iOS & Android
• Facebook Ads Manager • 85%
• Facebook Ads Manager • 85%
第17页
TUI
第21页
• TUI • React canvas • React three (3D) • React art
第22页
• Virtual DOM = UI
• • •
SEO
• • •
SEO
第23页
Excited!
第24页
React
第25页
• Flux • GraphQL / Relay
第26页
GraphQL
What is this?
What is this?
第27页
GraphQL RESTful API
第28页
REST API
•
• /api/v1/site/{id} • /api/v1/site/{id}/analytics
•
• /api/v1/site/{id} • /api/v1/site/{id}/analytics
第29页
REST API
• Custom endpoint /api/v1/site_info/{id}
•
• Over-fetching • iOS
•
• Custom endpoint /api/v1/site_info/{id}
•
• Over-fetching • iOS
•
第31页
“The REST interface is designed to be efficient for large-grain hypermedia data transfer…”
- Dr Roy T Fielding, Author of REST
REST
- Dr Roy T Fielding, Author of REST
REST
第32页
UI
第33页
GraphQL RESTful API
第34页
GraphQL at Facebook
• 3 years • 26 billion request / day
• 3 years • 26 billion request / day
第35页
GraphQL Client-side
• GraphQL as a unified query interface - only 1 endpoint
• Describe the shape of the data
• GraphQL as a unified query interface - only 1 endpoint
• Describe the shape of the data
第36页
GraphQL Query
JSON Response
JSON Response
第37页
GraphQL Server-side
GraphQL
GraphQL
第38页
Big Picture
Server
Client
UI
Server
Client
UI
第39页
REST API
• Custom endpoint • Over-fetching
•
• Custom endpoint • Over-fetching
•
第41页
Relay
Using GraphQL in React
Using GraphQL in React
第42页
Component
• Component is at the core of React • Reusing any component, we are reusing
• HTML - React • Javascript - React • CSS - Maybe React? • Data - Relay
• Component is at the core of React • Reusing any component, we are reusing
• HTML - React • Javascript - React • CSS - Maybe React? • Data - Relay
第43页
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…
<CommentBox> <Header /> GraphQL Query <CommentList /> GraphQL Query <SubmitForm />
</CommentBox>
Submit
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…
<CommentBox> <Header /> GraphQL Query <CommentList /> GraphQL Query <SubmitForm />
</CommentBox>
Submit
第44页
Relay
• Co-locate data definition with React component • Using GraphQL to describe the data • Automatically batch and fetch the data for you
• Co-locate data definition with React component • Using GraphQL to describe the data • Automatically batch and fetch the data for you
第45页
Other solutions
• Relay + GraphQL • Falcor + JSONGraph • Om Next • Meteor
• Relay + GraphQL • Falcor + JSONGraph • Om Next • Meteor
第46页
React
第47页
• Node.js • CommonJS • NPM
• ES6
• ES6
第48页
Immutable.js
第50页
Immutable.js
• Immutable - changes create new copy on every change
• Persistent - old copies will be kept • Structural sharing - new/old objects shares
memory
• Immutable - changes create new copy on every change
• Persistent - old copies will be kept • Structural sharing - new/old objects shares
memory
第51页
Immutable.js
• Om • a clojure wrapper of React.js • faster than React.js?! Why?
• Om • a clojure wrapper of React.js • faster than React.js?! Why?
第52页
Immutable.js
• high performant React.js application • compiler friendlier • Immutability might become part of JavaScript
language in the future
• high performant React.js application • compiler friendlier • Immutability might become part of JavaScript
language in the future
第53页
flow
Static typed JavaScript (opt-in)
Static typed JavaScript (opt-in)
第54页
CSS
第56页
CSS Problems
1. Global namespace 2. Dependencies 3. Dead code elimination 4. Minification 5. Sharing constants 6. Non-deterministic resolution 7. Isolation
1. Global namespace 2. Dependencies 3. Dead code elimination 4. Minification 5. Sharing constants 6. Non-deterministic resolution 7. Isolation
第57页
CSS in JavaScript
•s
JSX
•s
JSX
第58页
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
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
第59页
CSS in JavaScript
• Not without its own problems • media queries • hover state
• Ongoing work: Radium, react-style, css-module
• Not without its own problems • media queries • hover state
• Ongoing work: Radium, react-style, css-module
第60页
React
• •
• Virtual UI Machine
•
• Flux
•
• ES6 • Immutable.js • Flow • CSS in JavaScript
• GraphQL / Relay REST API
• •
• Virtual UI Machine
•
• Flux
•
• ES6 • Immutable.js • Flow • CSS in JavaScript
• GraphQL / Relay REST API
第61页
Q&A
第63页
• Flux • unidirectional data flow • single source of truth
第64页
Flux
第65页
React
第66页
• Webpack • Babel
第67页
Dev tool
第68页
React hot load
第69页
React
第70页
Webpack
• webpack
• CommonJS / AMD • loader • CSS • Code splitting • hot module replacement
• webpack
• CommonJS / AMD • loader • CSS • Code splitting • hot module replacement