混合式移动应用开发浅析之Ionic/Cordova vs React Native

Posted 2021-05-01 擎天软件

混合式移动应用开发在过去的两年中已经成为移动界的核心话题，很多开发框架也随之而生，但要如何选择合适的框架则成为首要难题。近年来，擎天科技在移动开发领域也积累了丰富的经验，本文的初衷就是通过Ionic/Cordova vs React Native的剖析，帮您找到最合适的开发框架。

什么是混合式移动应用？

简单来说一个混合式移动应用就是组合使用本地代码和Web代码开发的移动应用。参见下图：

目前大家都了解混合式开发的好处，但是也存在一些误解。比如会片面的认为混合式开发就是使用html5技术开发移动应用。其实这只是其中的一种类型，目前混合式开发可以分为三类：

•非平台原生语言：如Xamarin，它利用.NET开发语言开发跨平台的本地移动应用；

•HTML5 Hybrid：如Cordova，它利用HTML5、CSS、javascript开发跨平台但在WebView中运行的移动应用；

•Native Hybrid：如React Native，它利用Javascript、JSX、CSS开发跨平台的本地应用；

本文仅讨论Ionic/Cordova和React Native的优劣比较和适用场景，避免大家技术选型时陷入误区。

React Native

它是由Facebook开发的，使用其React框架开发本地应用的移动开发框架。React Native具有大量的原生ios、android UI组件，支持快速开发和测试，支持开发阶段Live Reload即时加载代码结果。

优势

1.代码大部分情况可复用于iOS、Android和Windows Phone甚至Windows10开发；

2.使用JSX（JavaScript and XML-esque markup）语言编程，通过使用JSX你可以在写JS代码的同时在同一个文件中写简洁类似HTML/XML结构的代码编程UI；

3.性能优于Ionic/Cordova，因为它彻底摆脱了WebView，直接使用原生的UI组件,而后者使用CSS主题在WebView中渲染出不同平台的UI组件；

4.使用多线程，JS代码和UI分别运行在不同的内核上。

劣势

1.将HTML代码转换为本地代码很容易出错，而修改这些问题可能需要你了解原生语言，如Object-C/Swift；

2.React Native原先只是为iOS开发的，所以目前对于其他平台，你可能需要自行开发一些组件。

Ionic/Cordova

Cordova由PhoneGap框架开发，Ionic是在其基础上使用AngularJS前端框架开发混合式移动应用。它适用于快速原型开发，入门简单，支持通过主题样式实现Material UI设计。

优势

1.代码可复用iOS、Android、Windows Phone和Web开发；

2.能够快速的开发和测试，不需要启动重磅的模拟器；

3.允许使用TypeScript开发，能够平滑过渡到使用Angular2；

4.完善的插件机制几乎可以让你使用所有的设备本地功能。

劣势

1.如果存在和本地代码大量交互的情况的话，性能问题将会凸显；

2.使用CSS主题渲染的UI外观可能不及原生平台的UI外观；

3.开发高交互的应用将会是个复杂的工作。

总结

两者的比较可以简单的归纳为下图：

框架	React Native	Ionic/Cordova
语言	Javascript，JSX，CSS	HTML5，CSS, Javascript
输出	Native	Webview + Native
性能	高	低
学习曲线	低	低
兼容性	iOS、Android、Universal Windows Platform (UWP)	iOS、Android、 Windows Phone

笔者建议：

1.如果开发管理类或者展示类的应用建议使用Ionic/Cordova；

2.快速原型开发建议使用Ionic/Cordova,笔者提供将Axure开发的原型打包为APP的种子项目；

3.如果需要开发配套的微信或者钉钉应用的建议使用Ionic/Cordova，因为代码可复用。配合笔者提供的ocLazyLoad迟加载的方案可提高用户体验；

4.如果开发和设备交互频繁或者要求高性能的应用建议使用React Native。

对于两者的选择，笔者认为技术本身没有优劣之分，在适合的场景选择合适的技术才是王道。