- 本月热门
-
Python中的进程、线程、协程、同步、异步、回调 by 许智翔@七牛 -
监控页面变化的小工具 -
NOSQL七种武器之长生剑,MongoDB的使用介绍 by 成江东@盛大 -
浅淡移动web开发 by 志刚 -
技术进化论-献给互联网在中国发展20周年 by 吴华鹏 -
GO在纽约时报的应用实践[英, Using Go at The New York Times] -
技术选型那些事－轻工厂技术分享 by 潘峰@百度 -
JavaScript更好的方面[The Better Parts] by Douglas Crockford -
Angular 1.4如何迁移到Angular 2及二者有何不同[英] -
去IOE与数据库高可用性 by 赵振平@太阳塔
第1页
React Native 实战
鬼道
2015·∙05·∙23
鬼道
2015·∙05·∙23
第2页
背景
鬼道（徐凯）
• 2013，天猫
• 负责天猫Web架构 • 负责天猫Pad客户端
• 2011，百度
• Symbian • Android/iOS/Web：⼲⼴广告SDK、统计SDK
鬼道（徐凯）
• 2013，天猫
• 负责天猫Web架构 • 负责天猫Pad客户端
• 2011，百度
• Symbian • Android/iOS/Web：⼲⼴广告SDK、统计SDK
第3页
PART01 React Native
iOS
iOS
第4页
PART01 React Native
Android
Android
第5页
PART01 React Native
Web
Web
第6页
PART01 React Native
Web?
Web?
第7页
PART01 React Native
Native 有更好的人机交互体验
1. 更丰富细腻的动画效果
2. 更精准的⼿手势识别
3. 原⽣生控件有更好的体验
4. 更合适的线程模型
尽管Web
Worker可以解决⼀一部分问题，如
Angular
2.0
图像解码、⽂文本渲染仍⽆无法多线程渲染，如
RiverTrail
Native 有更好的人机交互体验
1. 更丰富细腻的动画效果
2. 更精准的⼿手势识别
3. 原⽣生控件有更好的体验
4. 更合适的线程模型
尽管Web
Worker可以解决⼀一部分问题，如
Angular
2.0
图像解码、⽂文本渲染仍⽆无法多线程渲染，如
RiverTrail
第8页
PART01 React Native
我们需要？
Native
的⼈人机交互体验
+
Web
的开发效率和发布能⼒力
我们需要？
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
的开发效率和发布能⼒力
React Native
• 3.26
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
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]
&
Netflix
BBC
Khanacademy
⽀支付宝
天猫
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
“Learn once, write anywhere”
Web iOS
Android
Virtual
DOM React
第15页
PART01 React Native
JS-Native通信
}UI iOS
Virtual
DOM React
}JS
JS-Native通信
}UI iOS
Virtual
DOM React
}JS
第16页
PART01 React Native
⼿手猫iPad
“猜你喜欢”
4.21
上架AppStore
⼿手猫iPad
“猜你喜欢”
4.21
上架AppStore
第17页
PART01 React Native
内存对比
内存对比
第18页
PART01 React Native
内存对比
内存对比
第19页
PART01 React Native
CPU对比
CPU对比
第20页
PART01 React Native
启动时间
启动时间
第21页
PART01 React Native
对⽐比结论
内存/CPU/启动时间
React Native和Native接近
优于Web
对⽐比结论
内存/CPU/启动时间
React Native和Native接近
优于Web
第22页
PART01 React Native
稳定性
稳定性
第23页
PART01 React Native
⺫⽬目标
• 最低⺫⽬目标
• 频道/活动/店铺逐步启⽤用 React Native
• 替代历史⽅方案
• 最⾼高⺫⽬目标
• React Native 重构所有业务
• iOS/Android/Web 整体开发效率提升1倍
⺫⽬目标
• 最低⺫⽬目标
• 频道/活动/店铺逐步启⽤用 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⽉月，备战双⼗十⼆二
核⼼心链路
业务
天猫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
“Write once, run anywhere”
React Native Toolkit
React Web
第27页
PART01 React Native
“Write once, run anywhere”
来源：5.14交付618版本
“Write once, run anywhere”
来源：5.14交付618版本
第28页
PART01 React Native
第29页
PART01 React Native
“Write once, run anywhere”
“Write once, run anywhere”
第30页
PART01 React Native
“Write once, run anywhere”
1. Demo
“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
其他问题
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
如何推进React Native？
1.混合团队
• iOS/Android/Web
2.跨客户端
• React Native基础环境，很像 WebView
第33页
@天猫前端 @鬼道-徐凯