移动开发技术简介

原生开发与跨平台技术

原生开发

原生应用程序是指某一个平台(比如IOS或安卓)所特有的应用,使用相应平台支持的开发工具和语言,并直接调用系统提供的SDK API。比如Android原生应用就是指使用Java或Kotlin语言直接调用Android SDK开发的应用程序;而IOS原生应用就是指通过Objective-C或Swift语言直接调用IOS SDK开发的应用程序。
原生开发有以下主要优势:

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

主要缺点:

  • 平台特定,开发成本高;不同平台必须维护不同代码,人力成本随之变大;
  • 内容固定,动态化弱,大多数情况下,有新功能更新时只能发版。

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

  • 动态化内容需求增大;当需求发生变化时,纯原生应用需要通过版本升级来更新内容,但应用上架、审核是需要周期的,这对高速变化的互联网时代来说是很难受的,所以,对应用动态化(不发版也可以更新应用内容)的需求就变得迫在眉睫。
  • 业务需求变化快,开发成本表大;由于原生开发一般都要维护Android、IOS两个开发团队,版本迭代时,无论人力成本,还是测试成本都会变大。

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

跨平台技术简介

针对原生开发面临的问题,人们一直在努力寻找好的解决方案,而时至今日,已经有很多跨平台框架(这儿所指的“跨平台”,即特指Android和IOS两个平台),根据其原理,主要分为三类:

  • H5 + 原生(Cordova、lonic、微信小程序)
  • JavaScript开发 + 原生渲染(React Native、Weex、快应用)
  • 自绘UI + 原生(QT for mobile、Flutter)

我们逐个来看下这三类框架的原理及优缺点。

1.1.2 Hybrid技术简介

H5 + 原生混合开发

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

目前混合开发框架的典型代表有:Cordova、lonic和微信小程序,值得一提的是微信小程序目前是在Webview中渲染的,并非是原生渲染,但将来有可能会采用原生渲染。

混合开发技术点

混合开发中,H5代码运行在Webview中,为Webview实质上就是一个浏览器内核,其JavaScript依然运行在一个权限受限的沙箱中,所以对于大多数系统能力都没有访问权限,如无法访问文件系统,不能使用蓝牙等。所以,对于H5不能实现的功能,都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统功能的API,然后暴露给WebView以供JavaScript调用,这样一来,WebView就称为了JavaScript与原生API之间通信的桥梁,主要负责JavaScript与原生之间传递调用消息,而消息的传递必须遵守一个标准协议,它规定了消息的格式与含义,我们把依赖于WebView的用于JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge,简称JSBridge,它也是混合开发框架的核心。

混合应用的有点是动态内容是H5,web技术栈,社区及资源丰富,缺点是性能不好,对于复杂用户界面或动画,WebView不堪重任。

1.1.3 React Native、Weex及快应用

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

DOM树与控件树

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口,一种独立于平台和语言的方式访问和修改一个文档的内容和解构。换句话说,这是表示和处理一个HTML或XML文档的标准接口。简单来说,DOM就是文档树,与用户界面控件树对应,在前端开发中通常指HTML对应的渲染树,但广义的DOM也可以指Android中的XML布局文件对应的控件树,而术语DOM操作就是指直接来操作渲染树(或控件树),因此,可以看到其实DOM树和控件树是等价的概念,只不过前者常用于Web开发中,而后者常用于原生开发中。

响应式编程

技术类型

UI渲染方式

性能

开发效率

动态化

框架代表

H5 + 原生

WebView渲染

一般


支持

Cordova、lonic

JavaScript + 原生渲染

原生控件渲染



支持

RN、Weex

自绘UI + 原生

调用系统API渲染


Flutter高、QT低

默认不支持

QT、Flutter