移动APP混合框架

主流的跨端方案,一种是,将JavaScriptCore引擎当作虚拟机的方案,表明框架React Native;另外一种是使用非JavaScriptCore虚拟机的方案,表明框架是Flutter。html

怎么选择跨端方案

从编程语言角度

  • JavaScript的历史和流行程度都远超Dart,生态也更加完善,开发者也远多于Dart程序 员。因此,从编程语言的角度来看,虽然Dart语言入门简单,但从长远考虑,仍是选择 React Native会更好一些。

从页面框架角度

  • 同时,从页面框架和自动化工具的角度来看, React Native也要领先于 Flutter。这,主要 得益于web技术这么多年的积累,其工具链很是完善。前端开发者可以很轻松地掌握 React Native,并进行移动端App的开发

从性能等角度

  • 相比于 React Native框架, Flutter的优点最主要体如今性能、开发效率和体验 这两大方面。
  • Flutter却不同。它一开始就抛弃了历史包袱,使用全新的Dart语言编写,同时支持AOT 和JT两种编译方式,而没有采用HTML/csS/ JavaScript组合方式开发,在执行效率上 明显高于 JavaScriptCore。
  • 除了编程语言的虚拟机,Flutter的优点还体如今Ul框架的实现上。它重写了Ul框架,从Ul 控件到渲染,所有从新实现了,依赖Skia图形库和系统图形绘制相关的接口,保证了不一样平台上能有相同的体验。

选择

  • 一旦使用Flutter开发成为团队的必选项,那么其余技术栈就没有存在的价值了。
  • 我将跨平台方案分红了两种:一种是,将 JavaScriptcore引擎看成虚 拟机的方案,表明框架是 React Native;另外一种是,使用非 JavaScriptcore虚拟机的方 案,表明框架是 Flutter。
  • 在我看来,从长远考虑的话,你能够选择Flutter做为跨平台开发方案。可是,最终 Flutter是否能成功,还要看谷歌新系统Fuchsia的成败。

原生

  • 原生应用程序是指某一个移动平台(好比iOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。好比Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序;而iOS原生应用就是指经过Objective-C或Swift语言直接调用iOS SDK开发的应用程序。

主要优点:

  • 可访问平台所有功能(GPS、摄像头);
  • 速度快、性能高、能够实现复杂动画及绘制,总体用户体验好;

主要缺点:

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

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

  • 在移动互联网发展初期,业务场景并不复杂,原生开发还能够应对产品需求迭代。 但近几年,随着物联网时代到来、移动互联网高歌猛进,突飞猛进,在不少业务场景中,传统的纯原生开发已经不能知足日益增加的业务需求。主要表如今:react

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

  • 业务需求变化快,开发成本变大;因为原生开发通常都要维护Android、iOS两个开发团队,版本迭代时,不管人力成本,仍是测试成本都会变大。ios

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

混合方案一:原生+H5

  1. Cordova
  2. Ionic
  3. 微信小程序
  • 这类框架主要原理就是将APP的一部分须要动态变更的内容经过H5来实现,经过原生的网页加载控件WebView (Android)或WKWebView(iOS)来加载(之后若无特殊说明,咱们用WebView来统一指代android和iOS中的网页加载控件)。这样一来,H5部分是能够随时改变而不用发版,动态化需求能知足;同时,因为h5代码只须要一次开发,就能同时在Android和iOS两个平台运行,这也能够减少开发成本,也就是说,H5部分功能越多,开发成本就越小。咱们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP咱们称之为混合应用或Hybrid APP ,若是一个应用的大多数功能都是H5实现的话,咱们称其为Web APP 。
  • 目前混合开发框架的典型表明有:Cordova、Ionic 和微信小程序,值得一提的是微信小程序目前是在webview中渲染的,并不是原生渲染,但未来有可能会采用原生渲染。

主要优势:

  • 混合应用的优势是动态内容是H5,web技术栈,社区及资源丰富。

主要缺点:

  • 缺点是性能很差,对于复杂用户界面或动画,WebView不堪重任。

  • 这类框架主要原理就是将APP的一部分须要动态变更的内容经过H5来实现,经过原生的网页加载控件WebView (Android)或WKWebView(iOS)来加载(之后若无特殊说明,咱们用WebView来统一指代android和iOS中的网页加载控件)。这样一来,H5部分是能够随时改变而不用发版,动态化需求能知足;同时,因为h5代码只须要一次开发,就能同时在Android和iOS两个平台运行,这也能够减少开发成本,也就是说,H5部分功能越多,开发成本就越小。咱们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP咱们称之为混合应用或Hybrid APP ,若是一个应用的大多数功能都是H5实现的话,咱们称其为Web APP 。
  • 目前混合开发框架的典型表明有:Cordova、Ionic 和微信小程序,值得一提的是微信小程序目前是在webview中渲染的,并不是原生渲染,但未来有可能会采用原生渲染。

混合方案二:原生+JavaScript

  1. React Native facebook出品
  2. Weex 阿里巴巴出品
  3. 快应用

主要优势:

  • 采用Web开发技术栈,社区庞大、上手快、开发成本相对较低。
  • 原生渲染,性能相比H5提升不少。
  • 动态化较好,支持热更新。

主要不足:

  • 渲染时须要JavaScript和原生之间通讯,在有些场景如拖动可能会由于通讯频繁致使卡顿。
  • JavaScript为脚本语言,执行时须要JIT(Just In Time),执行效率和AOT(Ahead Of Time)代码仍有差距。
  • 因为渲染依赖原生控件,不一样平台的控件须要单独维护,而且当系统更新时,社区控件可能会滞后;除此以外,其控件系统也会受到原生UI系统限制,例如,在Android中,手势冲突消歧规则是固定的,这在使用不一样人写的控件嵌套时,手势冲突问题将会变得很是棘手。

React Native

  • React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和Android两个平台。RN使用Javascript语言,相似于HTML的JSX,以及CSS来开发移动应用,所以熟悉Web前端开发的技术人员只需不多的学习就能够进入移动应用开发领域。
  • 因为RN和React原理相通,而且Flutter也是受React启发,不少思想也都是相通的,万丈高楼平地起,咱们有必要深刻了解一下React原理。React是一个响应式的Web框架,咱们先了解一下两个重要的概念:DOM树与响应式编程。
  • 上文已经提到React Native 是React 在原生移动应用平台的衍生产物,那二者主要的区别是什么呢?其实,主要的区别在于虚拟DOM映射的对象是什么?React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会经过 JavaScriptCore 映射为原生控件树。
  • JavaScriptCore 是一个JavaScript解释器,它在React Native中主要有两个做用:
  • 为JavaScript提供运行环境。
  • 是JavaScript与原生应用之间通讯的桥梁,做用和JsBridge同样,事实上,在iOS中,不少JsBridge的实现都是基于 JavaScriptCore 。
  • 而RN中将虚拟DOM映射为原生控件的过程当中分两步:
  • 布局消息传递; 将虚拟DOM布局信息传递给原生;
  • 原生根据布局信息经过对应的原生控件渲染控件树;
  • 至此,React Native 便实现了跨平台。 相对于混合应用,因为React Native是原生控件渲染,因此性能会比混合应用中H5好不少,同时React Native是Web开发技术栈,也只需维护一份代码,一样是跨平台框架。

Weex

  • 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. QT for mobile
  2. Flutter 谷歌出品
  • 在本篇中,咱们看看最后一种跨平台技术:自绘UI+原生。这种技术的思路是,经过在不一样平台实现一个统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,因此能够作到不一样平台UI的一致性。注意,自绘引擎解决的是UI的跨平台问题,若是涉及其它系统能力调用,依然要涉及原生开发。

主要优势:

  • 性能高;因为自绘引擎是直接调用系统API来绘制UI,因此性能和原生控件接近。
  • 灵活、组件库易维护、UI外观保真度和一致性高;因为UI渲染不依赖原生控件,也就不须要根据不一样平台的控件单独维护一套组件库,因此代码容易维护。因为组件库是同一套代码、同一个渲染引擎,因此在不一样平台,组件显示外观能够作到高保真和高一致性;另外,因为不依赖原生控件,也就不会受原生布局系统的限制,这样布局系统会很是灵活。

主要不足:

  • 动态性不足;为了保证UI绘制性能,自绘UI系统通常都会采用AOT模式编译其发布包,因此应用发布后,不能像Hybrid和RN那些使用JavaScript(JIT)做为开发语言的框架那样动态下发代码。
  • 也许你已经猜到Flutter就属于这一类跨平台技术,没错,Flutter正是实现一套自绘引擎,并拥有一套本身的UI布局系统。不过,自绘制引擎的思路并非什么新概念,Flutter并非第一个尝试这么作的,在它以前有一个典型的表明,即大名鼎鼎的QT。

Flutter

  • “千呼万唤始出来”,铺垫这么久,如今终于等到本书的主角出场了!
  • Flutter是Google发布的一个用于建立跨平台、高性能移动应用的框架。Flutter和QT mobile同样,都没有使用原生控件,相反都实现了一个自绘引擎,使用自身的布局、绘制系统。那么,咱们会担忧,QT mobile面对的问题Flutter是否也同样,Flutter会不会步入QT mobile后尘,成为另外一个烈士?要回到这个问题,咱们先来看看Flutter诞生过程:
  • 2017 年 Google I/O 大会上,Google 首次推出了一款新的用于建立跨平台、高性能的移动应用框架——Flutter。
  • 2018年2月,Flutter发布了第一个Beta版本,同年五月, 在2018年Google I/O 大会上,Flutter 更新到了 beta 3 版本。
  • 2018年6月,Flutter发布了首个预览版本,这意味着 Flutter 进入了正式版(1.0)发布前的最后阶段。
  • 观其发展,在2018年5月份,Flutter 进入了 GitHub stars 排行榜前 100 名,已有 27k star。而今天(2019年5月29日),已经有65K的Star。经历了短短2年多的时间,Flutter 生态系统得以快速增加,因而可知,Flutter在开发者中受到了热烈的欢迎,其将来发展值得期待!
  • 如今,咱们来和QT mobile作一个对比:
  • 生态;从Github上来看,目前Flutter活跃用户正在高速增加。从Stackoverflow上提问来看,Flutter社区如今已经很庞大。Flutter的文档、资源也愈来愈丰富,开发过程当中遇到的不少问题均可以在Stackoverflow或其github issue中找到答案。
  • 技术支持;如今Google正在大力推广Flutter,Flutter的做者中不少人都是来自Chromium团队,而且github上活跃度很高。另外一个角度,从今年上半年Flutter频繁的版本发布也能够看出Google对Flutter的投入的资源不小,因此在官方技术支持这方面,大可没必要担忧。
  • 开发效率;Flutter的热重载可帮助开发者快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上能够实现毫秒级热重载,而且不会丢失状态。这真的很棒,相信我,若是你是一名原生开发者,体验了Flutter开发流后,极可能就不想从新回去作原生了,毕竟不多有人不吐槽原生开发的编译速度。
  • 基于以上三点,相信读者和笔者同样,Flutter将来如何,心中自有定论。到如今为止,咱们已经对移动端开发技术有了一个全面的了解,接下来咱们便要进入本书的主题,你准备好了吗!

Qt

  • 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自己技术如何、设计思想如何,但事实上终究是败了,究其缘由,笔者认为主要有四:
  • 第一:QT移动开发社区过小,学习资料不足,生态很差。
  • 第二:官方推广不利,支持不够。
  • 第三:移动端发力较晚,市场已被其它动态化框架占领(Hybrid和RN)。
  • 第四:在移动开发中,C++开发和Web开发栈相比有着先天的劣势,直接结果就是QT开发效率过低。
  • 基于此四点,尽管QT是移动端开发跨平台自绘引擎的先驱,但却成为了烈士。

参考连接github

相关文章
相关标签/搜索