Hybrid App 和 React Native 开发那点事

简介：Hybrid App（混合模式移动应用）开发是指介于Web-app、Native-App这二者之间的一种开发模式，兼具「Native App 良好用户交互体验的优点」和「Web App 跨平台开发的优点」。不少人都知道，React Native 是 Facebook 开源的框架，能够直接用 Javascript 开发原生的APP，本文则会围绕开发中的具体实践问题进行讨论。

此前，咱们在多篇文章中提到过 React Native，本次移动精英开发俱乐部又专门围绕 Hybrid App 和 React Native 进行更加深刻的讨论，但愿可以给咱们的开发者同窗，提供一些建议。文章系朱雅丽整理， IT 运维管理平台 OneAPM 负责审校。如下为讨论内容：

主持人－东辉：你们好，今天咱们的主题是 Hybrid App 和 React Native，欢迎你们踊跃进行发言。

陈伟鹏－雅特iOS：我想知道用了 React Native 的同窗，对这种技术的态度和评价？

郭镫鸿：貌似携程、平安科技还有天猫都在使用 React Native，说明仍是有市场的。

主持人－东辉：React Native 在 Android 上的表现貌似不太好，坑比较多吧？

龙虾：React Native 的首次加载很慢，有缓存就好一些，其余的还能够，落地的难度就是不知道该客户端开发作，仍是前端作。

郭镫鸿：React Native 有效解决了H5的性功能障碍问题，这点很不错。就像 React Native 的理念：leaReact Native once, write anywhere .

James：我的理解，React Native 的推出应该是为了统一移动端的开发模式。

罗飞：你们能够分享一下本身公司用 Hybrid 或 React Native 的现状，都是怎么用的？

利炳根：现状就是：大部分均可以用 React Native 作完，只有少部分须要原生支持。固然，也和咱们的项目有关。由于咱们如今作得功能都比较简单，咱们主要工做都在处理一个问题：一个平台上显示好好的东西，一样的代码，在另外一个平台上，就不行了。而后还有就是对不一样的屏幕的适配，目前还没遇到特别难的东西，今天看看有没有人用来作大型成熟项目？学习一下经验。

Rory He：React Native 须要技术的学习成本其实更高一些。

frankphper：前端是否是由于 React Native 才变成「钱」端？

Kiss小锦：前几天看到阿里作了开源，效果参考淘宝、聚划算品牌团。https://github.com/alibaba/LuaViewSDK 。

其实，移动 APP 开发领域，要极致体验发布就不灵活（Native），要灵活发布就没有极致体验（H5）。有没有一种技术方案能够兼顾极致的体验和灵活的发布？ LuaView 能够完美解决上述两个问题，不过须要学习 lua 语言。

主持人－东辉：你们也能够说实践、使用场景以及收益等问题。

Kiss小锦：使用场景通常是电商作大促活动须要灵活上线。

利炳根：http://reactnative.cn/docs/0.21/getting-started.html 你们能够看看这里的文档，再买本入门书，通常的项目开发就差很少了。

杜鹏飞千锋安卓：直接用 WebView 和普通网页不更简单么？

郭镫鸿：若是那样的话，性能和功能都有问题。

Shawn：我认为目前 Hybrid 开发形式有三种：

1.原生开发一部分+H5开发一部分，经过 WebView 桥接； 2. 纯 H5 开发，须要本地功能时经过第三方打包工具实现 如 HBuilder+ ； 3. 用 H5 或 JS 开发，但最终编译成 Native 应用，如 ReactNative、APICloud、Cocos2d-js、Unity3D-js 等。还有种形式是 Webview+Runtime ，通常用在H5游戏加速，像腾讯 X5 浏览器、UC 等都内置了 Runtime；

jia_dongxu：能够用 cordova+ionic angular。v2 优化很多移动端，angular 也要出2了，听说优化移动，不知道 ionic2 和 angular2 正式版性能会不会提升不少？

真哥：不过，ionic 在安卓手机上性能很差。

郭镫鸿：ionic 有点卡，iOS 相对好些。

Shawn：移动端性能是个问题，传统的PC 端方案仍是不要用在手机上了。

柴明昆：貌似Angular 2.0对Native Apps 的支持和渲染是基于 React Native 的，咱们也是某个模块改动需求频繁，最近正在研究评估使用 React-Native。

James：ionic2 nightly 已经有了，ionic2 彻底采用angularjs2 ，用的 typescript es6，在性能会很大改善 。angularjs2 对移动端也进行了优化，React Native 目前应该都是大厂或者小范围在使用。

真哥：对dom的操做太频繁，特别是双向数据绑定，不太现实。若是你须要快速迭代，能够考虑React Native，若是特别注重体验和性能，建议用原生。

利炳根：前段时间，有外包公司专门推 React Native，号称基本的东西都已经封装了一遍，若是真的能作到他们宣称的那个程度，开发通常的 APP 超级快。不少通常的 APP，核心的竞争力是业务上的，对 APP 自己却是不在意，怎么快怎么来。固然，你们未必乐意作这类开发。

以前有公司，作了一年快速迭代，找到了真的有用户愿意用的业务，才开始优化的，一开始优化，优化完发现没人用，就是个悲剧。

窦静轩：关键是须要自定义，仍是须要 Native 开发，因此不会出现谁替代谁。想跑起来一个React Native 的项目没那么容易，还须要基本的 Node 知识 。

我麻不拿到温网冠军就不更名字：这样会不会致使大部分公司愿意用 React Native，从而减小开发成本？

利炳根：固然，这是公司的悲剧，开发人员却是无所谓的，公司倒了能够去下一家，反正本身技术练到了。咱们两天前来的新同事，已经负责 React Native 的动画开发了，总得来讲，上手仍是很容易的。

Shawn：也就是说大公司追求用户体验，若是不计成本和开发效率的话，仍是会用原生来作。

真哥：React Native 也属于一种开发模式了，其实优缺点很明显，React Native 只能调用原生接口，可是不能对原生作扩展，要作扩展只能写 Native，React Native 比 ionic1 好一点，不过如今学习 ionic2 或者 angular2 须要去看看 typescript。

jia_dongxu：React Native 的缺点，Android 体验太差了，很是卡。

利炳根：卡的问题，须要把开发模式关了，会好很是多，而后，页面仍是能够适当优化一下的。

窦静轩：若是说有一批人，把市面上流行的组件的都封装了， 而且开源了，那样推广的速度也会很快。

我麻不拿到温网冠军就不更名字：就是说若是须要自定义控件的时候，React Native 作不到？

真哥：是的，React Native 不能作接口开发。

窦静轩：React Native 提供自定义组件的方法，须要 Native 本身开发。

利炳根：把原生封一层给 React Native 用，安卓不是很了解，iOS 这块是很是简单的。固然也多是由于我作的功能比较简单。

柴明昆：React Native 在使用 View 的时候，这些 View 是要通过本地定制的，而且将相关方法暴露给 JS ，这样 JS 端才能正常使用。

张春明：React Native 是否采用？我通常这么想：可否达到快速迭代，能够适应产品的各类变态修改(控件修改)，有问题容易追踪定位，现阶段更倾向于混合开发，而后各取所需。

Shawn：因此说目前尚未一套完美的方案，也就是说须要原生来作的，咱们就用原生好了，H5 优点的地方就用 H5，这才叫混合开发嘛！

郭镫鸿：React Native 在性能和功能上是没有问题的，主要学习曲线比较陡峭，会用的人少。

窦静轩：Hybrid 受限于 WebView 啊，WebView 若是有 Bug 你没辙啊。

龙志辉：天猫的部分业务不是已经用 React Native 改造了吗？

郭镫鸿：天猫对 React Native 进行了封装。

柴明昆：若是没记错的话，QQ 空间的发现模块，就是用的 React Native。

真哥：用什么技术既不影响性能，又达到了功能和提升用户体验？

窦静轩：我以为用啥在于开发者决策，若是你为了一个广告活动页，去弄 React Native 和Hybrid ，真心不如一个 WebView H5 原生去搞。我是15年趟了一年 Hybrid 的坑，16开始趟React Native 的坑了。

龙志辉：本地加毛玻璃吧！其实编程的思路是同样的，React Native 或者 Hybrid 主要目的不少时候是为了突破客户端审核限制和达到代码复用的目的，避免一个相同的业务写三份代码（Android，iOS，Web）。

郭镫鸿：我发现12306用的动态库也绕开了苹果的审核。

真哥：其实我以为 React Native 更像一种思想 ，并不仅是表明一个框架，学习框架主要是学习做者的思想， 就好比 angular 。

窦静轩：对，是思想，组件式开发。

我麻不拿到温网冠军就不更名字：我以为 React Native 作某些模块还行，可是若是说彻底来代替原生，我以为是否是太快夸张了？

真哥：其实都是 MVVM，替代不了，只是说可以在相对短的时间没作出接近同等效果对性能影响又不大，「分久必合，合久必分」，如今彻底被推翻了，若是统一的话，也许就不会有这么多新的想法了。

龙志辉－iOS：每一年 iOS 和 Android 系统更新都会开放一大票新的API，用第三方的始终会慢半拍，性能和用户体验在客户端是放在首位的。

Shawn：你看 Cocos2d 支持 JS 吧，Unity3d 官方推荐用 JS 吧，虽然说目前 JS 面向对象不太完全，你看 ECMAScript6 也发不了，JS 用起来就更爽了，关键是 React Native 默认支持 ES6。

汤涛：我以为 React Native 或者 Hybrid 方案，适用于强运营类的产品，好比电商类，工具类这种暂时不必，你们选择技术方案时能够参考。

龙志辉－iOS：不知道微信的应用号会使用什么技术？React Native？

James：微信的应用号用 JS，并且微信有 WebView。

龙志辉－iOS：那仍是 Hybrid 啊，若是微信也把 JS 框架开源了，就是第二个 React Native 了。

Shawn：腾讯不会弃标准于不顾的，微信应用号绝对是 H5 崛起的时候。

龙志辉－iOS：其实我以为 React Native 有点像 Cocos2d-x，把各个平台的组件封装一套，用C++一次编写，就能够移植到各个平台了。

罗飞：很是感谢你们的讨论，因为时间的缘由，今天的讨论到此为止。后续咱们还能够再进行更多的交流，再次感谢你们。

国内 ITOM 管理平台 OneAPM 致力于帮助企业用户提供全栈式的性能管理以及 IT 运维管理服务，经过一个探针就可以完成日志分析、安全防御、APM 基础组件监控、集成报警以及大数据分析等功能。想阅读更多优秀文章，请访问 OneAPM 官方技术博客

本文转自 OneAPM 官方博客