RN、Flutter、Uni-app APP框架对比

框架背景介绍

Flutter

Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。

React Native

React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

技术学习成本和难度

RN, 要求开发者学习React,要求精通Flex布局,要求原生开发协作。
Flutter,要求开发者学习Dart,了解Dart和Flutter的API、要求精通Flex布局,要求原生开发协作。
Weex,已经内嵌到uni-app中,就不单独提了。
uni-app,要求开发者学习Vue,了解小程序。
很明显uni-app的学习成本太低了,它没有附加专有技术,全部使用公共技术。

性能分析和写法的对比

flutter作为界面库(注意它只是界面库,dart语言是另一个项目),它唯一要干的事情就是渲染界面。不像HTML5,flutter界面库连视频、定位等都没有,就是一个纯排版引擎,绘制文字、按钮、图片等常用界面控件。

这个排版引擎的特点是简单、高性能。

3大引擎的性能排名:flutter > react native/weex > webview
3大引擎的编码复杂程度排名:flutter > react native/weex > webview

(uni-app是双渲染引擎,webview和weex都内置了,随便开发者使用切换)

性能好,有个度,客观地讲,rn/weex调用原生渲染的性能,和flutter的渲染性能,在用户体验上并没有明显区别,甚至在很多场景下,和webview渲染的小程序也没有明显区别。

ui库比较

RN和 flutter 在IOS和Android上需要使用2套ui库,
uni-app默认也是这种通用ui风格。uni-app的开发者只需要写一套界面ui,就可以适应不同手机的用户,真正的 write once,run anywhere。

动态性(热更新)

除了flutter,rn/weex/uni-app都可以动态热更新。
标准的flutter 不支持热更新,有团队改造了flutter,使其支持热更新,当然也相对的降低了性能。

生态

任何开发引擎,都离不开生态。

对于国外的开发者,rn、flutter的生态肯定比uni-app好,比如facebook登陆分享、Google地图等。

但对于国内的开发者,那是反过来的,中国开发者需要的全端推送(UniPush集成了iOS、华为、小米、OPPO等众多原厂推送)、各种国内登陆、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等,都是在uni-app体系里,这方面生态可比rn、flutter丰富多了。uni-app的插件市场有数千款插件,不能说应有尽有,但确实是最丰富的跨端开发框架生态了。

另外,uni-app的生态还比其他竞品强在如下方面:

App和H5提供了renderjs技术,使得浏览器专用的库也可以在App和H5里使用,比如echart、threejs等参考
兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入uni-app,并且在App侧通用,参考
兼容微信小程序自定义组件,并且App、H5侧通用,参考
这些丰富的生态兼容,是rn和flutter无法享受的。

更新:2020年11月google全球开发者大会公布的数据,flutter全球月活开发者50万,中国占11%,也就是5.5万。这数字太小了,撑不起好生态。DCloud的开发者月活100万+,生态更繁荣。

结论

如果追求APP性能,还是都选择使用原生开发,Flutter虽然性能上比其他两个框架有优势,但是一方面国内dart并不流行,人员招聘难度较高,与其招个dart程序员,还不如直接使用原生开发,再说Flutter也是需要开发原生的客户端。

为了追求热更新,并且希望一套代码,多处部署,确实uni-app是个不错的选择,在国内社区交流也比较多。

目前开发商提供的是React Native 的框架,性能上,相比uni-app没有明显差别。

rn与uni-app的相对优势:

  • rn是纯单页的,嵌入原生App比较灵活。而uni-app是应用整体的概念。

rn与uni-app的相对劣势:

  • 需要原生协作,维护3套代码,无法有效降低开发成本,提升开发效率
  • 另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色情况。

考虑开发商已有RN APP的基础上,并且前端系统也是采用React,建议尝试使用RN ,
假如性能瓶颈影响使用,可以改造RN的客户端为原生的APP,毕竟RN是单页面应用,每个页面互相独立。

Uni-app 可以尝试使用在小程序开发上,如果有需求将小程序内容发布成APP,也可直接改造为Uni-app。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐