【移动4】王利华 H5、React+Native、Native应用对比分析+ ,pdf

CodeWarrior

2019/03/11 发布于 技术 分类

文字内容
1. H5、React Native、Native应 用对比分析 王利华 @vczero
2. H5、React Native、Native指什么? H5/Hybird:使用JavaScript与HTML、CSS技术体系开发App内场景的核心工程技术 Native:iOS/Android ——原生应用(都懂得,不解释)。 React Native: React & Native ,应运而生!
3. React Native的产生 • • • • • “鉴往知来”——从过去的教训中总结经验,从用户的角度开拓未来 “HTML5差强人意,与原生应用相比还是有些差距”——更高的追求! 用户体验! “人才宝贵,快速迭代”——Web开发者相对较多,寻找平衡点 “跨平台!跨平台!跨平台!”——单一技术栈 “xx是世界上最好的语言” ——工程学的范畴,没有最好,只有最适合 HTML5 vs React Native ?HTML5 :React Native 结论(React Native): 1. 原生应用的用户体验 2. 跨平台特性 & 热更新 3. 开发人员单一技术栈 4. 上手快,入门容易 5. 社区繁荣
4. 三款(H5/RN/N)豆搜App效果 是否分得清哪个是React Native开发?哪个是Native应用?你的第一感觉是什么?
5. 实验工程方案 注:功能一致,组件使用保持一致
6. 工程方案-H5&RN&N 1. 在H5/Hybird应用中,使用AngularJS开发单页webApp 2. 将该WebApp内嵌入到iOS WebView中 3. 在iOS代码中,使用Navigation稍微控制下跳转 WebApp地址:http://vczero.github.io/search/html/index.html WebApp项目地址:https://github.com/vczero/search H5项目地址:https://github.com/vczero/search_Hybird 在React Native中,封装必要的功能组件。 项目地址:https://github.com/vczero/React-Dou。 使用React Native大致相同的组件开发App, 不使用任何第三方库,代码布局。 项目地址:https://github.com/vczero/iOS-Dou
7. 对比分析 开发方式 性能 & 体验 更新 & 维护 (1)代码结构 (2)UI布局 (3)UI截面图 (4)路由/Navigation (5)第三方生态链 (1)内存 (2)CPU (3)动画 (4)安装包体积 (5)Big ListView (6)真机体验 (1)更新能力 (2)维护成本
8. NO1:开发方式
9. 代码结构
10. 结论:从前端角度而言,React Native跨平台特性,不需要开发者深入的了解各平台就 能开发一款高效App。同时,语言层面而言,JavaScript运用很广泛,入门门槛相对较低。 React Native虽然抛弃了MVC分离实践,但是从业务角度而言,更为合理。 总而言之:对前端,对移动领域是 利好的消息。
11. UI布局 Web开发布局目前大多是 DIV + CSS。 React Native: FlexBox + JSX Native(iOS)布局
12. React Native既综合了Web布局的优势,采用了FlexBox和JSX, 又使用了Native原生组件。比如我们使用一个文本组件。 width:100;height:30;backgroundColor:'red'}}>测试
13. UI截面图——H5/Hybird 第一层列表页是完整的布局, 实际上这就是Web页面 第二层灰色的是Native的WebView组件。
14. UI截面图——Native Native的组件特别多, 即使是列表页,其中 某一项都是一个组件 (控件)。 调用原生组件的性能是 否更好?
15. UI截面图——React Native React Native调用的全部是Native组件。并且层次更深, 因为React Native做了组件的封装。蓝色边框的是RCTScrollView组件。
16. 路由/Navigation 在Web单页面应用中,路由由History API实现。 而React Native采用的路由是原生的UINavigationController导航控制器实现。 React Native NavigatorIOS组件封装程度高;Navigator可定制化程度高。
17. 第三方生态链 “我的是我的,你的也是我的。 ”——我不是“疯狂女友”,我是React Native! “城市列表”组件,使用JSX封装一个;觉得性能太低,OK,封装一个原生组件。 这个iOS图表库不错,拿来用呗! => 完美! 这一切都是基于React Native提供的模块扩展方案。 所以说:iOS第三方库 + 部分JavaScript库 = React Native 生态库
18. NO2:性能 & 体验 以下测试,都是基于相同的case。 测试平台:模拟器,iphone6,iOS8.4
19. 内存——Native 原生应用启动后,占用内存是20~25M;峰值是87.9M,均值是72M;内存释放比较及时。
20. 内存——H5/Hybird Hybird App启动,占用内存35~55M;峰值在137.9M,因为整个应用在WebView中, 内存释放不明显,存在缓存。
21. 内存——React Native React Native App启动占用内存35~60M;峰值在142M,内存相对释放明显。
22. 总结:React Native和Web View在简单App上相差不大。 二者主要:内存消耗主要是在网页数据上。如果应用较大则会跑赢WebView, 因为会有更多的原生组件来完成这些功能。
23. CPU-Native Native应用程序CPU的情况,最高值在41%。
24. CPU-H5/Hybird Hybird App的最高值在30%。
25. CPU-React Native React Native的最高值在34%。 总结:CPU使用率大体相近,React Native的占用率低于Native。
26. 动画 1. React Native提供了Animated API实现动画。基本OK。React Native不适合做游戏,尤其 布局能力较弱。 2. Native Animation提供动画 3. H5/Hybird:采用js动画能力 React Native Animated API / 封装Native动画库 可以满足基本需求
27. 安装包体积 Hybird App 34(App壳) + 5(HTML) + 125(Angular) + 29(An-route) + 6(min.js) + 4(min.css) = 203 KB Native App 83KB React Native App 不含bundle:'>bundle: 843KB 含bundle:'>bundle: 995KB React Native框架打包后: 843(不含bundle) - 32(Hybird_app空壳,初识项目) = 811KB 相比快速迭代和热更新,比Native多了811KB一点都不重要,可以将图片素材、静态资源 线上更新缓存起来即可减少很多体积。 总结:牺牲一点体积,换更大的灵活性! 世界上哪有那么美的事,除非丑,就会想得美,:)
28. Big ListView & Scroll 性能 循环列表项500次: 1. H5页面惨不忍睹 2. React Native还可以接受 3. Native 采用UITabView更高效,因为不渲染视图外部分。
29. 真机体验 机型:iphone4s,iOS7 ;用最差的机型跑最美的东西 Native > React Native > Hybird 如果非要给个数字的话,个人主观感受是: Native: 95%+ 流畅度 React Native: 85~90% 流畅度 H5/Hybird: 70% 流畅度 总结:Native/React Native的体验相对而言更流畅。
30. NO3:更新 & 维护
31. 更新能力 1. H5/Hybird: 随时更新,适合做营销页面,目前携程一些BU全部都是H5页面;但是 重要的部分还是Native。 2. React Native:React Native部分可以热更新,bug及时修复。 3. Native:随版本更新,尤其iOS审核严格,需要测试过关,否则影响用户。
32. 维护成本 1. H5/Hybird: Web代码 + iOS/Android平台支持 2. React Native:可以一个开发团队 + iOS/Android工程师;业务组件颗粒度小,不用把 握全局即可修改业务代码。 3. Native:iOS/Android开发周期长,两个开发团队。 总结:React Native 统一了开发人员技术栈,代码维护相对容易。
33. 总结 1. 开发方式 (1)代码结构: React Native更为合理,组件化程度高 (2)UI布局:Web布局灵活度 > React Native > Native (3)UI截面图:React Native使用的是原生组件, (4)路由/Navigation:React Native & Native更胜一筹 (5)第三方生态链:Native modules + js modules = React Native modules 2. 性能 & 体验 (1)内存:Native最少;因为React Native含有框架,所以相对较高,但是后期平稳后会优于Native。 (2)CPU:React Native居中。 (3)动画:React Native动画需求基本满足。 (4)安装包体积:React Native框架打包后,811KB。相比热更新,可以忽略和考虑资源规划。 (5)Big ListView (6)真机体验:Native >= React Native > H5/Hybrid 3. 更新 & 维护 (1)更新能力: H5/Hybird > React Native > Native (2)维护成本: H5/Hybird <= React Native < Native