宏海娱乐主管《25931》浅谈移动开发技术

  • 时间:
  • 浏览:1

可访问平台完整性功能(GPS、摄像头);

层厚快、性能高、可不还要实现繁杂动画及绘制,整体用户体验好;

主要缺点:

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

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

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

现在,让当你们让当你们回头来看一下,混合应用无非好多好多 我在第一步中预先实现一系列API供JavaScript调用,让JavaScript有访问系统的能力,看过这里,我相信你也可不还要自己实现一个多多多混合开发框架了。

生态;从Github上来看,目前Flutter活跃用户正在高速增长。从Stackoverflow上提问来看,Flutter社区现在由于着很庞大。Flutter的文档、资源也没能 充裕,开发过程中遇到的好多好多 有问提都可不还要在Stackoverflow或其github issue中找到答案。

技术支持;现在Google正在大力推广Flutter,Flutter的作者中好多好多 人们完整性都会来自Chromium团队,两种github上活跃度很高。一个多多多多层厚,从今年上7天 Flutter频繁的版本发布也可不还要看出Google对Flutter的投入的资源不小,好多好多 有在官方技术支持这方面,大可不须担心。

开发层厚;Flutter的热重载可帮助开发者快速地进行测试、构建UI、去掉 功能并调快地修复错误。在iOS和Android模拟器或真机上可不还要实现毫秒级热重载,两种无需丢失情况。这真的很棒,相信我,由于着你是一名原生开发者,体验了Flutter开发流后,很由于着就你会重新回去做原生了,毕竟很少人们不吐槽原生开发的编译层厚。

基于以上三点,相信读者和笔者一样,flutter未来咋样,心中自有定论。到现在为止,让当你们让当你们由于着对移动端开发技术有了一个多多多全面的了解,接下来让当你们让当你们便要进入本书的主题,你准备好好久!

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

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

总结

JavaScript开发+原生渲染的方式主要优点如下:

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

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

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

思考题:Diff操作和DOM批量更新难道不应该是浏览器的职责吗?第三方框架中去做合不大约?

第一:QT移动开发社区太小,学习资料缺陷,生态不好。

基于此四点,尽管QT是移动端开发跨平台自绘引擎的先驱,但却成为了烈士。

import wendu.dsbridge.DWebView

...

//DWebView继承自WebView,由dsBridge提供

DWebView dwebView= (DWebView) findViewById(R.id.dwebview);

//注册原生API到JsBridge

dwebView.addJavascriptObject(new JsAPI(), null);

在JavaScript中调用原生API

由于着RN和React原理相通,两种Flutter也是受React启发,好多好多 有思想也完整性都会相通的,万丈高楼平地起,让当你们让当你们有必要深入了解一下React原理。React是一个多多多响应式的Web框架,让当你们让当你们先了解一下一个多多多重要的概念:Dom树与响应式编程。

灵活、组件库易维护、UI外观保真度和一致性高;由于着UI渲染不依赖原生控件,也就不还要根据不同平台的控件单独维护一套组件库,好多好多 有代码容易维护。由于着组件库是同一套代码、同一个多多多渲染引擎,好多好多 有在不同平台,组件显示外观可不还要做到高保真和高一致性;另外,由于着不依赖原生控件,也就无需受原生布局系统的限制,一个多多多多布局系统会非常灵活。

第二:官方推广不利,支持缺陷。

var dsBridge=require("dsbridge")

//直接调用原生API getPhoneModel

var model=dsBridge.call("getPhoneModel");

//打印机型

console.log(model);

后边示例演示了JavaScript调用原生API的过程,同样的,一般来说优秀的JsBridge也支持原生调用JavaScript,dsBridge也是支持的,由于着您感兴趣,可不还要去github dsBridge项目主页查看。

快应用

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

class JSAPI{

@JavascriptInterface

public Object getPhoneModel(Object msg){

return Build.MODEL;

}

}

将原生API通过WebView注册到JsBridge中

混合开发技术点

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

第三:移动端发力较晚,市场已被其它动态化框架占领(Hybrid和RN)。

此处还要有一张插图

为JavaScript提供运行环境。

是JavaScript与原生应用之间通信的桥梁,作用和JsBridge一样,事实上,在iOS中,好多好多 有JsBridge的实现完整性都会基于 JavaScriptCore 。

而RN中将虚拟DOM映射为原生控件的过程中分两步:

总结

混合应用的优点是动态内容是H5,web技术栈,社区及资源充裕,缺点是性能不好,对于繁杂用户界面或动画,webview不堪重任。

Weex

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

JavaScriptCore 是一个多多多JavaScript解释器,它在React Native中主要一个多多多多作用:

本章总结

本章主要介绍了目前移动开发中两种生活跨平台技术,现在让当你们让当你们从框架层厚对比一下:

Hybrid技术简介

H5+原生混合开发

累似 框架主要原理好多好多 我将APP的一偏离 还要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(ios)来加载(以前若无特殊说明,让当你们让当你们用WebView来统一指代android和ios中的网页加载控件)。一个多多多多一来,H5偏离 是可不还要随时改变而无需发版,动态化需求能满足;一并,由于着h5代码只还要一次开发,就能一并在Android和iOS一个多多多平台运行,这也可不还要减小开发成本,也好多好多 我说,h5偏离 功能太少,开发成本就越小。让当你们让当你们称两种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP让当你们让当你们称之为混合应用或Hybrid APP ,由于着一个多多多应用的大多数功能完整性都会H5实现句子,让当你们让当你们称其为Web APP 。

渲染时还要JavaScript和原生之间通信,在两种场景如拖动由于着会由于着通信频繁由于着卡顿。

JavaScript为脚本语言,执行时还要JIT,执行层厚和AOT代码仍有差距。

由于着渲染依赖原生控件,不同平台的控件还要单独维护,两种当系统更新时,社区控件由于着会滞后;除此之外,其控件系统也会受到原生UI系统限制,累似 ,在Android中,手势冲突消歧规则是固定的,这在使用不同人写的控件嵌套时,手势冲突问提由于着变得非常棘手。

QT Moblie与Flutter

在本篇中,让当你们让当你们看看最后两种生活跨平台技术:自绘UI+原生。两种技术的思路是,通过在不同平台实现一个多多多统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,好多好多 有可不还要做到不同平台UI的一致性。注意,自绘引擎补救的是UI的跨平台问提,由于着涉及其它系统能力调用,依然要涉及原生开发。两种平台技术的优点如下:

React Native和Weex

本篇主要介绍一下 JavaScript开发+原生渲染的跨平台框架原理。

Flutter简介

“千呼万唤始出来”,铺垫没能 久,现在终于等到本书的主角出场了!

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

由于着DOM好多好多 我外观风格占据 变化,如颜色变化,会由于着浏览器重绘界面。

由于着DOM树的形态占据 变化,如尺寸、布局、节点隐藏等由于着,浏览器就还要回流(及重新排版布局)。

而浏览器的重绘和回流完整性都会比较昂贵的操作,由于着每一次改变都直接对DOM进行操作,这会带来性能问提,而批量操作只会触发一次DOM更新。

动态性缺陷;为了保证UI绘制性能,自绘UI系统一般都会采用AOT模式编译其发布包,好多好多 有应用发布后,并能像Hybrid和RN哪几个使用JavaScript(JIT)作为开发语言的框架那样动态下发代码。

你爱不爱我你由于着猜到Flutter就属于两种类跨平台技术,没错,Flutter正是实现一套自绘引擎,并拥有一套自己的UI布局系统。不过,自绘制引擎的思路并完整性都会哪几个新概念,Flutter并完整性都会第一个多多多尝试没能 做的,在它以前一个多多多典型的代表,即大名鼎鼎的QT。

首先在原生中实现获取手机型号的API getPhoneModel

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

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

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

缺陷:

缺陷:

现在,让当你们让当你们来和QT mobile做一个多多多对比:

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 排行榜前 1150 名,已有 27k star。而今天(2018年8月16日),由于着有35K的Star。经历了短短一年多的时间,Flutter 生态系统得以快速增长,由此可见,Flutter在开发者中受到了热烈的欢迎,其未来发展值得期待!

开发者只需关注情况转移(数据),当情况占据 变化,React框架会自动根据新的情况重新构建UI。

React框架在接收到用户情况改变通知后,会根据当前渲染树,结合最新的情况改变,通过Diff算法,计算出树中变化的偏离 ,两种只更新变化的偏离 (DOM操作),从而补救整棵树重构,提高性能。

值得注意的是,在第二步中,情况变化后React框架不须会立即去计算并渲染DOM树的变化偏离 ,相反,React会在DOM的基础上建立一个多多多抽象层,即虚拟DOM树,对数据和情况所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到真实DOM中,而完整性都会每次改变都去操作一下DOM。为哪几个并能每次改变都直接去操作DOM树?这是由于着在浏览器中每一次DOM操作完整性都会由于着引起浏览器的重绘或回流:

H5+原生(Cordova、Ionic、微信小应用系统进程)

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

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

在接下来的章节中让当你们让当你们逐个来看看这三类框架的原理及优缺点。

QT简介

Qt是一个多多多1991年由Qt Company开发的跨平台C++图形用户界面应用应用系统进程开发框架。1508年,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两种生活技术咋样、设计思想咋样,但事实上终究是败了,究其由于着,笔者认为主要有四:

技术类型 UI渲染方式 性能 开发层厚 动态化 框架代表

H5+原生 WebView渲染 一般 高 ️ Cordova、Ionic

JavaScript+原生渲染 原生控件渲染 好 高 ️ RN、Weex

自绘UI+原生 调用系统API渲染 好 Flutter高, QT低 默认不支持 QT、Flutter

上表中开发语言主要指UI的开发语言,动态化主要指是不是 支持动态下发代码和是不是 支持热更新。值得注意的是Flutter的Release包默认是使用Dart AOT模式编译的,好多好多 有不支持动态化,但Dart还有JIT或snapshot运行方式,哪几个模式完整性都会支持动态化的,后续会介绍。

示例:JavaScript调用原生API获取手机型号

下面让当你们让当你们以Android为例,实现一个多多多获取手机型号的原生API供JavaScript调用。在两种示例中将展示JavaScript调用原生API的流程,读者可不还要直观的感受一下调用流程。让当你们让当你们选则笔者在Github上开源的dsBridge作为JsBridge来进行通信。dsBridge是一个多多多支持同步调用的跨平台的JsBridge,此示例中只使用其同步调用功能。

第四:在移动开发中,C++开发和Web开发栈相比有着先天的劣势,直接结果好多好多 我QT开发层厚太低。

React Native

上文由于着提到React Native 是React 在原生移动应用平台的衍生产物,那两者主要的区别是哪几个呢?我我确实,主要的区别在于虚拟DOM映射的对象是哪几个?React中虚拟DOM最终会映射为浏览器DOM树,而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。

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

Flutter是Google发布的一个多多多用于创建跨平台、高性能移动应用的框架。Flutter和QT mobile一样,都没能 使用原生控件,相反都实现了一个多多多自绘引擎,使用自身的布局、绘制系统。没能 ,让当你们让当你们会担心,QT mobile面对的问提Flutter是不是 也一样,Flutter会无需步入QT mobile后尘,成为一个多多多多烈士?要回到两种问提,让当你们让当你们先来看看Flutter诞生过程:

响应式编程

React中提出一个多多多重要思想:情况改变则UI随之自动改变,而React框架两种生活好多好多 我响应用户情况改变的事件而执行重新构建用户界面的工作,这好多好多 我典型的响应式编程范式,下面让当你们让当你们总结一下React中响应式原理:

DOM树与控件树

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

性能高;由于着自绘引擎是直接调用系统API来绘制UI,好多好多 有性能和原生控件接近。

目前混合开发框架的典型代表有:Cordova、Ionic 和微信小应用系统进程,值得一提的是微信小应用系统进程目前是在webview中渲染的,不须原生渲染,但将来有由于着会采用原生渲染。

布局消息传递; 将虚拟DOM布局信息传递给原生;

原生根据布局信息通过对应的原生控件渲染控件树;

至此,React Native 便实现了跨平台。 相对于混合应用,由于着React Native是原生控件渲染,好多好多 有性能会比混合应用中H5好好多好多 有,一并React Native是Web开发技术栈,也只需维护一份代码,同样是跨平台框架。

跨平台技术简介

针对原生开发面临问提,让当你们让当你们一直完整性都会努力寻找好的补救方案,而时至今日,由于着有好多好多 有跨平台框架(注意,本书中所指的“跨平台”若无特殊说明,即特指Android和iOS一个多多多平台),根据其原理,主要分为三类: