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

  • 时间:
  • 浏览:0
  • 来源:大发时时彩网页计划—大发快三彩票

为JavaScript提供运行环境。

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

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

var dsBridge=require("dsbridge")

//直接调用原生API getPhoneModel

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

//打印机型

console.log(model);

上端示例演示了JavaScript调用原生API的过程,同样的,一般来说优秀的JsBridge也支持原生调用JavaScript,dsBridge也是支持的,可能您感兴趣,都都可否去github dsBridge项目主页查看。

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

Flutter是Google发布的一个 用于创建跨平台、高性能移动应用的框架。Flutter和QT mobile一样,都没有使用原生控件,相反都实现了一个 自绘引擎,使用自身的布局、绘制系统。没有,我门都歌词 儿会担心,QT mobile面对的疑问Flutter算不算也一样,Flutter会不不步入QT mobile后尘,成为原来烈士?要回到這個疑问,我门都歌词 儿先来看看Flutter诞生过程:

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

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开发中,而后者常用于原生开发中。

React Native和Weex

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

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在开发者中受到了热烈的欢迎,其未来发展值得期待!

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

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

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

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

渲染时前要JavaScript和原生之间通信,在其他场景如拖动可能会可能通信频繁因为 卡顿。

JavaScript为脚本语言,执行时前要JIT,执行下行速率 和AOT代码仍有差距。

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

QT Moblie与Flutter

在本篇中,我门都歌词 儿看看最后有有一种跨平台技术:自绘UI+原生。這個技术的思路是,通过在不同平台实现一个 统一接口的渲染引擎来绘制UI,而不依赖系统原生控件,过多过多都都可否做到不同平台UI的一致性。注意,自绘引擎解决的是UI的跨平台疑问,可能涉及其它系统能力调用,依然要涉及原生开发。這個平台技术的优点如下:

响应式编程

React中提出一个 重要思想:请况改变则UI随之自动改变,而React框架有有一种也不响应用户请况改变的事件而执行重新构建用户界面的工作,这也不典型的响应式编程范式,下面我门都歌词 儿总结一下React中响应式原理:

import wendu.dsbridge.DWebView

...

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

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

//注册原生API到JsBridge

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

在JavaScript中调用原生API

Hybrid技术简介

H5+原生混合开发

之类框架主要原理也不将APP的一部分前要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(ios)来加载(前一天若无特殊说明,我门都歌词 儿用WebView来统一指代android和ios中的网页加载控件)。原来一来,H5部分是都都可否随时改变而不不发版,动态化需求能满足;并肩,可能h5代码只前要一次开发,就能并肩在Android和iOS一个 平台运行,这也都都可否减小开发成本,也也不说,h5部分功能过多,开发成本就越小。我门都歌词 儿称這個h5+原生的开发模式为混合开发 ,采用混合模式开发的APP我门都歌词 儿称之为混合应用或Hybrid APP ,可能一个 应用的大多数功能一定会H5实现的话,我门都歌词 儿称其为Web APP 。

总结

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

跨平台技术简介

针对原生开发面临疑问,我门都歌词 儿总是 一定会努力寻找好的解决方案,而时至今日,可能有过多过多跨平台框架(注意,本书中所指的“跨平台”若无特殊说明,即特指Android和iOS一个 平台),根据其原理,主要分为三类:

class JSAPI{

@JavascriptInterface

public Object getPhoneModel(Object msg){

return Build.MODEL;

}

}

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

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

动态性过高 ;为了保证UI绘制性能,自绘UI系统一般一定会采用AOT模式编译其发布包,过多过多应用发布后,都都可否了像Hybrid和RN哪些地方地方使用JavaScript(JIT)作为开发语言的框架那样动态埋点代码。

跟我说你可能猜到Flutter就属于這個类跨平台技术,没错,Flutter正是实现一套自绘引擎,并拥有一套本人的UI布局系统。不过,自绘制引擎的思路并一定会哪些地方新概念,Flutter并一定会第一个 尝试没有做的,在它前一天还有一个 典型的代表,即大名鼎鼎的QT。

混合开发技术点

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

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

内容固定,动态化弱,大多数请况下,有新功能更新时都都可否了发版;

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

此处前要有一张插图

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

下面我门都歌词 儿以Android为例,实现一个 获取手机型号的原生API供JavaScript调用。在這個示例中将展示JavaScript调用原生API的流程,读者都都可否直观的感受一下调用流程。我门都歌词 儿确定 笔者在Github上开源的dsBridge作为JsBridge来进行通信。dsBridge是一个 支持同步调用的跨平台的JsBridge,此示例中只使用其同步调用功能。

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

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

总结一下,纯原生开发主要面临动态化和开发成本一个 疑问,而针对這個个 疑问,诞生了其他跨平台的动态化框架。

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

H5+原生(Cordova、Ionic、微信小守护线程池池)

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

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

在接下来的章节中我门都歌词 儿逐个来看看这三类框架的原理及优缺点。

本章总结

本章主要介绍了目前移动开发中有有一种跨平台技术,现在我门都歌词 儿从框架下行速率 对比一下:

第四:在移动开发中,C++开发和Web开发栈相比有着先天的劣势,直接结果也不QT开发下行速率 太低。

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

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

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

过高 :

快应用

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

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

React框架在接收到用户请况改变通知后,会根据当前渲染树,结合最新的请况改变,通过Diff算法,计算出树中变化的部分,否则只更新变化的部分(DOM操作),从而解决整棵树重构,提高性能。

值得注意的是,在第二步中,请况变化后React框架有有一种会立即去计算并渲染DOM树的变化部分,相反,React会在DOM的基础上建立一个 抽象层,即虚拟DOM树,对数据和请况所做的任何改动,一定会被自动且高效的同步到虚拟DOM,最后再批量同步到真实DOM中,而一定会每次改变都去操作一下DOM。为哪些地方都都可否了每次改变都直接去操作DOM树?这是可能在浏览器中每一次DOM操作一定会可能引起浏览器的重绘或回流:

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有有一种技术怎么、设计思想怎么,但事实上终究是败了,究其因为 ,笔者认为主要有四:

目前混合开发框架的典型代表有:Cordova、Ionic 和微信小守护线程池池,值得一提的是微信小守护线程池池目前是在webview中渲染的,有有一种原生渲染,但将来有可能会采用原生渲染。

可能RN和React原理相通,否则Flutter也是受React启发,过多过多思想也一定会相通的,万丈高楼平地起,我门都歌词 儿有必要深入了解一下React原理。React是一个 响应式的Web框架,我门都歌词 儿先了解一下一个 重要的概念:Dom树与响应式编程。

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

React Native和Weex的渲染/排版引擎是集成到框架中的,每一个 APP都前要打包一份,安装包体积较大;而快应用渲染/排版引擎是集成到ROM中的,应用中不不打包,安装包体积小,正因没有,快应用都都可否在保证性能的并肩做到快速埋点。

总结

JavaScript开发+原生渲染的土辦法 主要优点如下:

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

第二:官方推广不利,支持过高 。

可能DOM也不外观风格所处变化,如颜色变化,会因为 浏览器重绘界面。

可能DOM树的行态所处变化,如尺寸、布局、节点隐藏等因为 ,浏览器就前要回流(及重新排版布局)。

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

现在,我门都歌词 儿回头来看一下,混合应用无非也不在第一步中预先实现一系列API供JavaScript调用,让JavaScript有访问系统的能力,看得人这里,我相信你也都都可否本人实现一个 混合开发框架了。

现在,我门都歌词 儿来和QT mobile做一个 对比:

可访问平台删改功能(GPS、摄像头);

下行速率 快、性能高、都都可否实现僵化 动画及绘制,整体用户体验好;

主要缺点:

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

技术支持;现在Google正在大力推广Flutter,Flutter的作者中过多过多人一定会来自Chromium团队,否则github上活跃度很高。原来下行速率 ,从今年上三天Flutter频繁的版本发布也都都可否看出Google对Flutter的投入的资源不小,过多过多在官方技术支持这方面,大可有有一种担心。

开发下行速率 ;Flutter的热重载可帮助开发者快速地进行测试、构建UI、再加功能并变慢地修复错误。在iOS和Android模拟器或真机上都都可否实现毫秒级热重载,否则不不丢失请况。这真的很棒,相信我,可能你是一名原生开发者,体验了Flutter开发流后,很可能就要我重新回去做原生了,毕竟很少一群人不吐槽原生开发的编译下行速率 。

基于以上三点,相信读者和笔者一样,flutter未来怎么,心中自有定论。到现在为止,我门都歌词 儿可能对移动端开发技术有了一个 全面的了解,接下来我门都歌词 儿便要进入本书的主题,你准备好好久!

Flutter简介

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

技术类型 UI渲染土辦法 性能 开发下行速率 动态化 框架代表

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

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

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

上表中开发语言主要指UI的开发语言,动态化主要指算不算支持动态埋点代码和算不算支持热更新。值得注意的是Flutter的Release包默认是使用Dart AOT模式编译的,过多过多不支持动态化,但Dart还有JIT或snapshot运行土辦法 ,哪些地方地方模式一定会支持动态化的,后续会介绍。

过高 :

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

React Native

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

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

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

Weex

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