前端 - App类型
参考博客：H5 手机 App 开发入门：概念篇、H5 手机 App 开发入门：技术篇
手机App类型分为以下三种
- 原生应用（native application，简称 native App）
- Web 应用（web application，简称 Web App）
- 混合应用（hybrid application，简称 hybrid App）
原生应用
需要在应用市场下载
优点
- 较好的性能和体验
- 可以使用系统的所有硬件和软件 API，比如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力
存在问题
- 组建的团队大
- 原生 App 使用底层操作系统的语言，都是很重的编译型语言，开发和调试成本相对较高，时间周期长
- 原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本
Web应用
Web App 是使用网页做的应用程序，必须在浏览器中使用，比如，你在浏览器中收发邮件，就是在使用 Web App
优点
- 不需要下载安装，打开浏览器就能使用，而且总是使用最新版本
- 对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布
存在问题
- 浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件
- 网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面
渐进式 Web App（Progressive Web App），PWA
Chrome 团队开发的新技术，解决Web App存在的以下问题
- 不能从手机的首屏直接进入
- 缺乏手机状态栏和锁屏时的通知推送能力
- 不支持脱机访问（即断网也能使用）
PWA可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入；并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。但是，PWA 需要浏览器访问一次网站，才能在首屏生成图标，并且目前 iOS 系统的支持还不够理想，所以还只是一项探索性质的技术，迄今为止缺乏足够的成功案例
混合应用 Hybrid App
原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。 可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。微信小程序也属于混合应用
混合 App 的原生外壳称为"容器"，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即 WebView 控件），也可以自己内置一个浏览器内核。
结构上，混合 App 从上到下分成三层：
- HTML5 网页层
- 网页引擎层（本质上是一个隔离的浏览器实例）
- 容器层
API Bridge
也称JSbridge，网页层通过 JSbridge 调用原生API。混合 App 里面的网页不同于普通网页，可以调用底层系统所有的 API，奥秘就在于外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。所谓 API Bridge 就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的 API，然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge（如微信的JS-SDK）
技术栈
- PhoneGap
- Cordova
- Ionic
混合App优点
- 跨平台：Web 技术是跨平台的，开发者只写一次页面，就能支持多个平台。也就是说，混合 App 只需要一个团队就够了，开发成本较低
- 灵活性：混合 App 的灵活性大，很容易集成多种功能。一方面，混合 App 很容易加载外部的 H5 页面，实现 App 的插件结构；另一方面，Web 页面可以方便地调用外部的 Web 服务
- 开发方便：Web 页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了
混合App存在问题
由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生 App，而且由于 WebView 不是全功能浏览器，可能比 Web App 都要慢一些
跨平台 App 技术栈
跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App，所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。
技术栈
- React Native: 使用 JavaScipt 语言编写页面
- Xamarin：使用 C# 语言编写页面
- Flutter：使用 Dart 语言编写页面
上面的混合技术栈使用 HTML 语言编写页面，再用 WebView 控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，但是原理完全不同。跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。
React Native原理
注意，React Native 虽然也使用 JavaScript 语言，并且写法看上去像 Web 页面，但其实所有控件都是自己定义的，编译时再一一翻译为对应的原生控件。举例来说，React Native 的文本渲染控件是<Text>，翻译成 iOS 控件为UIView，翻译成安卓控件为TextView
React Native 的问题
React Native 的想法虽然很美好，但是实际开发中出现了各种各样的问题。最主要的一个问题是， UI 抽象层翻译出来的 iOS 和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常，另一个会出现各种奇怪的小毛病。如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。