SwiftUI vs Flutter， 跨平台谁是王者？

点击上方“ 开发者技术前线 ”，选择“星标”

每天 14.00 在看 | 真爱

作者：codemagic |  来源：开发者技术前线 | 翻译：可可

原文： https://blog.codemagic.io/flutter-vs-swift/

在这篇文章中，我将对用Swift编写的Flutter和Native iOS APP进行并排比较。本次 构建了一个相同的应用程序进行比较，并开始做性能测评，哪个平台更适合你的APP 用 Swift 还是Flutter？

Swift vs Flutter

随着 Swift 编程语言 的推出，原生 Native  iOS应用程序开发变得更加有趣 。 Swift是一种新的，快速且类型安全的编程语言，但它仍在不断发展，新功能正在开发中。 为了使用本机 工具 开发iOS应用程序，我们必须使用Apple提供的开发人员工具和框架。 Apple提供了很好的 文档 来iOS开发。

Flutter 是一款来自Google的开源，跨平台的移动SDK，可用于从相同的源代码构建iOS和Android App。 Flutter使用 Dart 编程语言开发iOS和Android应用程序，并提供了很好的 文档 。 Flutter类似于React Native，但完全支持本机功能。 看看我们对 Flutter vs React Native的 详细比较 。

相同的iOS APP 进行比较

每个iOS应用程序都不同，可能具有内部使用的独特功能，技术和框架。 因此，没有必要创建一个复杂的应用程序进行比较。 但是，使用这两种技术构建相同的应用程序非常重要，这样我们才能证明我们的比较点是有效的。 在这篇文章中，我将创建一个应用程序，其中有一个名为 “Press Me” 的按钮，按下该按钮后，它 会向控制台 输出 “按下按钮” 消息 。

主要比较点如下：

• 入门文档

• 编译时间

• 重装

• 剖析

• 无障碍

• CI

• 包大小

现在我们已经定义了比较点， 我将使用Swift在Flutter和原生iOS应用程序中并行开发应用程序。

入门文档

可以使用Swift开发iOS应用程序，使用Dart编程语言开发Flutter应用程序。 我们需要为这两个应用程序设置不同的开发环境。

原生iOS（Swift）

在使用本机工具开发iOS应用程序时，我们需要使用 Xcode 作为IDE。 用于iOS开发的基本开发工具包包含在Xcode本身中。你 只需要安装Xcode的macOS机器。 一旦在macOS上安装了Xcode，我们就可以通过选择 File> New> Project> iOS> Single View App 在Xcode中创建一个新的iOS项目 。 然后我们可以命名这个应用程序并选择 Swift 作为语言。

一旦我们提供了详细信息，Xcode将创建iOS模板代码，我们就可以开始开发我们的iOS应用程序了。 这篇文章不是针对使用Xcode进行iOS开发的，但你可以按照这些 教程 获取更多信息。 对于我们的示例应用程序，我们只需从故事板创建一个按钮并链接到 ViewController 。 在viewController.swift中，我们需要添加以下代码。

 @IBOutlet var pressmeButton: UIButton!
    @IBAction func pressMe(_ sender: Any) {
        print("button pressed")
    }

一旦应用程序在模拟器中构建，我们就会看到按下我按钮，按下按钮后，你将在控制台中看到“按下按钮”消息。

在这个阶段，我们的原生iOS应用程序已准备好进行比较。

Flutter iOS

为了开发适用于iOS的Flutter应用程序，我们将使用Xcode +安装的Flutter二进制文件，尽管你也可以使用 Android Studio 或 IntelliJ IDEA 或任何其他文本编辑器来开发Flutter应用程序。 Flutter的 macOS  入门指南 解释了iOS开发所需的所有设置。你 可以通过运行`  flutter  doctor`命令 来检查所有要求 。 设置完成后，可以运行以下命令来创建新的Flutter应用程序，让我们调用应用程序 native-compare 。

$ flutter create native_compare

$ cd app_name 

此命令将生成Flutter项目的框架。 我们可以使用 lib / main.dart文件中 的Flutter  Raised Button 小部件 来实现该按钮 。

body: Center(
        child: RaisedButton(
          color: Colors.blue,
          child: Text('Press Me'),
          onPressed: (){
              print('button clicked');
          }
        ),
)

完整的源文件可 在此处获得 。

有一次，我们实现了按钮，我们可以使用命令运行应用程序

$ flutter run

你需要打开模拟器才能看到在模拟器中运行的应用程序。

在这个阶段，我们的Flutter iOS应用程序已准备好进行比较。

分析：入门简易度

在将原生iOS应用程序开发和iOS应用程序开发与Flutter进行比较时，本机iOS开发的上手似乎不那么痛苦，并且涉及的配置也较少。

它只需要Xcode和macOS机器即可开始使用。 在线学习Swift和iOS开发有很多资源和书籍。 Flutter需要Xcode +额外的Flutter工具才能开始开发iOS APP。 由于Flutter仍然是市场上的新产品，因此与原生iOS  APP 开发相比，可用的开发资源相对较少。

构建时间

现在我们已经构建了一个用于比较的应用程序，让我们深入了解每个应用程序并测量本机和Flutter应用程序的构建时间。 我们将 通过删除所有派生数据和 增量构建 来比较 干净 构建 。

清理本机iOS（Swift）应用程序的构建

使用Xcode或 xcodebuild 命令行工具 可以轻松测量本机iOS应用程序的构建时间 。 在Xcode中，我们可以通过运行以下命令来启用构建时序摘要。

$ defaults write com.apple.dt.Xcode ShowBuildOperationDuration -bool YES

我们还将删除 派生数据 或 清理构建文件夹 以测量干净构建的构建时间。 在Xcode中，我们可以通过选择 Product> Clean Build Folder 来删除派生数据 。 一旦我们 从Xcode的Product菜单 运行 Build 命令，它将在Xcode中显示构建时间。

在Xcode中清理本机iOS应用程序的构建 随后在Xcode中构建本机iOS应用程序

我们可以看到，一个干净的构建工具需要 13.334秒 ，而后续构建在Xcode中花了不到一秒钟。

我们可以使用xcodebuild命令从命令行进行类似的实验。

$ xcodebuild -project Flutter-Compare-iOS.xcodeproj/  \ -scheme Flutter-Compare-iOS -destination 'platform=iOS  \ Simulator,OS=12.1,name=iPhone XR' clean build CODE_SIGN_IDENTITY=""  \ CODE_SIGNING_REQUIRED=NO -showBuildTimingSummary

您可以在GIF中看到`xcodebuild`命令需要 13s 才能进行干净构建，后续构建需要大约 3s 。

清理Flutter应用程序的构建

可以为iOS和Android构建Flutter应用程序。 在这篇文章中，我们将Flutter应用程序的iOS部分与本机iOS应用程序开发进行比较。 我们可以使用以下命令在调试模式下为iOS构建Flutter应用程序。

$ flutter build ios -debug -no-codesign -simulator

我们还可以从构建目录中删除派生数据并执行上面的命令以获得的构建时间。

正如我们在第一个例子中所看到的，Flutter iOS应用程序的构建需要33秒，然后是后续版本的10s，8s等。 考虑到第二个例子， 我们的Flutter演示应用程序 的 构建大约需要30-45秒 。

分析：构建时间

通过比较本机应用程序和Flutter应用程序的构建时间，Flutter应用程序似乎需要更长时间才能实现干净的构建。

但是，Flutter在逐步建立时会加快速度。 Xcode中增量构建的构建时间是超快的。

在我们的例子中，我们可以得出结论，Swift在本地机器上的构建时间比Dart快。

重启App

在开发iOS应用程序时，始终需要在模拟器或设备上进行代码更改和测试。 此过程也称为重加载应用程序，这是移动应用程序开发的关键功能之一。

为了比较这两个应用，让我们对我们的应用进行更改。 不要使用“按下我”按钮，而是将其更改为“Click Me”。 我们假设这两个App已经安装并在模拟器中运行。

原生iOS（Swift）

为了更改按钮名称，我们必须从故事板重命名用户界面元素，可能还需要更改辅助功能信息。 重命名元素后，我们必须重建应用程序以查看所做的更改是否反映在模拟器中。

所有代码更改完成后，Xcode构建和运行iOS应用程序所需的时间大约为 7-12秒 。

Flutter iOS

Flutter具有 热重新加载 功能，这意味着当我们在代码中进行更改并重新加载应用程序时，更改会在一秒钟内反映出来。 在我们的例子中，我们只需要将`raisedButton`小部件中的文本从“Press Me”更新为“Click Me”并重新加载应用程序。

如您所见，Flutter在 3秒内 重新加载了整个应用程序 。

分析：重新加载

比较Native和Flutter iOS应用程序，Flutter中的重新加载速度更快。 Native 应用程序大约需要10秒，而Flutter应用程序大约需要3秒钟重新加载。

剖析性能

分析是一个动态分析过程，用于衡量应用程序的内存，资源，CPU和其他性能因素。 Flutter和 Native 工具都非常支持对应用程序进行分析。

原生iOS（Swift）

在Xcode中，我们可以使用 工具 来分析应用程序 。 从Xcode，我们可以选择使用 产品>个人资料 来分析应用 。 这将启动一个仪器应用程序，我们可以通过不同的标准分析应用程序。 我们可以选择任何模板进行分析。

当我们多次单击按钮时，我们可以选择Time Profiler来测量CPU线程。 启动Time Profiler后，我们开始录制并多次单击该按钮。

让我们考虑在配置文件模式下构建应用程序所需的时间以及单击按钮13次时的CPU性能。 您始终可以使用其他类型的分析。

构建分析时的Xcode时间：

目前，Xcode不显示“配置文件”操作的构建时间，但我们可以使用秒表来测量干净构建所需的时间。 Xcode花了20秒钟在配置文件模式下构建应用程序。

Flutter iOS

在Flutter中，我们可以使用IDE或命令行来分析iOS应用程序。 Flutter  文档 有关于分析Flutter应用程序的很好指南。 为了从命令行分析应用程序，我们需要运行以下命令。

$ flutter build ios -profile -no-codesign

此命令将计算分析Flutter应用程序所用的时间。

颤 振的 构建时间：大约 149s

或者，我们可以从命令行运行Flutter应用程序并访问本地主机URL，例如 http://127.0.0.1:49399/， 以便Dart VM分析Flutter应用程序。

我们可以选择CPU配置文件选项卡来检查详细信息。

你可以深入挖掘CPU性能数据或其他分析指标。

分析：分析

分析非常广泛，可以使用各种风格来对  Native  和 Flutter iOS应用程序进行基准测试。 但是，它实际上取决于机器和个人应用程序。 就分析的构建时间而言，我们可以看到以下信息：

Xcode和Flutter都支持调试和分析iOS应用程序。 但是，Xcode有一个专用的应用程序（仪器），Flutter有一种轻量级的方式来使用浏览器分析应用程序。

无障碍功能

应用程序中的辅助功能可增强残疾人的用户体验。 作为一名iOS应用程序开发人员，我们还应该通过让每个人都可以访问iOS应用程序来为他们的生活做出贡献。 让我们比较在native和Flutter应用程序中添加辅助功能是多么容易。

原生iOS（Swift）

Apple的本机工具在 UIKit 框架中 具有可访问性， 因此无需导入另一个框架来在本机应用程序中启用可访问性支持。 Apple提供 了 Accessibility API ，但开发人员必须使用 UIAccessibility 协议 为iOS应用中的每个UI元素提供正确的可访问性信息 。 在我们的应用程序中，我们可以使用代码添加可访问性标识符，标签和特征

pressmeButton.accessibilityIdentifier = "Press Me" pressmeButton.accessibilityLabel = "Press Me"

向用户提供辅助功能数据的另一种方法是使用StoryBoard和界面构建器。

通过向用户提供此信息，他们可以使用 VoiceOver 等辅助技术访问这些元素 。

Flutter iOS

Flutter iOS应用程序没有任何成熟的支持来添加可访问性;  Flutter  文档 建议使用Xcode的辅助功能检查工具审核iOS应用程序。 为了测试目的，添加可访问性标识符 存在一个未 解决的问题 ，但它仍在进行中。

分析：可访问性

在可访问性支持方面，Flutters需要改进，为残障人士提供更好的应用程序。 Flutter路线图上必须有一些东西可以增强Flutter应用程序的可访问性。

部署在持续集成到服务器

在本地计算机上构建iOS应用程序可能会有所不同，具体取决于本地计算机配置，例如RAM，磁盘大小等。在持续集成服务器上比较iOS应用程序的性能也会很棒。 Nevercode 提供免费试用版，为iOS应用程序设置构建版本， Codemagic 是Flutter应用程序的免费专用CI / CD工具。 让我们在Nevercode上设置两个项目，并在Codemagic上设置Flutter iOS应用程序。

我们将比较调试版本的构建和发布时间，因此我们已禁用所有其他设置，如测试等。

Nevercode上的原生iOS（Swift）

由于我们的 本机演示应用程序 可在GitHub上使用，我们只需使用我们的GitHub凭据登录到Nevercode。 您可以按照 Nevercode的 入门 文档来设置项目。 在我们的构建中，我们已禁用测试阶段并运行构建。 此构建还将生成构建工件。

你可以在一分钟内看到，Nevercode已经构建并发布了我们的演示应用程序。

建造时间：1分1秒

在Nevercode和Codemagic上展开iOS

Codemagic是Flutter应用程序的官方和专用CI / CD解决方案，因此用户应选择此解决方案来构建Flutter应用程序。 但是，我们在Nevercode上构建了本机iOS应用程序，因此我们将在Nevercode和Codemagic上构建Flutter应用程序以进行比较。

由于我们的 Flutter演示应用程序 可在Github上使用，我们将首先在Nevercode上构建Flutter应用程序并禁用测试。

正如你所看到的，还构建了适用于iOS的Flutter应用程序，并生成了应用程序工件，但在Nevercode上花了4分3秒。

建造时间：4m 3s

现在，我们将在Codemagic上构建相同的应用程序。你 可以按照 入门指南 轻松地在Codemagic上设置Flutter应用程序 。 在应用程序设置中，只需禁用测试阶段，仅构建iOS调试。

现在，我们已准备好在Codemagic上运行我们的演示应用程序。 启动新版本。

构建完成后，我们可以构建工件。

在Codemagic上建立时间：1分50秒

我们可以看到Codemagic上的构建需要1分50秒，这绝对比Nevercode快。 这就是Flutter应用程序完全专用的CI / CD平台的好处。

分析：在CI服务器上构建时间

查看持续集成服务器上的构建时间，我们可以看到本机应用程序的构建速度比Flutter应用程序快一点，但是当Flutter应用程序构建在Codemagic上时差异并不大。

CI上的本机应用程序构建时间：1m 1s

在CI上展开app构建时间：1分50秒

APP包大小

现在我们已经比较了 Native 和Flutter应用程序的所有方面，现在是时候比较本机Xcode和Flutter生成的两个应用程序的大小了。

原生iOS（Swift）

你可以从Xcode派生数据或CI服务器获取应用程序工件。 该应用程序采用 .app 格式。 对于我们的应用程序，该文件位于派生数据目录中。

我们的 Native 应用程序的二进制文件的大小是23.2 MB。

Flutter iOS

Flutter应用程序的构建工件 在Flutter项目 的 build / ios / Debug-iphonesimulator 目录中生成。

本地生成的应用程序的文件大小为52.4 MB。 它比原生应用程序大一点，但Flutter应用程序有一些嵌入的应用程序图标和其他资源。

分析：应用程序大小

在比较原生应用程序和Flutter应用程序的大小后，Flutter应用程序的大小似乎更重。 Flutter团队已经承认了这一事实，您可以在 此处 阅读 常见问题解答 ，了解为什么Flutter应用程序的大小。

源代码

用于此比较的应用程序的源代码可在GitHub上获得。你 可以自己尝试并比较一些其他有趣的因素，如安全性，配置管理等。

Native  iOS APP： https ： //github.com/Shashikant86/Native-iOS-App

Flutter app： https ： //github.com/Shashikant86/Flutter-App

结论

作为比较的结果， Native  iOS开发似乎比Flutter具有一些显着的优势，并且在此比较中显然获得更高的分数。 但是，我们应该考虑Flutter还支持其他平台，如Android，具有相同的源代码。 Flutter应用程序看起来非常接近实际的原生应用程序，并且Flutter将来有很大的机会成长为本机工具提供竞争。 我们无法预测未来，但Flutter已进入跨平台移动开发领域，并且可能是那些没有预算来构建原生应用程序的公司的首选。

不错就点个在看吧!