AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

探索React生态圈 by 郭达峰@Strikingly

发布者 FEer   简介 前端技术
发布于 1464742937208  浏览 3787 关键词 ReactJS, 前端 
分享到

第1页

React

@dfguo Strikingly.com CTO



第5页

GraphQL Relay



第9页

React

• • •



第10页

React



第11页

Brief History

• •



第12页

• •

• SEO • Twitter 11



第13页

+



第14页

Virtual DOM = UI



第15页

iOS & Android

React Native



第16页

iOS & Android

• Facebook Ads Manager • 85%



第17页

TUI



第21页

• TUI • React canvas • React three (3D) • React art



第22页

• Virtual DOM = UI

• • •



SEO



第23页

Excited!



第24页

React



第25页

• Flux • GraphQL / Relay



第26页

GraphQL

What is this?



第27页

GraphQL RESTful API



第28页

REST API



• /api/v1/site/{id} • /api/v1/site/{id}/analytics



第29页

REST API

• 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



第32页

UI



第33页

GraphQL RESTful API



第34页

GraphQL at Facebook

• 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



第36页

GraphQL Query



JSON Response



第37页

GraphQL Server-side

GraphQL



第38页

Big Picture



Server



Client

UI



第39页

REST API

• Custom endpoint • Over-fetching





第41页

Relay

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



第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



第44页

Relay

• 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



第46页

React



第47页

• Node.js • CommonJS • NPM

• 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



第51页

Immutable.js

• 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



第53页

flow

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



第57页

CSS in JavaScript

•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



第59页

CSS in JavaScript

• 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



第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



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。