Flutter开发（0）—— 认识各种跨平台框架

移动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