历时五天用 SwiftUI 做了一款 APP，阿里工程师如何做的？

 

作者|姜沂(倾寒) 
出品|阿里巴巴新零售淘系技术部

导读：自 2014 年苹果发布会发布 Swift 之后, Swift 经过多年迭代，终于达到了 ABI 稳定版本，也意味着 Swift 做为稳定的得语言，值得用在大型 APP， 用来生产环境中。

2019 年 WWDC , 又发布了引起无数 Apple 平台开发者欢呼的框架 SwiftUI， 据非官方消息，SwiftUI 框架孵化于 4 年前，作为苹果全平台的 UI 系统的未来，数十名核心开发者，不准向其他同事和外部披露任何关于此项目的任何信息，于今年释出 Beta 版本后，从方方面面都透出出这是目前最强的移动端声明式 编程框架，没有之一（个人觉得)。在此实战之前作者已经编写了两篇相关的文章。

1、SwiftUI初体验 （点击阅读）

2、系列文章深度解读|SwiftUI 背后那些事儿 （点击阅读）

注： 项目代号为企业内部私有，这里使用 SOT 代指，意为 “Swift on Taobao”。

背景

为了研究 SwiftUI 在业务落地的可能性，我们一直持续关注着 SwiftUI 的发展，但编程这种工作，向来是阅读千编，不如实战一次来的深刻，刚好我们有一个业务场景非常适合，那就是观察稳定性大盘。

整个淘系也有一个用来观察稳定性数据的应用，通常来说数据大盘是比较适合在 PC 浏览器中展示的，我们也在 PC 中使用了多年，但是淘宝 APP 是一个重运营类的 APP， 经常会有一些活动在节假日投放。

但此时值班人员或者相关人员可能在外，有时候可能并未携带电脑，这时候观察稳定性情况就非常窘迫，我们迫切需要一款可以随身携带的APP，用于在紧急时刻观察稳定性问题。

项目耗时

这里先给出时间结论，

整个 SOT APP 耗时 1.3 人力，共 10 个工作日，整个 Swift 代码 约 2800 行。

由于这是一款必须工作在内网下的 APP， 接入内网鉴权没有太多经验，花费不少时间。

整体下来大约有 5天左右的工作量花在调试接口，内网鉴权，原型设计部分，真正花在 SwiftUI 的部分约有 5 天，不得不说效率惊人。

项目设计

原型设计

做一款 APP 的最核心的部分是设计 APP 的功能，熟悉 SOT 的同学，应该知道一般观察稳定性主要是观察数据大盘，聚合列表，分析聚合详情，崩溃分析等比较重要的模块。

落地 SwiftUI 的计划预计 两周，所以 SOT 一期只做做核心常用的部分。功能有了，那么设计怎么办呢？

不要怂，作为 9102 年的程序员，不会做 UI 怎么可以？由于 Mac 平台的 设计软件 如 Keynote 和 Sketch 操作方式，基本和 StoryBoard （只会用代码写UI的同学要回去重新学习下 StoryBoard 了 -）操作非常接近，花了一天时间简单设计了下界面。

这里刻意模仿 App Store的圆角和阴影设计，至于为什么？原因就是负责的设计会让 UI 代码编写变的更有挑战性，如果只是用系统原生的样式，那么碰见的难题就会大大减少，这样的实战到了实际的项目中，碰见的问题还会很多。

事实证明负责的 UI 设计对理解 SwiftUI 非常有价值，单单一个圆角，就花去了 6 个小时开发时间。

数据流管理

SwiftUI 是一个典型的单向数据流得声明式 UI 编程框架, 在 SwiftUI 中 View 只是一个页面的描述部分，SwiftUI 提供了多个数据流管理对象。

@State @Binding @Obserabled ,通过改变这些数据流的值，SwiftUI 系统可以理解重新构建 View Tree， 并根据内部变化的范围，有一层类似 Virtual Dom 的 ViewTree, 由于 View 都是结构体，SwiftUI 每次构建这个 View Tree 都极快，这使得性能有很强的保障。

在实践中也发现了一些Bug，但由于目前 SwiftUI 还在高速变化，这些 Bug 都会在将来的版本中修复，这里就不过多解释了。

State