有关 Hybrid 开发模式实践总结

前言

随着公司业务不断发展，移动开发项目愈来愈多，项目任务时间紧，咱们内部开发流程是以项目为导向，有别于通常公司对产品不断迭代的作法，但移动端开发人员资源有限，须要在不一样项目之间作业务场景切换开发，就会常常出现项目完成时间 Delay。面对这样的问题，咱们该如何去解决呢？如今了解到的现状是每一个业务组都有配备 Web 前端开发人员，那么是否能把涉及到业务模块分发给具体业务组 Web 前端开发人员去开发，剥离业务模块，咱们移动端开发人员则专一于框架的开发或者手机端设备能力开发，好比可支持调用摄像头，监听网络状态变化，提供地理位置信息等等，有没有这样一套适合的解决方案呢，答案固然是有的。咱们引入了可利用 Web 前端能力和移动端操做系统原生能力相结合开发模式，叫作 Hybrid 混合开发。

目录

• 为什么选择 Hybrid 开发模式
• 在实践过程当中碰到什么问题和解决
• 经验总结

为什么选择 Hybrid 开发模式

1，目前工做中碰到的问题

随着公司业务飞速发展，移动端定制的项目愈来愈多，同时每一个项目的业务逻辑呈现出复杂化和差别化特色，每一个项目都须要提供 Android 版本和 IOS 版本，增长开发成本，开发周期每每又会被拖长。同时近年来前端技术蓬勃发展，HTML5 大行其道，不少主流 APP 厂商都利用 HTML5 前端能力来编写业务模块并结合原生设备能力进行混合开发，常见的好比淘宝、京东、微信、携程等等。虽然目前业务项目多，可是用户交互体验要求不高，常见页面也是列表，表单居多，适合充分利用HTML 5能力，所以引入Hybrid 混合开发模式，这样只须要 Web 前端开发人员写一遍前端业务代码，却能同时在Android 系统和 IOS 系统中执行。

2，Web APP、Hybrid APP、Native APP 对比

目前主流应用程序大致分为三类：Web App、Hybrid App、 Native App，如图：

Web APP

Web App 指采用Html5 语言写出的 App，不须要下载安装。相似于如今所说的轻应用。生存在浏览器中的应用，基本上能够说是触屏版的网页应用。

优势

（1）开发成本低，更新快
（2）更新无需通知用户，不须要手动升级
（3）可以跨多个平台和终端

缺点：

（1）临时性的入口
（2）没法获取系统级别的通知，提醒，动效等等
（3）用户留存率低
（4）设计受限制诸多
（5）体验较差

Hybrid App

Hybrid App 从外观上来看是一个Native App ，实则只有一个UIWebView，里面访问的是一个Web App ，如新闻类和视频类的应用广泛采起该策略：Native 的框架加上Web 的内容。不一样于Native App 须要针对不一样的平台使用不一样的开发语言（如使用Objective-C、Swift开发iOS应用，使用Java等开发Android应用），Hybrid App 容许开发者仅使用一套网页语言代码（HTML5+CSS+JavaScript），便可开发可以在不一样平台上部署的类原生应用 。因为Hybrid App 结合了Native app良好用户交互体验和Web App 跨平台开发的优点，可以显著节省移动应用开发的时间和成本，Hybrid App 获得愈来愈多公司的青睐。

按照网页语言和程序语言的混合，Hybrid App 一般能够分为三种类型：

1. 多View混合型：Native View 和 Web View 独立展现，交替出现。 其应用主体一般是Native App，Web技术做为补充。即在须要的时候，将 Web View做为独立的 View 运行，在 Web View内完成相关的展现操做。开发难度与Native App至关.好比：微信里的公众号文章使用的是Web View 。
2. 单View混合型：在同一个View 内，Native View 和Web View 为层叠关系，同时出现。开发成本较高，难度较大，可是体验较好。好比：百度搜索同时实现充分的灵活性和较好的用户体验。
3. Web主体型：应用主体是Web View ，穿插 Native 功能，主要以网页语言编写。总体开发难度低，基本能够实现跨平台，而用户体验好坏，主要取决于底层中间件的交互与跨平台能力。好比：项目管理工具 Basecamp 使用Web view呈现内容，调用系统原生 API 实现界面导航等功能来提升用户体验。

Hybrid App 也并不是是完美的解决方案。因为其使用 HTML5，某些依赖于复杂的原生功能或者繁重的过渡动画的应用会出现卡顿。同时，为了模拟Native App 的UI和感官，须要投入额外的时间和精力；尽管能够跨平台，可是并不能彻底支持全部的设备和操做系统。最后，若是应用的体验不够原生化，如一个简单的网站，则还有被Apple App Store拒绝的风险。

Native App

Native APP 指的是原生程序，通常依托于操做系统，有很强的交互，是一个完整的 App，可拓展性强。须要用户下载安装使用。

优势：

（1）打造完美的用户体验，性能稳定
（2）操做速度快，上手流畅
（3）访问本地资源（通信录，相册）
（4）设计出色的动效，转场，
（5）拥有系统级别的贴心通知或提醒，用户留存率高

缺点：

（1）分发成本高（不一样平台有不一样的开发语言和界面适配）
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，须要更多的开发人员维护以前的版本）
（3）更新缓慢，根据不一样平台，提交–审核–上线 等等不一样的流程，须要通过的流程较复杂

三者技术特性

以下图表中对比了Native App、 Hybrid App、Web App在不一样方面的表现，能够根据实际状况选择最佳的解决方案。

3，主流 APP Hybrid 应用比例

那么在实际应用场景中，有哪些选择了Hybrid app呢？实际上，咱们极可能使用过不少Hybrid app，却并无意识到它们是借了Native台子唱戏的Web app。根据Appcelerator的官网，目前单是运行基于它的平台搭建的Hybrid app的设备就有近2.86亿台。国外常见的有LinkedIn、Yelp、Netflix、Wunderlist ，国内主流的大厂基本也是采用了Hybrid 模式，应该是应用很普遍，同时技术上也是成熟稳定。

4，选择 Hybrid 混合开发的缘由

1. Hybrid 开发模式在开发页面 UI 上有天生的便利，而原生的则若是须要一个比较华丽的界面，就须要花很长的时间去开发。

2. 在业务上，看具体状况，有些简单业务在 Web上就能够处理，而若是涉及到复杂的业务，则能够用原生来写。

3. 在基本能力上，原生的强，能够提供手机端独有的特性，但 Hybrid 则须要依赖 Javascript 中间层进行转化获取设备能力。

4. 对于少界面，重业务的能够用原生，对于多界面，重效果的，能够用 Web 方式开发

   ​

在实践过程当中碰到什么问题和解决

项目背景介绍

目前在一个项目实行的开发模式就是 Hybrid 混合开发，Web 技术与 Android 原生能力结合开发，Web 技术负责界面开发和相关业务， Android 原生能力则提供手机端特有设备能力，好比调用摄像头，网络状态监听，数据库操做等等。但这个项目的特殊性相关业务与咱们提供的 Android 原生插件能力高度耦合，好比为这个项目提供数据库插件就是专门定制开发的，对于 Excel 插件的能力也是高度依赖一机一档相关字段，这跟咱们选型用Hybrid 混合开发模式 的初心是相背离。咱们初心是但愿 Web 开发人员只须要专一于业务开发和界面绘制，原生部分则是提供相应的Android 设备能力集便可，每一个插件跟业务是彻底无关，这样就能够作到原生开发和Web开发互相解耦，二者之间经过接口隔离便可。

实践过程当中碰到的问题

不管如何，一机一档项目是第一个应用 Hybrid 混合开发进行实战的项目，遇到的问题或者坑都是很正常，积极面对解决，而且不断进行总结和反思。把以前碰到的问题，简单罗列总结下：

1. 开发人员调试困难问题。前端人员在开发时候是编写HTML5页面，所运行的环境跟 PC 端有很大的不一样，由于须要运行在具体手机的环境上，所以须要每次编写完，须要经过移动端人员集成打包出一个APP 包进行安装验证，每新增或修改一个页面就须要从新打包验证，每次都须要集成测试，步骤繁琐，效率低下。
2. 项目集成测试问题。Android 系统 Webview 和 PC 端浏览器内核版本差别问题致使加载效果不一致。
3. 前端开发框架兼容问题。前端开发人员技术选型是基于 Vue.js 框架，这是一个渐进式 Javascript 框架，刚开始不支持。
4. 文档不规范问题。在前期开发阶段，文档提供不详细，开发人员使用规则不清楚，致使沟通成本增长。
5. Webview 性能问题。

如何解决

1. 关于调试困难问题。提供一个调试工具叫作 Chrome DevTool，经过 Inspect 模式加载手机端里的 HTML5 页面，为什么选择用 Chrome，由于Chrome 是目前主流前端开发调试利器，不只能支持 Web 端开发，对于 HTML5 页面调试开发一样是能监听到 Javascript 报错或 CSS 报错，对于资源、网络、日志、内存等等，都是一步到位。同时在 APP 里提供一个在线调试环境，就是 Web 前端开发人员布置一个站点，在手机端经过 IP 地址远程访问站点，这样就能够在手机端实时看到刚刚修改内容是什么。
2. 关于项目集成测试问题。在集成测试阶段，对Android 系统 Webview 和 PC 端浏览器内核版本区别有进一步认识，在Android 5.0 以前选用的是 Webkit 内核来加载 Web 资源文件，而在 Android 5.0 以后，则选用 Chromium 做为内核来加载，那么在为 PC 端浏览器端，若是你选择的是 Chorme 做为你默认浏览器的话，它的内核也是 Chromium 。尽管二者内核类型同样，都是 Chromium ，但二者加载 Javascript 效果上表现也不同，好比最新浏览器版本可支持 ES 6 特性，可是在最新版的手机上就不必定 ES 6特性，目前经过调查 Android 5.0 以前的系统市场占有率，发现比例为不到20%，暂时适配到 Android 5.0 版本。
3. 关于前端开发框架兼容问题。刚开始选用 Hybrid 开发模式时，对于公司内部 前端开发人员选用何种前端框架不甚了解，咱们这边提供的 Demo 则是最原始的 HTML + Javascript + CSS 写法，觉得前端人员只须要简单了解下就能上手，但在实践中发现却不是这样的。他们选型的前端技术是基于 Vue.js ，由于 Vue.js 是须要编译打包，生成发布的内容是混淆过的HTML + Javascript ，里面 Javascript 文件加载顺序使得咱们开发 Javascript 插件调用引发问题，那样就会致使前端人员在调用具体插件能力时候，发现这个插件里的某个方法还没定义，就致使页面数据出错。后来经过了解 Vue.js 开发方式，调整项目工程中 Javascript 执行顺序， 确保具体插件调用在 Vue.js 执行前触发。
4. 关于文档不规范问题。在前期开发阶段，前端人员没有统一查找目前已有插件能力的地方，仅仅根据咱们提供的 Javascript 文件里的方法注释，虽然是针对每一个方法的 Demo 用法，可是在实际开发中，前端开发人员也会调用出错。不是这个方法回调方法写错，就是参数类型传入传错，这样就致使的一个结果，前端开发人员不断地过来询问这个方法是如何调用的，我明明已经根据你的 Demo 写法进行编码了，为什么仍是报错的，前期的沟通成本仍是很高。因此须要一个提供统一文档地方，里面写明了具体配置如何，写法如何，怎么是一步一步走，基本上能够避免相似的错误，更好的提升工做效率，减小沟通成本，因此一个规范的文档是颇有必要的。
5. 关于 WebView 性能加载问题。这是在解决 WebView 加载 HTML + Javascript + CSS 等资源时发现一个白屏问题，同时用 HTML5 作页面自己就会比原生加载来的慢。为了提升用户体验，在加载等待时，提供一个加载框来提示，等 HTML 资源文件所有渲染完毕后，等待框再消失，这样就能够避免必定的白屏现象。

经验总结

总体来讲，为什么会选择 Hybrid 混合开发模式是基于当前业务场景须要，技术是服务于业务发展，业务场景变化致使技术解决方案的选型也须要相应变化。面对以项目导向的开发现状，不能一昧追求最新最酷的技术，也不能对过期的技术方案过度保守，应该须要对当前业务场景进行判断，选择合适的解决方案才最佳的策略，没有一劳永逸的技术手段，只有时刻变化的业务需求和不断更新迭代技术方案。经过在具体项目中实战，面对问题，积极解决问题，也正是在解决问题过程当中，产生新的想法和尝试，不断地完善框架能力，使得框架功能愈来愈全，进而更好的服务于业务开发问题，提升业务响应能力，下降开发成本，提高工做效率。