文章目录

  • 原生开发
  • 跨平台技术
  • Hybrid 技术
  • JavaScript开发 与 原生渲染
    • React Native
    • Weex
    • 快应用
    • 总结
  • 自绘UI 与 原生
    • QT
    • Flutter
    • 总结

原生开发

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

优点：

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

缺点：

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

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

跨平台技术

根据跨平台原理，主要分为三类：

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

Hybrid 技术

主要原理就是将 APP 的一部分需要动态变动的内容通过 H5 来实现，通过原生的网页加载控件WebView (Android)或 WKWebView（iOS）来加载（以后若无特殊说明，我们用WebView来统一指代android和iOS中的网页加载控件）。称这种方式为混合开发，采用混合模式开发的APP称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP 。

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

JavaScript开发 与 原生渲染

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树与响应式编程。

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

响应式编程
React中提出一个重要思想：状态改变则UI随之自动改变，而React框架本身就是响应用户状态改变的事件而执行重新构建用户界面的工作，这就是典型的响应式编程范式，下面我们总结一下React中响应式原理：

  • 开发者只需关注状态转移（数据），当状态发生变化，React框架会自动根据新的状态重新构建UI。
  • React框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过Diff算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），从而避免整棵树重构，提高性能。

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

  • 如果DOM只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
  • 如果DOM树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。

React Native

上文已经提到React Native 是React 在原生移动应用平台的衍生产物，那两者主要的区别是什么呢？其实，主要的区别在于虚拟DOM映射的对象是什么？React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。

JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：

  1. 为JavaScript提供运行环境。
  2. 是JavaScript与原生应用之间通信的桥梁，作用和JsBridge一样，事实上，在iOS中，很多JsBridge的实现都是基于 JavaScriptCore 。

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

  1. 布局消息传递； 将虚拟DOM布局信息传递给原生；
  2. 原生根据布局信息通过对应的原生控件渲染控件树；

至此，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相比主要有两点不同：

  1. 快应用自身不支持Vue或React语法，其采用原生JavaScript开发，其开发框架和微信小程序很像，值得一提的是小程序目前已经可以使用Vue语法开发（mpvue），从原理上来讲，Vue的语法也可以移植到快应用上。
  2. React Native和Weex的渲染/排版引擎是集成到框架中的，每一个APP都需要打包一份，安装包体积较大；而快应用渲染/排版引擎是集成到ROM中的，应用中无需打包，安装包体积小，正因如此，快应用才能在保证性能的同时做到快速分发。

总结

优点：

  1. 采用Web开发技术栈，社区庞大、上手快、开发成本相对较低。
  2. 原生渲染，性能相比H5提高很多。
  3. 动态化较好，支持热更新。

缺点：

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

自绘UI 与 原生

通过在不同平台实现一个统一接口的渲染引擎来绘制UI，而不依赖系统原生控件，所以可以做到不同平台UI的一致性。注意，自绘引擎解决的是UI的跨平台问题，如果涉及其它系统能力调用，依然要涉及原生开发。

QT

Qt是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。

Flutter

Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter和QT mobile一样，都没有使用原生控件，相反都实现了一个自绘引擎，使用自身的布局、绘制系统。

总结

优点：

  • 性能高；由于自绘引擎是直接调用系统API来绘制UI，所以性能和原生控件接近。
  • 灵活、组件库易维护、UI外观保真度和一致性高；由于UI渲染不依赖原生控件，也就不需要根据不同平台的控件单独维护一套组件库，所以代码容易维护。由于组件库是同一套代码、同一个渲染引擎，所以在不同平台，组件显示外观可以做到高保真和高一致性；另外，由于不依赖原生控件，也就不会受原生布局系统的限制，这样布局系统会非常灵活。

缺点：

  • 动态性不足；为了保证UI绘制性能，自绘UI系统一般都会采用AOT模式编译其发布包，所以应用发布后，不能像Hybrid和RN那些使用JavaScript（JIT）作为开发语言的框架那样动态下发代码。
  • 开发效率低：QT使用C++作为其开发语言，而编程效率是直接会影响APP开发效率的，C++作为一门静态语言，在UI开发方面灵活性不及JavaScript这样的动态语言，另外，C++需要开发者手动去管理内存分配，没有JavaScript及Java中垃圾回收（GC）的机制。

移动开发技术的进化历程（原生开发与跨平台技术）相关推荐

  1. php 原生开发,四个优秀php原生开发实战视频教程推荐（必学）

    使用原生php语法开发项目,,是每一位php程序员必备的基本功,掌握原生开发的技巧,才能深刻领会使用框架开发带来的乐趣!以下为PHP中文网为同学们推荐的四个PHP原生开发教程,都是精选原创!欢迎学习! ...

  2. java开发app的缺点_App原生开发的优缺点有哪些

    原标题:App原生开发的优缺点有哪些 什么是app的原生开发,简单是说app原生开发就是在安卓.ios等移动平台上利用官方提供的开发语言.开发类库.开发工具进行移动app的开发,比如安卓和利用java ...

  3. 阿里巴巴成立云原生技术委员会，云原生升级为阿里技术新战略

    9 月 18 日,2020 杭州云栖大会期间,阿里巴巴正式成立云原生技术委员会(以下简称委员会),阿里巴巴高级研究员蒋江伟担任委员会负责人,达摩院数据库首席科学家李飞飞.阿里云计算平台高级研究员贾扬清 ...

  4. AndroidStudio_android开发在线文档_在线API_蓝牙开发在线文档---Android原生开发工作笔记243

    http://www.android-doc.com/guide/topics/connectivity/bluetooth.html http://www.android-doc.com/refer ...

  5. AndroidStudio安卓原生开发_UI控件_SeekBar_ProgressBar_DataPicker---Android原生开发工作笔记99

    我们再去看这个seekbar 去写一下 看看效果

  6. AndroidStudio安卓原生开发_UI控件_ImageView_CheckBox_RadioButton---Android原生开发工作笔记98

    ImageView是个图片控件,但实际上,任何drawable对象都可以使用imageView来显示. scaleType的详细: 这些可以了解,这样可以方便的设置图片的位置

  7. AndroidStudio安卓原生开发_UI控件_TextView_Button_EditText---Android原生开发工作笔记97

    这个Textview控件是button的父类,EditText也是这个要知道 2.可以看到上面的继承关系图

  8. AndroidStudio_开发工具调试入门---Android原生开发工作笔记70

    我们看看点击上面这个按钮,可以进行编译.点击以后就会自动编译的,他会指定gradle脚本进行编译 然后上面这个地方,是指定哪个模块做为启动的引导模块,也就是启动的时候启动哪个模块. 指定我们启动的时候 ...

  9. 阿里巴巴成立云原生技术委员会，云原生升级为阿里技术新战略！

    9 月 18 日,2020 云栖大会期间,阿里巴巴正式成立云原生技术委员会(以下简称委员会),阿里巴巴高级研究员蒋江伟担任委员会负责人,达摩院数据库首席科学家李飞飞.阿里云计算平台高级研究员贾扬清.阿 ...

  10. 在react里写原生js_小程序原生开发与第三方框架选择

    最近正在更新<微信小程序入门与实践>一书的第二版.书中有一章节谈到了"多样化的小程序开发",摘取并加以整理分享给各位开发者.我一向不推荐也不提倡公众号阅读学习编程,文章 ...

最新文章

  1. 推荐一套开源中文课：自然语言处理（NLP）专题
  2. Iso时间转java instant,在java.util.Date和java.time.Instant之间转换古代日期时的差异
  3. elasticsearch源码分析之search模块(server端)
  4. kodi 更改服务器文件,云服务器安装kodi
  5. iOS应用横竖屏切换
  6. VMware和NVIDIA推出新一代混合云架构
  7. composer 设置版本号_Composer依赖管理 – PHP的利器
  8. asp.net gridview 模板列 弹出窗口编辑_如何使用极速PDF编辑器的注释工具？
  9. VS2015 property manager
  10. 把txt格式数据制作成xml数据
  11. Hadoop2.2.0 + HBase0.96 伪分布式安装
  12. mysql+enable+sql+log_MySQL -- redolog + binlog
  13. 跨浏览器共享数据_不懂浏览器安全，被老板邀请爬山？
  14. 电视盒子装android,智能电视能不能装安卓应用市场，怎么安装
  15. Python身体质量指数BMI
  16. 项目遇到的难点、印象深刻点总结
  17. 【开发工具】【perf】性能分析工具perf的编译和使用说明
  18. VB对IE浏览器完全控制
  19. 软件测试学习资料大全
  20. 企业私有网络构建与运维

热门文章

  1. 使用Scrapy模拟登陆人人网
  2. python断言assert
  3. 使用IK中文分词器做敏感词过滤
  4. 查看计算机上硬盘的大小,怎么看硬盘的缓存信息？电脑硬盘缓存大小查看方法图解...
  5. 获取字符串中 图片路径
  6. 记DeeCamp 2019夏面试
  7. html5中按钮点击事件,javascript按钮点击事件
  8. php在线拍照裁切,基于cropper.js封装vue实现在线图片裁剪组件的功能
  9. bootstrap treeview 多级联动check/uncheck
  10. 【学习笔记—eat_pytorch_in_20_days】结构化数据建模流程范例