混合APP开发技术选型

4,575 阅读4分钟

原生(Native)APP、webApp、混合(Hybrid)APP三者之间的区别

Native APP

传统的原生App开发模式,有iOSAndroid两大系统,需要各自语言开发各自App。

  • ios:开发语言为Object-c或者Swift
  • Android:开发语言为Java,Kotlin

webApp

指的是运行在移动设备的网页应用(H5应用)。目前大部分是指使用vue或者react等前端框架制作的单页应用(SPA)。

Hybrid App

指的是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在AndroidiOSApp上同时运行,让用户的体验更好又可以节省开发的资源。

可以理解为webAppNative App的合体版本。

为什么会出现Hybrid App

原因在于Native App开发成本高,开发周期长,并且需要配置IOSAndroid两个团队。而webApp开发简单,开发周期短,并且跨平台性好,但是性能不如Native App.于是,出于取长补短的原则,就有了两者的结合体:Hybrid App.

下面是这三者的具体差别:

技术选型webAppHrbrid AppNative App
开发成本
维护更新简单简单复杂
体验
安装不需要需要需要
跨平台

Hybrid App实现技术方案

  • H5+JSBridge

指通过JSBridge完成H5Native的通信,赋予H5一定的端能力。是一种基于WebView UI的解决方案。

主要的原理是,由Native通过JSBridge等方法提供统一的API,然后用Html+Css实现界面,JS来写逻辑,调用API,最终的页面在Webview中显示,这种模式下,AndroidiOSAPI一般有一致性,Hybrid App所以有跨平台效果。

  • React-Native

Facebook发现Hybrid App存在很多缺陷和不足,于是发起开源的一套新的App开发方案RN。使用JSX(React)语言写原生界面,js通过JSBridge调用原生API渲染UI交互通信。

早期Hybrid App不足之处:

以往最早的Hybrid开发,主要依赖于WebView。但是WebView是一个很重的控件,很容易产生内存问题,而且复杂的UIWebView上显示的性能不好。react-native技术抛开了WebView,利用JavaScriptCore来做桥接,将js调用转为native调用,提高了性能。

  • Weex

阿里巴巴开发团队在RN的成功案例上,重新设计出的一套开发模式,站在了巨人肩膀上并有淘宝团队项目做养料,广受关注,2016年4月正式开源,并在v2.0版本官方支持Vue.js,与RN分庭抗礼。目前该项目是Apache在管理,国内热度不是很高。

  • HBuilder+uni-app

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

uni-app引擎内部包含了html5plusNative.jsweex,由于支持小程序,国内的热度还不错,上手比较简单。

具体可以参考:uniapp.dcloud.io/history

  • Taro

react版本的Uni-app.

Taro 是由京东凹凸实验室打造的多端统一开发框架,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。

貌似对转RN这块支持性不是很好。

  • Flutter

Flutter是谷歌于2017年推出的移动端UI框架,用于快速的创建跨平台,高性能的移动应用,使用C、C ++、Dart和Skia(2D渲染引擎)构建.

对比

技术类型FlutterRNNative AppUni-APP
平台实现通过Dart虚拟机编译成机器码Virtual Dom映射到原生View,通过ART虚拟机编译成机器码通过ART虚拟机编译成机器码webview渲染和weex原生渲染双渲染引擎
绘制引擎SkiaJS V8+Skia/OpenGL ESSkia/OpenGL ESJS V8+Skia/OpenGL ES
使用语言DartReactJava/Kotlin等VUE
上手难度一般一般
社区丰富,谷歌力捧活跃,FaceBook支持庞大国内还不错

参考: ask.dcloud.net.cn/article/360…