移动开发技术简介及比较

一:原生开发与跨平台技术

1.1 原生开发

原生应用程序是指某一个移动平台(比如iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。

在移动互联网发展初期,业务场景并不复杂,原生开发还可以应对产品需求迭代。 但近几年,随着物联网时代到来、移动互联网高歌猛进,日新月异,在很多业务场景中,传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在:

动态化内容需求增大;当需求发生变化时,纯原生应用需要通过版本升级来更新内容,但应用上架、审核是需要周期的,这对高速变化的互联网时代来说是很难接受的,所以,å对应用动态化(不发版也可以更新应用内容)的需求就变的迫在眉睫。

业务需求变化快,开发成本变大;由于原生开发一般都要维护Android、iOS两个开发团队,版本迭代时,无论人力成本,还是测试成本都会变大

总结一下,纯原生开发主要面临动态化和开发成本两个问题,而针对这两个问题,诞生了一些跨平台的动态化框架。

1.2 跨平台技术简介

针对原生开发面临问题,人们一直都在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架,根据其原理,主要分为三类:

H5+原生(Cordova、Ionic、微信小程序)

JavaScript开发+原生渲染 (React Native、Weex、快应用)

自绘UI+原生(QT for mobile、Flutter)

  1.2.1 Hybrid技术简介

(H5+原生混合开发)

这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(iOS)来加载这样以来,H5部分是可以随时改变而不用发版,动态化需求能满足;同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,也就是说,H5部分功能越多,开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP我们称之为混合应用或Hybrid APP ,如果一个应用的大多数功能都是H5实现的话,我们称其为Web APP 。

目前混合开发框架的典型代表有:Cordova、Ionic 和微信小程序。

  1.2.2 React Native、Weex及快应用简介

(JavaScript开发+原生渲染的跨平台框架)

这类框架的主要原理是通过 JavaScriptCore将虚拟DOM映射为原生控件树进行UI渲染

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

Weex是阿里巴巴于2016年发布的跨平台移动端开发框架,思想及原理和React Native类似,最大的不同是语法层面,Weex支持Vue语法和Rax语法,Rax 的 DSL(Domain Specific Language) 语法是基于 React JSX 语法而创造。与 React 不同,在 Rax 中 JSX 是必选的,它不支持通过其它方式创建组件,所以学习 JSX 是使用 Rax 的必要基础。而React Native只支持JSX语法。

快应用是华为、小米、OPPO、魅族等国内9大主流手机厂商共同制定的轻量级应用标准,目标直指微信小程序。它也是采用JavaScript语言开发,原生控件渲染,与React Native和Weex相比主要有两点不同:

快应用自身不支持Vue或React语法,其采用原生JavaScript开发,其开发框架和微信小程序很像,值得一提的是小程序目前已经可以使用Vue语法开发(mpvue),从原理上来讲,Vue的语法也可以移植到快应用上。

React Native和Weex的渲染/排版引擎是集成到框架中的,每一个APP都需要打包一份,安装包体积较大;而快应用渲染/排版引擎是集成到ROM中的,应用中无需打包,安装包体积小,正因如此,快应用才能在保证性能的同时做到快速分发。

 1.2.3 QT for mobile与Flutter简介

(自绘UI+原生)

 这类框架的主要原理是通过实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,所以可以做到不同平台UI的一致性但涉及其它系统能力调用,依然要涉及原生开发

QT for mobile(简称QT)是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。2008年,Qt Company科技被诺基亚公司收购,Qt也因此成为诺基亚旗下的编程语言工具。2012年,Qt被Digia收购。2014年4月,跨平台集成开发环境Qt Creator 3.1.0正式发布,实现了对于iOS的完全支持,新增WinRT、Beautifier等插件,废弃了无Python接口的GDB调试支持,集成了基于Clang的C/C++代码模块,并对Android支持做出了调整,至此实现了全面支持iOS、Android、WP,它提供给应用程序开发者构建图形用户界面所需的所有功能。但是,QT虽然在PC端获得了巨大成功,备受社区追捧,然而其在移动端却表现不佳,在近几年,虽然偶尔能听到QT的声音,但一直很弱,无论QT本身技术如何、设计思想如何,但事实上终究是败了。

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架,2017 年 Google I/O 大会上,Google 首次推出了一款新的用于创建跨平台、高性能的移动应用框架——Flutter,2018年2月,Flutter发布了第一个Beta版本,同年五月, 在2018年Google I/O 大会上,Flutter 更新到了 beta 3 版本,2018年6月,flutter发布了首个预览版本,到目前为止github上已经有123k stars,Flutter 生态系统得以快速增长,由此可见,Flutter在开发者中受到了热烈的欢迎,其未来发展值得期待。

现在,我们来和QT mobile做一个对比:

生态:从Github上来看,目前Flutter活跃用户正在高速增长。从Stackoverflow上提问来看,Flutter社区现在已经很庞大。Flutter的文档、资源也越来越丰富,开发过程中遇到的很多问题都可以在Stackoverflow或其github issue中找到答案。

技术支持:现在Google正在大力推广Flutter,Flutter的作者中很多人都是来自Chromium团队,并且github上活跃度很高。另一个角度,从今年上半年Flutter频繁的版本发布也可以看出Google对Flutter的投入的资源不小,所以在官方技术支持这方面,大可不必担心。

开发效率:Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以实现毫秒级热重载,并且不会丢失状态。

二:比较

2.1 原生开发

主要优势:

可访问平台全部功能(GPS、摄像头);

速度快、性能高、可以实现复杂动画及绘制,整体用户体验好;

主要缺点:

平台特定,开发成本高;不同平台必须维护不同代码,人力成本随之变大;

内容固定,动态化弱,大多数情况下,有新功能更新时只能发版;

2.2 JavaScript开发+原生渲染的方式

主要优势:

采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。

原生渲染,性能相比H5提高很多。

动态化较好,支持热更新。

主要缺点:

渲染时需要JavaScript和原生之间通信,在有些场景如拖动可能会因为通信频繁导致卡顿。

JavaScript为脚本语言,执行时需要JIT(Just In Time),执行效率和AOT(Ahead Of Time)代码仍有差距。

由于渲染依赖原生控件,不同平台的控件需要单独维护,并且当系统更新时,社区控件可能会滞后;除此之外,其控件系统也会受到原生UI系统限制

2.3  Flutter这种平台技术

主要优势:

1. 性能高;由于自绘引擎是直接调用系统API来绘制UI,所以性能和原生控件接近

2. 灵活、组件库易维护、UI外观保真度和一致性高

主要缺点:

1.动态性不足;为了保证UI绘制性能,自绘UI系统一般都会采用AOT模式编译其发布包,所以应用发布后,不能像Hybrid和RN那些使用JavaScript(JIT)作为开发语言的框架那样动态下发代码。

2.混合开发需要优化:

Flutter 对混合开发的支持仍然不够友好(Flutter 2.0 开始支持多Engine 模式)

第三方混合开发插件适配不及时( Flutter Boost 3.0 Beta 2021年3月已更新)

3.插件依赖问题:

涉及到调用原生能力的地方需要依赖第三方插件

部分业务需要插件封装,需要Android,iOS双端提供调用能力

依赖库冲突。依赖到的 Native 上的库版本不一致,依赖库源码有修改,库的托管方式也有不同

国内大厂在移动端跨平台的框架接入

目前已使用Flutter或reactNative或week的企业

阿里系

腾讯 

字节跳动

美团

京东 

京东

百度

贝壳

具体一些业务落地情况

使用react-native的APP( 腾讯课堂、京东、京喜、苏宁易购、微信读书、京东金融、网易云音乐、菜鸟裹裹、百度、美团外卖、美团外卖商家版、抖音、58 同城、携程、去哪儿、小红书、得到、小米有品、米家、喜马拉雅、脉脉)

使用flutter的APP( 微信、QQ、书旗、哔哩哔哩、哈罗出行、手机淘宝、闲鱼、UC 浏览器、飞猪、百度网盘、美团外卖商家版、猿辅导、学习强国、每日优鲜、盒马、米家、链家、同花顺、快手)

使用weex的APP ( 书旗、苏宁易购、腾讯动漫、滴滴出行、手机淘宝、闲鱼、UC 浏览器、饿了么、钉钉、飞猪、菜鸟裹裹、智联招聘、盒马、小米有品、米家、陌陌)

在上述 53 款大厂App中,其中明面上:

带有 flutter 的有 19 款;

带有 react-native 的有 21 款;

带有 weex 的有 16 款;

可以看出:

    flutter的使用比例明显上升不少,react-native还是使用最多的跨平台框架,weex意外的还有不低的比例。

技术学习成本和难度

rn,要求开发者学习react,要求精通flex布局,要求原生开发协作。

flutter,要求开发者学习dart,了解dart和flutter的API、要求精通flex布局,要求原生开发协作。

weex已经内嵌到uni-app中,就不单独提了。

 uni-app,要求开发者学习vue,了解小程序。

 对于rn、weex、uniapp这种内容的对于前端的小伙伴学习成本低,flutter因为使用的是dart语言和嵌套类型的界面编程方式相对而言学习成本会高一些

发展与未来

之前一篇 《为什么 Airbnb 放弃了 React Native?》 文章,让众多不明所以的吃瓜群众以为 React Native 已经被放弃,之后官方发布的  《Facebook 正在重构 React Native,将重写大量底层》 公示,又再一次稳定了军心。

同时 React Native 在 0.59 版本开始支持 React Hook 等特性,并将原本平台的特性控件从 React Native 内部剥离到社区,这样控件的单独升级维护可以更加便捷,同时让  React Native与 React 之间的界限越发模糊。

Flutter UI 平台的无关能力,让 Flutter 在跨平台的拓展上更为迅速,尽管 React Native 也有 Web 和 PC 等第三方实现拓展支持,但是由于平台关联性太强,这些年发展较为缓慢, 而 Flutter 则是短短时间又宣布 Web 支持,甚至拓展到 PC 和嵌入式设备当中。

weex 目前因为社区活跃度不够,阿里巴巴主导的weex 从 Apache Incubator退休,相对来说成熟度不能和 React Native 相抗衡。

目前gitHub上的stars也能很好的反应各自的发展:

Weex: 17.6k stars

React Native: 96.2k stars

Flutter: 123k stars

可以看出就目前而言大众更偏向flutter

三:跨平台技术适合什么样情景

一类是成熟已有的产品,其新功能,独立的模块会优先考虑使用,以纯UI展示为主。

一类是创新产品,绝大部分的UI页面都使用进行开发。

适用场景

独立的业务模块

以純UI展示为主

重构原来产品逻辑混乱的业务模块

替换H5加载慢,体验差的模块

不适用场景

第三方插件不支持的

高度依赖原生能力的

对性能要求很高的

参考文章:

Flutter 正在被悄悄放弃吗?

贝壳找房携手 Flutter,为三亿家庭提供更好的居住服务 | Flutter 开发者故事

flutter实战

国内大厂在移动端跨平台的框架接入分析

腾讯的 Flutter 应用经验

flutter、rn、uni-app比较

Facebook 正在重构 React Native,将重写大量底层

为什么 Airbnb 放弃了 React Native? 

https://github.com/flutter/flutter

https://github.com/alibaba/weex

https://github.com/facebook/react-native

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 本节将主要介绍一下移动开发技术的进化历程,主要是想让读者知道Flutter技术出现的背景。笔者认为,了解一门新技术...
    沫之阅读 1,073评论 0 1
  • 当前常见的移动开发技术主要分为原生开发和跨平台技术,下面就对各自进行简单的介绍。 1、原生开发   原生应用程序是...
    JimmyL阅读 2,034评论 0 1
  • 引子 传统的原生Android、iOS开发面临着诸多难以解决的问题,例如开发周期长、迭代缓慢等,因此很多公司备受困...
    邱穆阅读 364评论 0 1
  • 原生开发 原生应用程序是指某一个移动平台(比如iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接...
    Rance935阅读 1,241评论 0 5
  • 前言 本来这一篇应该介绍如何搭建Flutter开发环境的,但我想在了解Flutter前,不妨了解一下跨平台技术的演...
    Android高级工程师阅读 729评论 0 3