移动App分类
- Web apps：指通过网络浏览器通过网络（如Internet）访问的应用程序。
- Progressive web apps (WPA)：指那些使用指定技术和标准模式来开发的web应用，这将同时赋予它们web应用和原生应用的特性。
- Native apps：以特定编程语言针对特定设备平台（iOS或Android）构建的软件应用程序。如Android是用Java/Kotlin编写的，iOS是用OC/Swift编写的。
- Hybrid apps：即Web apps和Native apps的结合，故称混合App。
Web apps
Web应用程序与网站有何不同？
差异是主观的，但是大多数人都同意，网站通常仅是信息性的，而Web应用程序提供附加的功能和交互性.
例如，维基百科是一个网站，它提供信息；Facebook是一个更具交互性的网络应用程序。
Progressive web apps
直到最近，Web应用程序还缺少本机应用程序的功能，例如发送推送通知，脱机工作以及在主屏幕上加载的功能。互联网主要由静态网页组成。
但是，浏览器和Web技术已得到改进-Web应用程序现在可以利用所有这些功能。
利用这些功能的应用程序称为渐进式Web应用程序（PWA）。
Native apps
与主要使用Javascript编写的Web应用程序不同，原生应用程序是使用为其构建平台所接受的语言编写的应用程序。
例如，使用Swift或Objective-C编写原生iOS应用程序，使用Java或Kotlin编写原生Android应用程序。
苹果和谷歌为应用程序开发人员提供了他们自己的开发工具，界面元素和标准化的SDK——Xcode和Android Studio。
Hybrid apps
混合应用程序使用混合框架将web网站嵌入本机应用程序中。
这允许使用Web技术进行开发（并可能直接从现有的移动网站复制代码），同时还保留了本机应用程序的某些优势（例如，直接访问设备硬件，脱机操作，应用程序商店可见性）。
混合应用程序框架包括 Apache Cordova、Electron、Flutter、Haxe、React Native 、Xamarin等。
各种跨平台框架
我们将讨论5个Hybrid apps开发平台：Flutter、React Native、NativeScript、Xamarin及Ionic。
本机和跨平台之间的区别
- 本机应用程序使用平台的技术/语言，即iOS的Objective C或Swift，以及Android的Java或Kotlin。由于本机应用程序充分利用了基础平台，因此它们可提供最佳性能和用户体验。
- 跨平台应用程序使用不同的语言（不同于OS语言）编写，并在运行时呈现本机应用程序体验。
跨平台应用程序的优点是可以使用单个代码库进行开发，从而节省了大量时间，精力和成本。您可以利用某些最受欢迎的编码语言，而无需学习Swift，Objective C，Java或Kotlin。与本机应用程序相比，这些应用程序在性能上有些欠缺，但是开发的简便性大大超过了性能上的差异。
两种跨平台框架方法，即“编译为本机”和“ Webview包装器”。
编译为本机
该应用程序是用单个代码库开发的。然后，框架将代码库编译为本地iOS或Android。
在目标平台中，仅代码的UI组件会转换为等效的本机UI组件。
| 编译为本机平台 | 编程语言 | 维护者 |
|---|---|---|
| Flutter | Dart (similar to JavaScript, custom language by Google) | Google (open source) |
| React Native | JavaScript | Facebook (open source) |
| NativeScript | TypeScript | Progress (open source) |
| Xamarin | C# (Dot Net) | Microsoft (open source) |
Webview包装器
应用程序代码被包装在Web视图中，并且在没有浏览器栏的情况下显示为审阅“本机”应用程序。因此，与“编译为本机”不同，不进行任何代码转换。
应用程序检测设备正在运行的操作系统，并且在浏览器中呈现应用程序时，UI代码使用CSS，Sass等模仿底层操作系统的UI外观。
而且，“ Webview”框架可以访问的设备硬件功能要少得多。但是Ionic使用Cordova桥和电容器包来利用本机设备功能。
| Webview包装平台 | 编程语言 | 维护者 |
|---|---|---|
| Ionic | JavaScript/HTML/CSS | Ionic (open source) |
| Apache Cordova | JavaScript/HTML/CSS | Apache (open source) |
| PhoneGap | JavaScript/HTML/CSS | Adobe (PhoneGap is Adobe’s commercial version of Cordova) |
各平台GitHub stars
截止2021.03.10
| Flutter | React Native | Ionic | NativeScript | Xamarin | |
|---|---|---|---|---|---|
| Stars | 116k | 93.8k | 43.2k | 19.8k | 2k |
结语
生命有限，接下来我们只挑选Flutter和React Native这两个跨平台框架进行讨论。
见开篇占位图。
引用
Native Apps, Web Apps or Hybrid Apps? What’s the Difference?
React Native vs Flutter vs Ionic vs Xamarin vs NativeScript
Web application
