移动应用跨平台开发方案的研究

(中国船舶重工集团公司第七一八研究所 河北 邯郸 056000)

引言

随着时代的不断前进，移动互联网以其快捷、经济、方便等特点，悄然走进人们的生活。在移动互联网时代下，移动应用是每一个互联网企业必备的产品。在快节奏社会进程中，企业的移动应用想要获得先机和占领市场，开发效率和用户体验是十分重要的。市场上的移动应用主要分两大平台：iOS和Android，在原生的方式下，企业的每一款移动应用都需要针对iOS和Android这两个平台分别开发，这就意味着企业不仅需要在不同的平台间尝试用不同的语言去实现同样的功能，还要承担由此带来的维护任务。如果还要继续向其他平台(比如 Web、Mac 或 Windows)拓展的话，企业需要付出的成本和时间将成倍增长。而这，显然是难以接受的。因此，移动应用的跨平台开发是十分必要的。

一、跨平台开发方案的三个阶段

跨平台开发从根本上增加了业务代码的复用率，减少了因为要适配多个平台带来的工作量，从而降低了开发成本。在提高业务专注度的同时，能够为用户提供一致的用户体验。对于移动应用的开发如果能实现“一次编写、多平台运行”，可以为企业节省人力资源，从而带来直接的经济效益。随着移动端的不断的发展，各种跨平台的方案也层出不穷。当下跨平台方案主要经历了这三个阶段：web框架阶段、原生渲染阶段、自绘UI阶段。

(一)web框架阶段

web框架阶段主要依赖于Web相关技术通过浏览器组件来实现界面及功能，典型的框架包括 Cordova、Ionic。主要采用的是原生应用内嵌浏览器控件WebView的方式进行HTML5页面渲染，并定义HTML5与原生代码交互协议，将部分原生系统能力暴露给HTML5，从而扩展HTML5的边界。这类交互协议，就是我们通常说的Bridge(桥)。这种开发模式既有原生应用代码又有Web应用代码，因此又被称为 Hybrid开发模式。Hybrid框架结构如图1所示：

图1 Hybird开发框架

由于采用了Web开发技术，社区和资源非常丰富，开发效率也很高，同时HTML5代码只需要开发一次，就能同时在多个系统运行，开发成本相对来说就降低了。但是他的缺点也非常明显，一个完整 HTML5 页面的展示要经历浏览器控件的加载、解析和渲染三大过程，性能消耗要比原生开发增加了很多个数量级。这就导致应用的性能较差，很多功能无法实现，用户体验也比较差。

(二)原生渲染阶段

当开发者认识到Web框架阶段的绘制问题是性能的瓶颈问题时，果断的采取了通过原生渲染的方式来实现跨平台。原生渲染阶段优化了web框架阶段的加载、解析和渲染这三大过程，把影响它们独立运行的Web标准进行了裁剪，以相对简单的方式支持了构建移动端页面必要Web标准，也保证了便捷的前端开发体验；该阶段的解决方案在舍弃了浏览器控件渲染，取而代之的是使用平台自带的UI组件，从而使得渲染过程更加简化，也保证了良好的渲染性能。FaceBook的RN和阿里的Weex就是其中的代表技术，它们的原理都相似，只是上层采用的语言不通，中间采用的桥有差异。原生渲染阶段的框架如图2所示：

图2 原生渲染框架

原生渲染大大简化了整体加载、渲染机制，并且由原生接管绘制，这样大大的解决了性能问。从图2的框架中，我们看到了(桥)Bridge在框架中起到非常重要的作用，但是在面对不同平台的时候需要针对平台的差异性开发不同桥，这就导致了桥的维护成本特别的高，不仅需要各平台对应的开发人员还需要多出桥的适配人员，人力成本大大增加，对于中小型团队来说是一个较大的负担。

(三)自绘UI阶段

为了解决前两个阶段没有解决问题，自绘UI阶段通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统平台的原生控件，这样做可以保证不同平台UI的一致性。不用像原生渲染阶段一样，随着不同平台系统版本的变化，开发者还需要处理不同平台的差异，甚至有些特性只能在单个平台上实现，这样无法保证不同平台UI的一致性。该阶段的代表方案有Google的Flutter。自绘UI阶段的开发框架如图3所示。

图3 自绘UI框架

该阶段的方案则开辟了一种全新的思路，即从头到尾重写一套跨平台的 UI 框架，包括渲染逻辑，甚至是开发语言。通过这样的思路，可以尽可能地减少不同平台之间的差异,同时保持和原生开发一样的高性能。所以说，自绘UI阶段成了三阶段跨平台移动开发方案中最灵活的那个，也成了目前最受业界关注的框架。

二、跨平台方案的选择

下面我们抽取三阶段主要的跨平台方案，从开发效率、学习成本、维护成本、动态性、社区形态等方面就行比较。如表1所示：

表1

有表1可以看出，ReactNative和Flutter两种跨平台方案相对来说较均衡，其他的方案都有一些差池。React Native 依托于 Facebook，经发展已经成长为跨平台开发方案的实际领导者，并拥有较为丰富的第三方库和开发社区；Flutter 以全新的姿态出现，并提供更彻底的跨平台技术解决方案，也有了诸多商用案例，加上清晰的产品路线图和 Google 的强大号召力，Flutter 未来的发展也非常值得期待。

我们的企业在选择某一项跨平台的方案的时候，可以参考以下维度，如企业规模的大小、当前技术栈的储备、应用业务的要求、业务性能的要求以及开发和维护成本的要求等方面进行综合的考虑。然后对比各跨平台方案的在各方面的表现，来选去符合自身的跨平台方案。

三、总结

本文通过分析当下移动应用的开发方式，说明了移动应用的跨平台开发是十分必要的。整理分析了跨平台方案发展的各阶段和各阶段的所解决的问题，最后通过多维度的对比各跨平台方案的，为企业在选择跨平台方案时提供了一个参考。