写点什么

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

  • 2019-07-15
  • 本文字数:6957 字

    阅读完需:约 23 分钟

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

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/


2019-07-15 19:4233929

评论

发布
暂无评论
发现更多内容

架构思维

无心

架构

Flink中的状态编程

大数据技术指南

flink 4月日更

阿里P7手把手教你!系统学Android从零开始,内含福利

欢喜学安卓

android 程序员 面试 移动开发

深入剖析共识性算法 Raft

vivo互联网技术

复制 选举 分布式协调 Leader Follower

泰山版震撼来袭!阿里巴巴Java面试参考权威指南四月版开源

Java架构追梦

Java 阿里巴巴 架构 面试

那些打不垮你的,终究使你更强大

小天同学

读书 励志 个人感悟 4月日更

面试官关于线程池的这个问题把我问懵逼了。

why技术

面试 Jav 1 周年盛典

Ubuntu 20.04 快捷键整理

TroyLiu

Linux ubuntu 效率 操作系统 快捷键

2021安擎昇腾AI服务器产品发布会在京成功举行

DT极客

CTO 说要接入实时音视频 SDK,我到底该批多少预算?

融云 RongCloud

GitHub面试题库+阿里巴巴2021年Java岗面试26大核心专题,成功助我砍下7家大厂Offer

Java架构追梦

Java 阿里巴巴 架构 面试

女朋友问我:什么是 MySQL 的全局锁、表锁、行锁?

一个优秀的废人

MySQL 数据库 锁机制 备份

企业如何做数字化转型?想要资产状况及时把控,它的作用至关重要!

一只数据鲸鱼

数据挖掘 数字化 数据可视化 资产管理

手把手教大家实现一个电子签名

麦洛

Java canvas

女朋友问我:MySQL 事务与 MVCC 原理是怎样的?

一个优秀的废人

Java 数据库 事务隔离级别 事务 MVCC

技术干货 | 基于MindSpore更好的理解Focal Loss

华为云开发者联盟

损失函数 mindspore Focal Loss 图像物体检测 采样

不为人知的网络编程(十二):彻底搞懂TCP协议层的KeepAlive保活机制

JackJiang

TCP 即时通讯 IM

java数组打印的几种方式

Sakura

4月日更

回顾过去,展望未来,我在 InfoQ 写作平台的一周年!

JackTian

程序员 个人总结 4月日更 1 周年盛典 InfoQ 写作平台 1 周年

这个GItHub上的Java项目开源了 2021最全的Java架构面试复习指南

比伯

Java 编程 架构 面试 程序人生

华为云AI论文精读会2021第一期:高效语义分割模型Fast-SCNN分享

华为云开发者联盟

AI 华为云

架构实战营模块1作业指导

华仔

#架构实战营

新一代容器,安全容器kata-container实践

ilinux

Kubernetes 容器

重读《重构2》- 封装记录

顿晓

重构 4月日更

专访阿里巴巴研究员吴翰清:白帽子的网络安全世界观

五分钟学大数据

网络安全 采访

[转] 程序员在工作中如何做好技术积累

小江

技术管理 架构师 自我思考 个人总结

五一高铁票难抢?用RPA机器人试试!

华为云开发者联盟

RPA

Flink的基石

五分钟学大数据

flink 4月日更

用WASM连接Rust与Python | Rust 学习笔记(三)

李大狗

Python rust 狗哥 Wasm

MySQL权限管理实战!

Simon

MySQL 权限管理

面向K8s设计误区

阿里巴巴中间件

云计算 Kubernetes 容器 分布式

SwiftWebUI框架:带你深入理解SwiftUI原理_语言 & 开发_Always Right Institute_InfoQ精选文章