App的跨平台开发,还香吗?一篇文章深入为你剖析(跨平台 app 开发)

跨平台真的香吗?

曾几何时,以RN为代表的跨平台的技术一经推出。得到无数掌声。也为互联网创业者看到新的希望。他们一度认为,跨平台是万能的。可以帮助他们解决一切问题,甚至一些技术经理,觉得不赶上跨平台技术的大潮。就仿佛就落伍了。跨平台的方案,一套又一套的推出。技术一代又一代演进,一直到今天,有人力推,有观望,有人嗤之以鼻。这是为什么呢。我将在下面的文章进行深入分析一下。

App的跨平台开发,还香吗?一篇文章深入为你剖析(跨平台 app 开发)

APP 跨平台开发是目前比较热门的方向,采用 web 框架开发,以 web 的开发体验快速构建应用,提高了迭代的效率。同时 web 开发方式大多使用动态语言,能够绕过原生开发限制动态加载,因此具备热加载、热更新的能力。用跨平台技术开发的应用无论性能还是用户体验都很接近原生应用。

Flutter 是 Google 新推出的一款帮助开发者开发高质量原生应用的全新APP跨平台 UI 框架,它的目标是解决了移动开发中跨平台、高性能问题,一经推出就受到开发者的广泛关注。

下面将介绍几大流行的跨平台开发技术,并从使用成本、开发效率、一致性、动态性和性能等方面作更深入的分析,提供更具体的参考。

App的跨平台开发,还香吗?一篇文章深入为你剖析(跨平台 app 开发)

几种技术方案

webview

利用 安卓和 iOS 上的 webview 容器,APP 能够执行 html、css 和 js 脚本,展示 web 页面。如果需要原生功能就添加 bridge 供 Javascript 调用。具有开发效率高、跨平台、支持动态发布等特点,它是目前应用最广泛最成熟的一种方案。

React Native/Weex

React Native 和 Weex 这类方案,使用 javascript 来构建界面,在运行时翻译成原生组件展示出来,实际上所有界面都是用原生组件。支持跨平台,性能和用户体验高于 webview,接近原生应用,是当前热门的跨平台开发技术。

Flutter

Flutter 使用了一种全新的方式,自己重写了一个平台无关的渲染引擎,它只提供画布,所有的 UI 组件、渲染逻辑都是在这个引擎上处理的。最大程度上保证了各平台下的一致性,同时也拥有媲美原生的高性能体验。

注:基于 webview 的框架目前已广泛在 APP 开发中应用,各种利弊都已得到充分验证,这个技术具有开发效率、跨平台、动态发布等方面的优点,但缺点也明显,性能和用户体验上都很糟糕。接下来,我们重点对 React Native 和 Flutter 进行分析对比。

使用成本

学习曲线

React Native 采用 js 语言,基于 React,对于前端工程师比较友好,上手成本低。

Flutter 使用 Dart 作为它的开发语言,Dart 跟 Java 有点像,比较简单,上手也容易。但毕竟是门新语言,多少会有些障碍。

接入成本

如果是全新的项目,接入 React Native/Flutter 成本较低,但对于混合开发,接入到现有项目,将是一个巨大的工程。

我们需要考虑如何集成 SDK 到现有项目,原生页面与 React Native/Flutter 页面如何跳转传值,如何封装原生模块供与 React Native/Flutter 调用,如何打包 React Native/Flutter 与 bundle 集成,如何部署发布,如何跨端联调等。

成熟度

React Native 是在 2015 年发布的,经过 3 年多的发展,已经比较成熟。React Native 社区发展也很活跃,贡献了大量的开源代码。

而 Flutter 是在今年 6 月份才推出发布预览版,社区也刚刚发展。所以,Flutter 还需要时间。

以 Github 上打开的 issue 的数量来看,截止到 2018-10-28,React Native 有 689 个,Flutter 有 4097,这也说明了 Flutter 目前尚不稳定。当然国内已经开发出了基于Flutter的应用。

兼容性

React Native 没有真正实现跨平台,实际开发中,我们需要去适配和桥接两端的差异性,这带来了额外的开发成本。

Flutter 相对来说做到了真正的跨平台,一套代码在两端运行基本没有兼容性问题。

动态性

热更新

React Native 支持热更新。

Flutter 的机制目前还不支持热更新功能,仍然需要发版。

性能

为了更准确地测量数据,以下性能测试,均使用低端设备,跨平台开发框架使用目前的稳定版本。

其中iOS端设备为 iphone 6,

开发环境,React Native 版本:0.50.4,Flutter 版本:0.9.4。

测试环境,Release 模式。

分别用 Flutter 和 React Native 实现同一个 Demo。Demo 只有一个长列表页面,展示随机生成的 1 万条数据,其中每行有两个本地图标,效果如下:

Flutter 并没有达到官方宣称的稳定 60帧/s,在快速划动的时,还是出现丢帧的现象。平均下来 FPS 为 50.5

App的跨平台开发,还香吗?一篇文章深入为你剖析(跨平台 app 开发)

React Native 在高性能场景下表现很糟糕,页面渲染跟不上滑动速度,多次出现白屏现象。

App的跨平台开发,还香吗?一篇文章深入为你剖析(跨平台 app 开发)

Android

Flutter

滑动很流畅,未出现白屏现象

React Native

滑动很流畅,但是多页之后页面渲染跟不上滑动速度,多次出现白屏现象

总体来说,这些跨平台方案,在性能上,在启动速度,跟原生的应用都有很大的差距。

开发的建议

1。如果你的app已经开发了很多年,几年下来已经形成一个庞大项目,可能不太适合进行混合开发,无论性能,还是开发难度比较大。

2,如果你们做一个小型的app,作为技术探索还是可以的。

3,对于创业公司来说,跨平台的app开发解决方案,确实可以提升产品的体验。我们公司也尝试的开发了基于Flutter技术应用。

4.一个重要的一点,RN技术其实在app store进行审核上也会遇到一些麻烦,苹果是坚决制止热更新功能的使用。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。