6月初，苹果在WWDC 2019大会上发布了SwiftUI。这是一个单一的“跨平台”“声明性”框架，可以用来构建tvOS、macOS、watchOS和iOS/iPad OS平台的UI。而本文要介绍的SwiftWebUI则能将SwiftUI带到Web平台上。

免责声明：记住这是一个娱乐项目！可别把它用到生产环境里哦。它可以帮助你深入了解SwiftUI及其内部的工作机制。

SwiftWebUI

那么SwiftWebUI到底是什么？简单来说，你可以用它编写能显示在浏览器中的SwiftUI视图。详情请查看：

import SwiftWebUI

struct MainPage: View {
  @State var counter = 0
  
  func countUp() { counter += 1 }
  
  var body: some View {
    VStack {
      Text("🥑🍞 #\(counter)")
        .padding(.all)
        .background(.green, cornerRadius: 12)
        .foregroundColor(.white)
        .tapAction(self.countUp)
    }
  }
}

结果如下：

SwiftWebUI和其他的一些方案不太一样，它不仅会将SwiftUI视图呈现为HTML，还会在浏览器和Swift服务器中托管的代码之间建立一个连接，由此可以实现交互操作——按钮、选择器、步进器、列表、导航，所有这些都能用！

换句话说：SwiftWebUI是SwiftUI API在浏览器上的（接近完整）的实现。

再强调一遍免责声明：记住这是一个娱乐项目！可别把它用到生产环境里哦。它可以帮助你深入了解SwiftUI及其内部的工作机制。

一次学习，随处使用

SwiftUI的宗旨不是“一次编写，随处运行”，而是“一次学习，随处使用”。可别指望随手抓起一个iOS平台上写得好好的SwiftUI应用，然后把代码扔进SwiftWebUI项目，就能原样在浏览器上完美呈现出来。这不是它们的设计目标。

这里的关键是在各个平台复用同一套代码逻辑和框架。本文所关注的就是复用到Web平台上。

接下来我们开始深入研究，并编写一个简单的SwiftWebUI应用。本着“一次学习，随处使用”的精神，首先要看一遍这两个WWDC讲座：SwiftUI简介和SwiftUI要点。还有一个讲座内容比较深，超出了本文涉及的范畴（并且讲座中涉及的概念大都被SwiftWebUI支持了）：经过SwiftUI的数据流。

系统需求

macOS Catalina

目前，SwiftWebUI需要运行在macOS Catalina系统上。还好大家可以很容易地在单独的APFS卷上安装Catalina。另外SwiftUI需要调用大量Swift 5.1中的新功能，所以还得安装Xcode 11才行。

为什么需要Catalina？ SwiftUI使用新的Swift 5.1运行时功能（例如不透明的结果类型）。这些功能在Mojave附带的Swift 5运行时中不可用。（另一个原因是使用仅在Catalina中可用的Combine，尽管可以使用OpenCombine修复该部分）

tuxOS

SwiftWebUI现在可以在Linux上使用OpenCombine运行（也可以在没有它的情况下运行，但有些东西不起作用，例如NavigationView）。

需要Swift 5.1快照。我们还提供了一个包含5.1快照的Docker镜像：

helje5 / swift。

Mojave系统

想在Mojave与Xcode 11的组合上运行也能做到。你需要创建一个iOS 13模拟器项目，在里面运行所有内容。

第一个应用

创建SwiftWebUI项目

启动Xcode 11，选择“File> New> Project …”或按Cmd-Shift-N：

选择“macOS / Command Line Tool”项目模板：

取个好名字，这里用“AvocadoToast”：

然后我们将SwiftWebUI添加为Swift Package Manager依赖项。该选项隐藏在“File / Swift Packages”菜单组中：

输入https://github.com/SwiftWebUI/SwiftWebUI.git作为包的URL

在“Branch”中选master，始终获取最新更新（你也可以使用revision或develop分支）：

最后将SwiftWebUI库添加到你的tool target：

搞定了。现在你就有了一个可以import SwiftWebUI的工具项目。（Xcode可能需要花些时间来获取和构建依赖项。）

SwiftWebUI Hello World

开始使用SwiftWebUI吧。打开main.swift文件并将其内容替换为：

import SwiftWebUI

SwiftWebUI.serve(Text("Holy Cow!"))

在Xcode中编译并运行应用，打开Safari并访问http://localhost:1337/

背后发生了什么事情呢？首先是导入SwiftWebUI模块（可别搞错了，导入macOS SwiftUI就不对了😀）

然后我们调用SwiftWebUI.serve，它要么接受一个闭包返回一个视图，要么直接出一个视图，这里就是一个Text视图（又名“UILabel”，可以显示普通或格式化的文本）。

幕后

在程序内部，serve函数创建了一个非常简单的SwiftNIOHTTP服务器，侦听端口1337。当浏览器访问该服务器时，它会创建一个会话并将我们的（Text）视图传递给该会话。

最后SwiftWebUI在服务器上从视图中创建一个“Shadow DOM”，将其呈现为HTML并将结果发送到服务器。这个“Shadow DOM”（和搭配的状态对象）存储在这个会话中。

这里就是SwiftWebUI应用与watchOS或iOS SwiftUI应用之间的区别所在。一个SwiftWebUI应用不仅服务一个用户，而是为一组用户提供服务。

添加一些交互

接下来我们给代码做些改进。在项目中创建一个新的Swift文件并调用MainPage.swift。然后为其添加一个简单的SwiftUI视图定义：

import SwiftWebUI

struct MainPage: View {
  
  var body: some View {
    Text("Holy Cow!")
  }
}

根据我们的自定义视图来调整一下main.swift：

SwiftWebUI.serve(MainPage())

然后就不用管main.swift了，所有工作都能在自定义的视图中完成。下面添加一些交互：

struct MainPage: View {
  @State var counter = 3
  
  func countUp() { counter += 1 }
  
  var body: some View {
    Text("Count is: \(counter)")
      .tapAction(self.countUp)
  }
}

我们的视图得到了一个名为counter的持久状态变量（具体介绍见前面第一个wwdc讲座）。还有一个小函数来触发计数器。

然后我们使用SwiftUI tapAction修饰符将事件处理程序附加到Text上。最后我们在标签中显示当前值：

幕后

这里程序又是怎么工作的呢？当浏览器点击我们的端点时，SwiftWebUI在其中创建了会话和我们的“Shadow DOM”。然后它将描述我们视图的HTML发送到浏览器。然后tapAction向HTML添加了一个onclick处理程序。SwiftWebUI还向浏览器发送（少量，没那么多！）JavaScript，负责处理点击操作并将其转发到我们的Swift服务器。

然后轮到SwiftUI上场了。SwiftWebUI将click事件与我们的“Shadow DOM”中的事件处理程序相关联并调用countUp函数。该函数修改了计数器状态变量，使视图的呈现无效。接着SwiftWebUI对“Shadow DOM”中的更改执行diff命令。然后这些更改被发送回浏览器。

这些“更改”被作为JSON数组发送出去，我们页面中的小JavaScript程序可以处理这些数组。如果整个子树发生了变化（例如，如果用户跳转到一个全新的视图），则更改可以是更大的HTML片段，应用于innerHTML或outerHTML。

但通常情况下这些更改都不大，诸如add class、set HTML attribute等（比如浏览器DOM调整之类）。

吐司面包Avocado Toast

基础打得很牢固。下面该引入更多的交互了。下面的内容是基于“SwiftUI要点”讲座中演示SwiftUI用的“Avocado Toast应用”。这个应用是关于美味的吐司面包的。

我们写的HTML/CSS样式不是很完美也不够漂亮。你也知道我们不是网页设计师，需要大家帮助。欢迎提交贡献！

完整应用下载链接：https://github.com/SwiftWebUI/AvocadoToast。

吐司面包订单

讲座中的相关内容大约从6分钟开始，我们把其中的代码添加到新的OrderForm.swift文件中：

struct Order {
  var includeSalt            = false
  var includeRedPepperFlakes = false
  var quantity               = 0
}
struct OrderForm: View {
  @State private var order = Order()
  
  func submitOrder() {}
  
  var body: some View {
    VStack {
      Text("Avocado Toast").font(.title)
      
      Toggle(isOn: $order.includeSalt) {
        Text("Include Salt")
      }
      Toggle(isOn: $order.includeRedPepperFlakes) {
        Text("Include Red Pepper Flakes")
      }
      Stepper(value: $order.quantity, in: 1...10) {
        Text("Quantity: \(order.quantity)")
      }
      
      Button(action: submitOrder) {
        Text("Order")
      }
    }
  }
}

测试一下，在main.swift中将SwiftWebUI.serve()指向新的OrderForm视图。

浏览器中是这个样子：

SemanticUI（https://semantic-ui.com/）用来在SwiftWebUI中设置一些样式。这一步并不是非用它不可，它只是用来做一些好看的小部件的。

注意：这里只使用CSS/fonts，不用JavaScript组件。

插点内容：SwiftUI布局

在SwiftUI要点讲座中大约16分钟的时候，他们会讲SwiftUI布局和视图修饰符排序：

var body: some View {
  HStack {
    Text("🥑🍞")
      .background(.green, cornerRadius: 12)
      .padding(.all)
    
    Text(" => ")
    
    Text("🥑🍞")
      .padding(.all)
      .background(.green, cornerRadius: 12)
  }
}

结果如下，请注意修饰符的排序：

SwiftWebUI试图复制常见的SwiftUI布局，但还没有完全成功。毕竟它必须考虑浏览器提供的布局系统。欢迎flexbox专家提供帮助！

吐司面包订单历史

再回来看应用。讲座19分50秒开始介绍列表（https://developer.apple.com/documentation/swiftui/list）视图，用于显示牛油果土司面包的订单历史记录。它在Web端长成这个样子：

List视图遍历已完成订单的数组，为每个订单创建一个子视图（OrderCell），并传入列表中的当前项。

以下是我们使用的代码：

struct OrderHistory: View {
  let previousOrders : [ CompletedOrder ]
  
  var body: some View {
    List(previousOrders) { order in
      OrderCell(order: order)
    }
  }
}

struct OrderCell: View {
  let order : CompletedOrder
  
  var body: some View {
    HStack {
      VStack(alignment: .leading) {
        Text(order.summary)
        Text(order.purchaseDate)
          .font(.subheadline)
          .foregroundColor(.secondary)
      }
      Spacer()
      if order.includeSalt {
        SaltIcon()
      }
      else {}
      if order.includeRedPepperFlakes {
        RedPepperFlakesIcon()
      }
      else {}
    }
  }
}

struct SaltIcon: View {
  let body = Text("🧂")
}
struct RedPepperFlakesIcon: View {
  let body = Text("🌶")
}

// Model

struct CompletedOrder: Identifiable {
  var id           : Int
  var summary      : String
  var purchaseDate : String
  var includeSalt            = false
  var includeRedPepperFlakes = false
}

SwiftWebUI列表视图效率非常低，它总是呈现整个子集。没有单元复用，啥都没有。在Web应用中有多种方法可以处理这种情况，例如使用分页或更多客户端逻辑。

讲座中用到的示例数据如下：

let previousOrders : [ CompletedOrder ] = [
  .init(id:  1, summary: "Rye with Almond Butter",  purchaseDate: "2019-05-30"),
  .init(id:  2, summary: "Multi-Grain with Hummus", purchaseDate: "2019-06-02",
        includeRedPepperFlakes: true),
  .init(id:  3, summary: "Sourdough with Chutney",  purchaseDate: "2019-06-08",
        includeSalt: true, includeRedPepperFlakes: true),
  .init(id:  4, summary: "Rye with Peanut Butter",  purchaseDate: "2019-06-09"),
  .init(id:  5, summary: "Wheat with Tapenade",     purchaseDate: "2019-06-12"),
  .init(id:  6, summary: "Sourdough with Vegemite", purchaseDate: "2019-06-14",
        includeSalt: true),
  .init(id:  7, summary: "Wheat with Féroce",       purchaseDate: "2019-06-31"),
  .init(id:  8, summary: "Rhy with Honey",          purchaseDate: "2019-07-03"),
  .init(id:  9, summary: "Multigrain Toast",        purchaseDate: "2019-07-04",
        includeSalt: true),
  .init(id: 10, summary: "Sourdough with Chutney",  purchaseDate: "2019-07-06")
]

吐司面包选择器
讲座第43分钟开始讲解Picker控件及它与枚举一起使用的方法。首先是各种吐司选项的枚举：

enum AvocadoStyle {
  case sliced, mashed
}

enum BreadType: CaseIterable, Hashable, Identifiable {
  case wheat, white, rhy
  
  var name: String { return "\(self)".capitalized }
}

enum Spread: CaseIterable, Hashable, Identifiable {
  case none, almondButter, peanutButter, honey
  case almou, tapenade, hummus, mayonnaise
  case kyopolou, adjvar, pindjur
  case vegemite, chutney, cannedCheese, feroce
  case kartoffelkase, tartarSauce

  var name: String {
    return "\(self)".map { $0.isUppercase ? " \($0)" : "\($0)" }
           .joined().capitalized
  }
}

可以把它们加入Order结构中：

struct Order {
  var includeSalt            = false
  var includeRedPepperFlakes = false
  var quantity               = 0
  var avocadoStyle           = AvocadoStyle.sliced
  var spread                 = Spread.none
  var breadType              = BreadType.wheat
}

然后使用不同的Picker类型显示它们。循环枚举值的代码非常简洁：

Form {
  Section(header: Text("Avocado Toast").font(.title)) {
    Picker(selection: $order.breadType, label: Text("Bread")) {
      ForEach(BreadType.allCases) { breadType in
        Text(breadType.name).tag(breadType)
      }
    }
    .pickerStyle(.radioGroup)
    
    Picker(selection: $order.avocadoStyle, label: Text("Avocado")) {
      Text("Sliced").tag(AvocadoStyle.sliced)
      Text("Mashed").tag(AvocadoStyle.mashed)
    }
    .pickerStyle(.radioGroup)
    
    Picker(selection: $order.spread, label: Text("Spread")) {
      ForEach(Spread.allCases) { spread in
        Text(spread.name).tag(spread) // there is no .name?!
      }
    }
  }
}

结果：

这里也需要改进一下CSS……

吐司面包“最终版”应用

其实我们的结果和原版略有不同，也不是什么完整的版本。它看起来没那么完美，但毕竟这只是一个演示嘛

HTML和SemanticUI

SwiftWebUI中的对应UIViewRepresentable（https://developer.apple.com/documentation/swiftui/uiviewrepresentable）的等效组件负责发出原始HTML。

这里提供了两种变体，HTML按原样输出字符串，或者通过HTML转义内容：

struct MyHTMLView: View {
  var body: some View {
    VStack {
      HTML("<blink>Blinken Lights</blink>")
      HTML("42 > 1337", escape: true)
    }
  }
}

一般来说，你可以使用此原语构建任何HTML。

HTMLContainer的级别更高一些。例如，这是我们Stepper控件的实现：

var body: some View {
  HStack {
    HTMLContainer(classes: [ "ui", "icon", "buttons", "small" ]) {
      Button(self.decrement) {
        HTMLContainer("i", classes: [ "minus", "icon" ], body: {EmptyView()})
      }
      Button(self.increment) {
        HTMLContainer("i", classes: [ "plus", "icon" ], body: {EmptyView()})
      }
    }
    label
  }
}

HTMLContainer是“反应性的”，即如果类、样式或属性发生变化（而不是重新呈现所有内容），它将发出常规DOM更改。

SemanticUI

SwiftWebUI还有一些预设的SemanticUI控件：

VStack {
  SUILabel(Image(systemName: "mail")) { Text("42") }
  HStack {
    SUILabel(Image(...)) { Text("Joe") } ...
  }
  HStack {
    SUILabel(Image(...)) { Text("Joe") } ...
  }
  HStack {
    SUILabel(Image(...), Color("blue"), 
             detail: Text("Friend")) 
    {
      Text("Veronika")
    } ...
  }
}

呈现为：

请注意，SwiftWebUI还支持一些SFSymbols图像名称（通过Image(systemName:)）。这些都是基于SemanticUI对Font Awesome的支持的（https://semantic-ui.com/elements/icon.html）。

还有SUISegment、SUIFlag和SUICARD：

SUICards {
  SUICard(Image.unsplash(size: UXSize(width: 200, height: 200),
                         "Zebra", "Animal"),
          Text("Some Zebra"),
          meta: Text("Roaming the world since 1976"))
  {
    Text("A striped animal.")
  }
  SUICard(Image.unsplash(size: UXSize(width: 200, height: 200),
                         "Cow", "Animal"),
          Text("Some Cow"),
          meta: Text("Milk it"))
  {
    Text("Holy cow!.")
  }
}

呈现为：

添加此类视图非常简单，非常有趣。可以使用SwiftUI视图快速构建相当复杂和美观的布局。

Image.unsplash使用Unsplash API（http://source.unsplash.com）构建图像查询。只需输入一些参数，诸如图像尺寸和可选范围即可。

注意：有时Unsplash服务不怎么好用。

总结

上面就是我们的演示了，希望你能喜欢！但要再次重复免责声明：记住这是一个娱乐项目！可别把它用到生产环境里哦。它可以帮助你深入了解SwiftUI及其内部的工作机制。

我们认为它是一个很好的玩具，可能也是一个有价值的工具。

查看原文：http://www.alwaysrightinstitute.com/swiftwebui/

创作场景

SwiftWebUI 框架：带你深入理解 SwiftUI 原理