SwiftUI对Flutter意味着什么

• 本文的主要价值：提供一份对Flutter, SwiftUI等声明式UI技术的发展趋势的解读
• 关键词：声明式UI
• 本文建议阅读时间8分钟

当苹果平台的开发者们发现他们可以使用与SwiftUI相同的声明性UI技术，但可以在更多平台（包括Android，Windows，Web和IOT）上运行代码时，Flutter将会受益。

Swift vs Flutter.png

在WWDC 19大会上，苹果公司发布了许多重要公告，但其中一个重要消息并没有成为头条新闻，它就是SwiftUI的发布。SwiftUI是一种新的声明式UI，可用于构建iOS以及iPadOS/macOS/watchOS/tvOS平台的应用。对于开发者来说，这可能是令人振奋的消息。

开发人员之所以如此兴奋，是因为Apple终于加入了声明性UI编程的时代。React Native和Flutter之类的技术向我们展示了通过热重装来大幅提高代码简洁性并减少开发时间的能力，苹果在期间可能一直在静观其变。当Google在I/O ’19宣布推出新的用于Android的声明性UI框架Jetpack Compose时，苹果开发人员也为之叹息。因此，苹果发布SwiftUI作为对这股潮流的回应也许正当其时。

我们目睹的其实是React发起的声明式UI编程革命的延续，为此我们需要感谢Facebook。 Flutter在这场革命中，也值得我们的赞誉。 它是十大最受好评的版本Github之一，最近在2019 Stack Overflow开发人员调查中排名第三，是最受欢迎的框架，并且被LinkedIn评为发展最快的软件工程师技能。许多经验丰富的本地iOS开发人员，在大约两年前转投Flutter。那么对于这位后来者SwiftUI，我们又当如何解读以及寄予何种期待呢？

首先，我们来了解一下声明性UI编程到底是什么?

许多事实证明，编写UI代码可以说是任何现代应用程序中最复杂的部分。当今的移动/桌面/网络应用必须具有响应能力，能够处理设备旋转，动态字体大小，明/暗模式，不同的主题，用户自定义，基于角色的权限，功能标记乃至A/ B测试。想象一下，开发者经常需要面对的一个情景：在保证前面所述的所有这些功能仍然正确运行的前提下，他需要在某个UI已有的动画之上再添加几个动画。很看起来简单对吧？嗯，今天下班之前给我搞定。

在采用声明式UI编程之前，通常我们将按以下这种方式编写代码：处理登录按钮，显示处理中的菊花，调用后端接口，然后隐藏处理中的菊花，输出到界面。同时，还要在失败的情况弹窗提示用户。在这种“命令式”的范式中，你可以响应各种事件并且直接更改UI的各个部分。看起来很简单，但是随着应用变得越来越复杂，就很难在没有意外中断的情况下完成一次完整的UI更新。而且程序员将很难看清事件和处理极端情况之间的关系。这就是为什么有时用户会看到一些让他们很困惑的跟预期不一致的界面。这些都是开发人员没有想到的种种复杂状态的结果。

相反，在“声明式”的范式中，用户界面根据表示它所代表的某些数据来“声明”。这些数据被称为状态。随着状态的改变，UI会自动更新。因此，使用上面的相同示例：如果没有用户，请显示登录名。如果是用户，请显示首页。如果正在处理中，请显示菊花。如果失败，则显示错误。区别在于，所有不同的状态都集中在一个地方，以防止出现意外或不一致的结果。这样做的好处是：

• 大大降低了复杂性
• 更少的代码量
• 改善代码质量
• 减少开发时间

难怪开发人员会喜欢它了。所以，苹果 “入伙” 声明式UI是一个大事件。它为整个Apple社区实锤了声明性范式的优势。那这件事对于Flutter又意味着什么？

我喜欢Flutter。它始于React Native并且跑的更快。凭借出色的性能，对平台原生UI组件的零依赖性以及支持iOS，Android，macOS，Windows，IOT和Web一众平台的能力，我相信这是现代应用程序开发的最佳选择。

在短期内，SwiftUI可能会降低只面向Apple的开发者采用Flutter的动机。只需借助SwiftUI, 开发者能够获得许多类似Flutter带来的好处，包括声明性UI架构以及热重载，这都会减轻Swift臭名昭著的缓慢编译带来的痛苦。不过，通过使用Flutter，Apple平台的开发者会发现他们可以复用已经学习过的相同的声明性UI技术，在比Apple生态更多的平台上运行自己的代码。鉴于苹果一贯的做法，SwiftUI相对Flutter这个不可回避的劣势将会长期存在。因此，从长远来看，我认为Flutter将从SwiftUI中受益。不可避免的，只面向Apple平台的开发者终将面临着把应用程序移植到其他平台（例如Android，Windows和Web）的压力。毕竟，谁都愿意看到自己的产品有能力面向更多的用户群体开放。到那时，Flutter将张开双臂等待着拥抱这些人。