跨平台与声明式交互界面技术在企业移动应用中的探索应用

云南电网有限责任公司电力科学研究院 杨 政

随着移动应用技术的发展，移动应用在企业中的使用需求也呈现出爆发式增长，企业的内部移动应用也逐渐显现出快速迭代，多端适配的开发特点。在主流的iOS与Android移动操作系统上，往往需要掌握不同技术栈的开发人员协同配合，一定程度上带来了资金成本投入和管理成本的增加，而在跨平台与近年来出现的声明式交互界面开发技术，如苹果公司的SwiftUI、谷歌公司推出的Jetpack Compose 、Flutter等技术，让我们看到不同平台上技术发展方向的趋同化，未来为进一步降低企业移动应用开发投入，快速响应需求都可能带来有益的推动。本文将对相关技术的发展和在企业中的探索应用进行探讨。

1 移动应用现状

随着物联网、大数据、云计算和人工智能等新一代信息技术的普及运用，基于智能化的新一轮世界科技革命和产业变革正在加速推进。在竞争态势激烈的市场上，企业间面临着巨大的竞争压力，如何将好想法快速落地、快速试错，成为备受关注的问题。在数字化这条赛道上，占据国有经济重要地位的国有企业也不会缺席，“十四五”规划建议提出，加快数字化发展。发展数字经济，推进数字产业化和产业数字化，推动数字经济和实体经济深度融合。

智能技术的发展以及5G通信技术的快速推广，使的移动应用能够应用的场景更加广泛，催生出更多细分垂直类别移动应用产品出现，在2020年的“新冠”疫情加快了如生鲜电商和线上文娱的移动应用发展，而在企业应用领域，远程办公、视频会议及现场作业等需求也呈爆发式增长，移动应用范围在持续拓宽。

不管是互联网巨头，还是其他行业的企业，在落地数字化应用的最后“一公里”上，移动应用可以说是占据了主要排头兵地位。在互联网行业，移动端早已取代PC端，成为最大的流量分发入口。在其他行业，无论是提升客户服务能力、现场作业及远程办公等业务场景下，移动应用也成为重要的手段。

2 移动开发技术应用

2.1 移动操作系统发展情况

经过十多年的发展，至今各厂商的移动操作系统已接近统一，几乎只使用谷歌的Android、苹果的iOS，其他系统的市场占有率微乎其微。根据StatCounter数据显示，截至2020年10月， Android的市场份额占有率近74%，iOS的市场份额占有率约为25%，其他移动操作系统市场份额则不到1%。

2.2 移动应用跨平台技术的发展

此外，随着业务的发展，很多应用随着规模化的增长以及动态化内容需求增大，当出现应用端Bug，或者需求发生变化时，纯原生应用需要通过版本升级来更新内容，但目前移动应用的上架、审核是需要周期的，这个周期对高速变化的互联网时代来说是难以接受的，因此，对应用动态化更新的需求就变得迫切了。

2010年前后，在Web前端领域出现了HTML5技术，一定程度上为移动端的跨平台的解决方案发展带来了基础。发展至今，现在的跨平台方案大致可以氛围如下几类：

（1）使用原生内置的浏览器加载HTML5的Hybrid技术。这也是最早的跨平台方案基础，这种方式时将HTML5 直接嵌入到 App 中进行混合开发，优点在于开发时间短，可以快速验证产品效果，同时可以解决多端不一致问题，完全将Web端的快速开发上线、修改的优点继承。比较具有代表性的如Apache Cordova、Ionic以及比较新的Taro等。但HTML5方案也比较明显，其应用能力严重依赖于系统开发平台自带的Web引擎，其性能离平台的浏览器性能还会有较大差距，但即便能利用原生浏览器的Web引擎，其用户体验也依然远不及平台原生应用带来的效果。

（2）用JavaScript开发，然后使用原生组件进行渲染。得益于Web前端技术的蓬勃发展，JavaScript也被作为跨平台方案的一种方式被引入，其中最具代表性的应属脸书公司于2015年4月开源的跨平台移动应用开发框架React Native。React Native抛弃了低效的浏览器内核渲染，转而使用自己的DSL生成中间格式，然后映射到对应的平台，渲染成平台的组件。React Native调用Objective-C的API去渲染iOS组件，调用Java API去渲染Android组件，而不是渲染到浏览器DOM上。这使得React Native不同于那些基于Web视图的跨平台应用开发方案，React Native从上到下可以分为JavaScript层、C++层和Native层。具体如图1所示。其中，C++层主要用于实现动态连结库(.so)，作为中间适配层桥接，实现JavaScript端与原生端的双向通信交互。尽管最终实现了交互界面渲染、动画、网络等都通过原生实现，但碍于JavaScript虚拟机和JavaScript桥接器跟原生性能差距仍有一定距离。

图1 React通过桥接可以渲染到多平台上

（3）使用自带的渲染引擎和自带的原生组件实现跨平台。区别于前两种方案，这一类方案既不使用 Web引擎，也不使用原生移动操作系统的原生控件，代表解决方案为谷歌公司推出的Flutter。Flutter从头到尾重写了一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高。

2.3 主流移动平台的技术升级

无论是移动应用还是Web前端，作为互联网时代最后“一公里”产品和服务的承载体，其职能都是将企业与用户连接，将价值进行传递。另一方面，从技术形态发展看，无论是跨平台的相互融合和影响，还是在技术思路上的相互借鉴，技术的发展趋向于统一，当前行业也会将移动端、Web端统称为大前端。

在Web前端领域，多年的蓬勃发展使得技术业界出现了诸多有广大用户群体的前端框架，比较有代表性的如Vue、React和Angular，随着编程技术和思想的进步，以上框架也经历了几次大版本的更迭，可以看到的相似的地方是，这些框架均倡导使用声明式或者函数式的方式来进行界面开发，已经越来越被接受并逐渐成为主流，也逐渐证明了一个事实：在 UI 开发领域，描述性语言是最佳方式。

在过去的几年中，整个大前端交互界面技术领域已开始转向声明性界面模型，该模型大大简化了与构建和更新界面关联的工程设计。该技术的工作原理是在概念上从头开始重新生成整个屏幕，然后仅执行必要的更改，而同时，这样的方式可避免手动更新有状态视图层次结构的复杂性。

3 跨平台与声明式技术的开发实践

移动端出现跨平台与声明式交互界面开发技术为企业的产品快速开发与应用提供了良好基础，作者在其资产管理终端应用的项目中使用了相关应用，经过技术对比和选型，最终使用了谷歌公司推出的Flutter，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter框架使用Dart编程语言，具有C语言风格的语法，可以选择将它编译成JavaScript，因此在技术上可以很快进行迁移和切入。

在实际项目的开发中，资产管理终端应用在iOS和Android双端代码实现了50%以上的逻辑代码复用，在移动端的开发只投入了1个开发人员，大幅度降低了双平台双技术栈投入的时间和成本。统一技术框架还带了缺陷修复效率提升的好处，由于使用一套技术体系，开发人员在双端的具有Bug的逻辑代码可以进行统一修复，提升修复精确性和效率。

此外，为保持同一技术框架下开发的连贯性，作者所负责的资产管理终端应用后端Web应用也尝试了使用Flutter实现了部分后台管理页面，但目前Web开发领域的开发生态较为成熟，基于Vue等框架的第三方UI库也非常完善，开发效率上不仅没有带来移动端的提升，甚至不如现有主流的开发方式。

在实践应用开发中，Flutter开发框架发挥了很好的作用，一方面编程语言的切入门槛不高，另一方面其本身所倡导的声明式交互界面构建技术带来了快速构建与预览界面效果的特性，使得开发过程快速连贯，在业务需求变化时也能很快进行双端的修改响应。从原型设计到第一版交付，仅用了一个月时间，随后的应用迭代也可快速进行，可以形成一种跨平台应用快速开发的模式。

结语：移动互联网历经高速发展的黄金10年，多样的市场需求催化了前端技术不断升级改造，前端大统一时代正在来临，大前端技术的发展趋势已是定势。随着通信技术的发展，互联时代将进入到万物互联的物联网时代，可以预见的是技术将继续向前，随着编程技术和思想的持续进步，仍将会有络绎不绝的新技术出现，而在最后“一公里”的赛道上，作为企业最前线的移动应用技术的发展也必将继续百花齐放，让人期待。