AirJD 焦点
AirJD

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

React Native实战 by 鬼道@天猫

发布者 weber
发布于 1433837183044  浏览 9077 关键词 Hybrid混合开发, 移动开发, ReactJS 
分享到

第1页

React Native 实战

鬼道

2015·∙05·∙23



第2页

背景

鬼道(徐凯)

• 2013,天猫

• 负责天猫Web架构 • 负责天猫Pad客户端

• 2011,百度

• Symbian • Android/iOS/Web:⼲⼴广告SDK、统计SDK



第3页

PART01 React Native

iOS



第4页

PART01 React Native

Android



第5页

PART01 React Native

Web



第6页

PART01 React Native



Web?



第7页

PART01 React Native

Native 有更好的人机交互体验

1. 更丰富细腻的动画效果
  2. 更精准的⼿手势识别
  3. 原⽣生控件有更好的体验
  4. 更合适的线程模型
 

尽管Web
 Worker可以解决⼀一部分问题,如
 Angular
 2.0
  图像解码、⽂文本渲染仍⽆无法多线程渲染,如
 RiverTrail



第8页

PART01 React Native

我们需要?

Native
 的⼈人机交互体验

+

Web
 的开发效率和发布能⼒力



第9页

PART01 React Native

React Native

• 3.26
 Facebook
 F8,宣布开源
 [1]
 

“What
 we
 really
 want
 is
 the
 user
 experience
 of
 the
 native
 mobile
  platforms,
 combined
 with
 the
 developer
 experience
 we
 have
 when
 building
  with
 React
 on
 the
 web.”
 

Native
 的⼈人机交互体验

+

Web
 的开发效率和发布能⼒力



第10页

PART01 React Native

React
 Native相似⽅方案

• Sky,5.1,Google


• Dart,120FPS


• Samurai-Native,4.24

• HTML+CSS+ObjC,未来⽀支持JS,Android规划中
 • Bee Framework,不再扩展Android


• NativeScript,太重
 • Hyperloop
 • AvantX


• Universal Windows Platform Bridges,微软
 • 5.1,Project Astoria,Android导⼊入Windows


• Project Islandwood/Centennial



第11页

PART01 React Native

评估标准



第12页

PART01 React Native

评估标准



第13页

PART01 React Native



&



Facebook
  Twitter
  Reddit
  Netflix
  BBC
  Flipboard
  Khanacademy
  WhatsApp
  ⽀支付宝
  天猫
 



FB
 Ads/F8/Groups
  4.12
 Chinese
 Flashcards
  4.21
 天猫
 iPad
 

5.08
 ⼿手机淘宝
 

[1] 6.07
 ⼿手机天猫



[2]



第14页

PART01 React Native

“Learn once, write anywhere”

Web iOS



Android



Virtual
 DOM React



第15页

PART01 React Native

JS-Native通信

}UI iOS



Virtual
 DOM React



}JS



第16页

PART01 React Native

⼿手猫iPad
 “猜你喜欢”
 4.21
 上架AppStore
 



第17页

PART01 React Native

内存对比



第18页

PART01 React Native

内存对比



第19页

PART01 React Native

CPU对比



第20页

PART01 React Native

启动时间



第21页

PART01 React Native

对⽐比结论

内存/CPU/启动时间


React Native和Native接近
 优于Web



第22页

PART01 React Native

稳定性



第23页

PART01 React Native

⺫⽬目标

• 最低⺫⽬目标

• 频道/活动/店铺逐步启⽤用 React Native
 • 替代历史⽅方案


• 最⾼高⺫⽬目标

• React Native 重构所有业务
 • iOS/Android/Web 整体开发效率提升1倍



第24页

PART01 React Native



业务



天猫iPad,猜你喜欢,4⽉月 ⼿手淘,多个项⺫⽬目,5⽉月

⼿手淘/⼿手猫,618年中促主会场,6⽉月 ⼿手猫/⼿手淘,频道活动迁移,8⽉月 双⼗十⼀一,11⽉月 双⼗十⼆二,12⽉月



技术

4⽉月,天猫iPad部分基础改造 5⽉月,⼿手淘/⼿手猫基础完成,备战618 6⽉月,⼿手淘/⼿手猫基础优化 8⽉月,解决迁移过程的问题 10⽉月,备战双⼗十⼀一 11⽉月,备战双⼗十⼆二



核⼼心链路



第25页

PART03 React Native

规划



✔✔ ✔ ✔✔





✔ ✔✔



第26页

PART01 React Native

“Write once, run anywhere”



React Native Toolkit



React Web



第27页

PART01 React Native

“Write once, run anywhere”

来源:5.14交付618版本



第28页

PART01 React Native



第29页

PART01 React Native

“Write once, run anywhere”



第30页

PART01 React Native

“Write once, run anywhere”

1. Demo



第31页

PART01 React Native

其他问题

1. iOS 6 JSCore

• iOS6降级⾄至Web


2. Android Version 2015.10

• 暂时降级⾄至Web


3. Appstore 审核

• 天猫iPad已上架
 • Quora:Well, Apple did change their terms in iOS 8.2 to allow apps to download

executable code after the app is reviewed and installed on people's phones — as long as it is run with JavaScriptCore, and does not materially change the purpose of the app.

4. jsbundle 优化

• 依赖问题还未解决

5. 快速迭代

• 内部版本,每版本同步,提PR



第32页

PART01 React Native

如何推进React Native?

1.混合团队

• iOS/Android/Web


2.跨客户端

• React Native基础环境,很像 WebView




第33页

@天猫前端 @鬼道-徐凯



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