本文中所有 Demo 运行的环境依赖

 

macOS Catalina 10.15 Beta

 

Xcode 11 Beta5

 

前言

 

近年来 Android 和 iOS 开发在两家上游商业公司的推动下，不断尝试着一轮一轮的变革：

 

Google 2011 年发布 Dart，2017 年发布 Flutter，同年 Google I/O 2017 上宣布 Android 官方支持 Kotlin， Google I/O 2019 上宣布 Kotlin-first，同时发布 Kotlin Jetpack Compose。

 

Apple 在 2014 WWDC 上发布 Swift，在 2019 WWDC 上发布 SwiftUI。

 

其中很多理念和前端社区的走向也是相同的，比如：

 

声明式 UI

 

响应式数据

 

本文会简要分享下 SwiftUI 的上面两点理念，以及介绍下 Xcode 最新的一些工具设计。

 

第一印象

 

如果你还不知道 SwiftUI 是什么，那也没关系，反正我也不打算从 SwiftUI 开始讲起...

 

为了让广大前端工程师同学打起兴趣，首先我打算先介绍下 SwiftWebUI，它是 Github 上一个开源的将 SwiftUI 跑在 Web 上 的实验性项目。

 

看看官方的一个简单计数器 ：

 

创建一个空的 macos command line 应用

 

使用 Swift Package Manager 从 github 上拉取 SwiftUIWeb 依赖包

 

Swift 的包管理是基于源文件 + 配置文件的，也遵循 semver 规则。

 

在 main.swift 粘贴如下代码，最后添加一行启动服务 SwiftWebUI.serve(MainPage())

 

点击 Xcode build，在浏览器打开 http://localhost:1337

 

效果：

 

从上面这个小例子中就可以看到到 SwiftUI 的几个重要理念了：

 

声明式 UI （类比 React JSX，Flutter）

 

响应式数据 （类比 mobx，vue）

 

“CSS In JS”

 

链式调用（官方术语叫 ViewModifier，类似 react 里面的 HOC 概念）

 

更复杂的 Demo 可以体验：https://github.com/swiftwebui/AvocadoToast

 

声明式 UI

 

Demo

 

Demo 参考：https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

 

SwiftUI 的文档这次设计了非常精美的 tutorials 交互，可以跟着一步一步的操作。

 

所有视图组件类型都是 View ，它只需要实现一个接口 body ，可以类比为 React Component 的 render

 

VStack 是垂直布局的容器， HStack 是水平布局的容器， ZStack 是独立图层的容器，类似前端 zindex

 

组件可以有属性（Text 的参数），组件也可以应用 ViewModifier（链式调用）

 

对 SwiftUI 视图语法的深入分析可以阅读：SwiftUI 的一些初步探索 (一)

 

DSL

 

WWDC-2019 Session 216: SwiftUI Essentials

 

SwiftUI 和 Flutter 的 UI 语法都可以看见 React JSX 的影子，它们不约而同使用各自的声明式 DSL 来描述 UI 。

 

但是这和前端常用的模板语言（Nunjucks/Vue）还是有一些区别的，它们都是复用语言本身的逻辑控制语句（条件，循环），再加上一种特殊的数据结构（eg: React Virtual DOM）来表达 UI。

 

毕竟对于 Google 和 Apple 来说，语言、编译器、开发工具、开发者、平台这整条链路都在掌控中，那么可以做一些集成度更高的设计。