3.6 移动App开发
3.6.1 Native App
Native App（原生App）开发模式是指使用操作系统本地支持的语言进行开发，直接对接本地操作系统。Android系统开发基于Java语言，底层调用Android的API，iOS系统开发基于Objective-C或者Swift语言，底层调用iOS提供的API。
优点：
■ 直接依托于操作系统，交互性最强，性能最好，体验最优。
■ 直接调用本地资源接口，功能最为强大。
■ 经过应用商店审核把关，安全性较高。
缺点：
■ 开发与维护成本高，无法跨平台，不同平台Android和iOS上都要各自独立开发维护。
■ 版本更新烦琐不及时。Android中可以选择直接下载整个APK进行更新，但是也会有更新提示。iOS中，必须通过AppStore更新并审核。
■ 原生应用内容，不支持搜索引擎。
3.6.2 Hybrid App
Hybrid App（混合开发）模式是指使用JS等网页语言开发实现出类似原生效果的系统，开发框架中混合了业务领域语言（DSL）与原生语言。混合模式的App也要通过应用商店分发给用户安装。Hybrid App兼具了Native App功能体验好与Web App使用HTML5跨平台开发低成本的优势。
优点：
■ 开发与维护成本较低。Hybrid模式下，由原生语言提供统一的API给JS调用，实际的主要逻辑由H5来完成，只需要一套代码，多端适用，可以有效利用Web开发资源。
■ 功能更加完善，性能和体验比Web网站好。可以调用原生API实现原生App的功能，另外性能也更接近原生App。
缺点：
■ 整体处于原生开发与H5 Web站之间，相比原生功能体验和性能仍有差距。
■ 开发框架中混合了DSL与原生语言，架构较复杂，具有一定的侵入性。
混合模式开发可以分为四类模式。
（1）原生为主内嵌网页的模式
原生语言作为架构基础，实现页面框架、首页、设备调用等功能，而H5页面实现主要业务。交互强、性能要求高的界面用原生开发，业务变化较频繁的界面用H5开发。在人员配备上需要最少的原生开发人员，大量人员进行H5开发。这种模式因为侵入性较小所以系统最为稳定，可根据情况选择使用原生还是使用网页开发，所以较为灵活，同时此种模式可以复用前端开发人员，是主流的开发模式。
（2）JavaScript桥接与WebView渲染模式
如图3-10所示，PhoneGap、Cordova、Ionic等平台基于WebView进行UI渲染，使用JaveScript桥接原生服务，WebView是一个浏览器内核。在开发时使用Web方式处理实际的逻辑，UI通过内嵌WebView浏览器来显示HTML代码。同时为获取原生能力，通过JavaScriptCore桥接到原生系统，获取服务。
图3-10 JavaScript桥接与WebView渲染模式
（3）完全JavaScript桥接模式
ReactNative与Week等平台舍弃使用WebView，使用JavaScriptCore调用系统UI控件和系统服务，UI最终会渲染成原生的控件。如图3-11所示。
图3-11 完全JavaScript桥接模式
ReactNative与Week在前端分别采用React和Vue作为DSL，这两种DSL都会生成Virtual DOM。React和Vue中虚拟DOM最终会映射为浏览器DOM树，而ReactNative与Week中的虚拟DOM会通过JavaScriptCore映射为原生控件树。JavaScriptCore是一个JavaScript解释器，为JavaScript提供运行环境，也是JavaScript与原生服务之间通信的桥梁，UI显示也要通过这个桥梁调用原生OEM widgets。通常情况下，访问widgets的频率非常高，尤其是在动画与滑动操作场景，通过JS桥接可能会导致性能问题。
（4）原生编译模式
Google出品的Flutter不使用原生的OEM Widgets（或DOM WebViews），而是使用自己的Engine来绘制Widgets，Flutter Engine直接对接系统层的画布和事件，定制自己的Widget，如图3-12所示。
图3-12 原生编译模式
Flutter使用Dart语言开发，Dart可以被编译（AOT，预先编译）成不同平台的本地代码，让Flutter可以直接和平台通信而不需要一个中间的桥接过程，从而提高了性能。