前言
作为技术总监或项目负责人经常会遇到这样的问题:“如何省时省力又快速地开发出一款全新的App?”,对于这个问题,究其实质就是低成本、高效地开发一款App。然而如何做到低成本又高效呢?编者认为最好的方式是选择一个跨平台的框架进行二次开发,正所谓“站在前人的肩膀上,能看得更高更远”。
另外,对于平台来说,特别是移动领域的平台。我们大家都知道,市面上主要有两个:一个是大家耳熟能详的苹果手机平台,另一个是拥有超大用户群的安卓手机平台。因这两个平台在硬件结构、软件系统架构不同,造成了功能设计和用户体验上有很大的差异。
若我们不选择跨平台开发的话,一般这么做:为了满足不同平台的用户需求,我们招一个iOS开发人员,按照苹果手机的界面和使用习惯,开发一个适合苹果手机用户的App;同样地,再招一个安卓开发人员,做个同样功能的App给安卓用户(就是我们常说的原生开发)。
这种做法对公司来说,有个显现的问题:需要两个开发人员来维护两套代码。显然,这样增加了很大的成本,是不划算的。作为技术总监或项目负责人,当然希望用尽量少的开发人员和代码来完成开发任务。
跨平台开发
那跨平台开发又是怎么回事呢?
跨平台开发,简单来说,就是一个开发者写一套代码,在不同的平台上正常运行。套用Java编程思想来说,就是“一处编写,多处运行”。它的好处,自然就是最大化的降低成本。
那具体怎么跨平台开发呢?其实,经过移动平台十几年的发展,还真出现不少优秀的跨平台框架。我们只要选择适合自己项目的框架,然后在此基础上进行二次开发即可。
下面介绍几款跨平台开发框架
Cordova
全称Apache Cordova,是由Nitob1在2009年创建和推出的移动开发框架。官网地址:https://cordova.apache.org/。它当初主要想解决Android,iOS,BlackBerry以及微软的Phone四个平台的跨平台问题。只是到现在只剩下android和iOS了。
该框架的主要设计思路是提供硬件设备API接口,通过简单且又在Web端适用的JavaScript语言完成调用,实现相应功能。
从架构的本质来说,是在原生基础上加了一个Cordova的容器,在该容器上使用简单易用的JavaScript语言,实现移动端的UI界面的统一。这在当时来说,是往跨平台方向迈进了一大步。这里UI界面采用JavaScript语言还有一个好处:和Web端统一起来。从而实现三端(iOS端、安卓端,Web端)统一。
然而,Cordova也有一些不足:
1.Cordova在自定义绘制视图和布局等复杂界面上,存在着很大的困难,一时还实现不了。所以Cordova一般适用于简单的界面。
2.Cordova的更新与操作系统的更新,差距很明显,例如最新的Cordova支持Android 10.但Android已经发展到12了。
3.Cordova的受欢迎程度正在逐年下降,2019-2021年使用Cordova的软件开发人数量下降到16%。
基于以上原因,Cordova正在被其他的移动框架所替代。
这里再补充下项目经验:之前接触过Cordova。在使用过程中,确实感觉Cordova接口简单粗放,调用设备API接口,缺少太多的异常保护。
再者,性能也不是很良好,一个2000人的企业组织架构数据,在首次打开的时候,必然会出现一段时间的白屏。
HTML5
HTML5简称H5,这个也是移动端跨平台运用比较多的一个框架。
从整体架构上看,H5框架,就是在移动端上,通过UIWebView控件打开一个HTML5页面,HTML5页面属于前端开发,移动端负责交互以及原生开发。当HTML5页面与原生要进行事件响应或数据交换时(如按钮点击,从原生获取工号、token等数据),一般通过JSBridge进行交互。
这种方式,个人认为在所有的跨平台框架中,应该最简单的(前面的Cordova,还需要学习Cordoava框架),只需要一个前端开发人员完成HTML5页面开发。当需要与原生进行交互时,通过WebViewJavascriptBridge或者JavaScriptCore库,进行注册或回调。
从性能方面来说,H5和Cordova框架性能相差无几。交互方面都是以接口的方式进行,UI界面方面采用JavaScript的渲染,所以性能方面差不多。
补充下项目经验:H5框架实现了前端、移动端UI界面的分离,即前端做前端的界面,移动端完成移动端的功能,两者相互独立。只有到了需要交互之时,才采用JSBridge进行通讯。
它的不足就是JSBridge不稳定,还包括iOS端和安卓端接口不兼容(项目中一直被前端开发人员抱怨)。面对这些问题,当时也是没有很好的方案去解决。
React Native
简称RN,是FaceBook在2015年开源的跨平台移动应用开发框架。
该框架在UI界面上是足够灵活,可以覆盖应用程序所需的大多数场景。它使用的语言是React.js(一门基于JavaScript的编程语言)。
从整体架构上说,React Native和Cordova类似,也是搞了一个React Native容器,通过容器对所有界面的视图进行桥接。也正是这个桥接,导致在实现动画和使用报告更新的视图时会出现一些问题。例如滚动视围位置、报表不刷新的问题且这样的问题不好解决。
从性能上说,RN优于前面两个框架,毕竟Facebook在RN容器上做了优化,增加了渲染引擎之类的模块。然而,正如前面所说,在某些场景中还存在一些问题。
再说下项目经验:在实际项目中,我们也遇到过报表刷新不了的问题,找了很久的问题,最后没折,只好减少数据量来曲线救国。还有我们遇到另一个印象深刻的问题是React Native包下载更新。当新版本的RN包更新时,手机端一直更新不了。找了很久也木有找到原因,最后我们通过加上MD5值、下载放入临时文件夹等方式才比较好的解决了问题。
Flutter
Flutter,应该说是现在最火的移动跨平台框架。是Google在2015年开源的构建用户界面工具包。
它是基于Dart语言开发的,且是目前构建UI界面最灵活的框架。它提供的许多小部件,可以直接拿来使用;它还可以一套代码库高效构建多平台应用,包括移动、Web、桌面和嵌入式四个方向;这样也让测试变得简单些,不需要各个平台重复验证了;还有Flutter有火热的开发者社区做支撑,发展前景非常乐观。
在性能方面,与原生iOS应用程序的相当;在某些情况下,与Android的应用程序相当甚至更快些;是目前跨平台框架中最接近原生开发的。
其他的跨平台框架
除了上面介绍的几个框架外,还有Xamarin、Ionic、Nativescript这三个。由于这三个框架只有很少用户使用,属于小众框架。这里就不再多介绍了。
总结
1.对于每一款框架来说,发展至今还存在,自有它有存在的理由。不管现在怎么样,编者认为这些框架都是不错的跨平台框架。
2.我们选择框架时,最好是根据自己项目实际情况进行选择,切不可求大求全。以一个实际项目为例,一个一年做一次的国庆宣传活动,活动内容就一两个页面来说,最合适的是HTML5框架。