前言
蘋果在 WWDC 2019 的開幕式中給我們來帶了超多的驚喜，全新的iPad OS, 給生産力和商業帶來了新領域，iOS 項目可以通過簡單的修改移植到 Mac OS 上，全新的 Mac Pro 高清的顯示器等新硬體，但對于在蘋果平台的開發者們，最重要的莫過于 Swift UI。
曾幾何時，iOS 開發者的 UI 開發體驗一直是大前端中體驗最差的，粗礦原始的 Frame 布局系統， API 冗長難用的 Autoalyout, 都是把開發者按在地上使勁的摩擦。 毫無開發體驗可言。
去年大火的 Flutter 給用戶端上開發帶來了全新的體驗，聲明式的 UI 文法，亞秒級别的實時重新整理, 都極大的提升了開發效率，但現在這些都在 SwiftUI.Framework上得以實作，并且是官方原生的支援。
昨天一起觀看WWDC的小夥伴們都戲稱 SWiftUI真實的名字怕是
AppleFuckFlutter.framework
.
作為一個蘋果的死粉，當然是第一時間下載下傳 Beta 全家桶嘗鮮一下。
注：Xcode11-beta 可以安裝在 Mac OS Mojave 上，但是 Preview 功能隻能使用在 Mac OS Catalina 上，如果想獲得完整體驗最好配套更新你的 Mac。
與 Flutter 的開發體驗對比
準備好開發工具後我們先來對比下 SwiftUI 和 Flutter 的寫法上的直覺體驗。
是不是非常相似，相似的聲明式布局文法，Debug時期的Preview 和 Live Reload，但這次我們不再借助與第三方，Follow 蘋果官方。下面從初次體驗的方面簡單聊一下直覺感受。
聲明式文法
下面我們看一段簡單的聲明式文法
SwiftUI
struct ContentView : View {
var body: some View {
VStack {
MapView()
.edgesIgnoringSafeArea(.top)
.frame(height: 300)
CircleImage()
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack(alignment: .top) {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer()
Text("California")
.font(.subheadline)
}
}
.padding()
Spacer()
}
}
}
Flutter
Widget _listItemBuilder(BuildContext context, int index) {
return Container(
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9,
child: Image.network(posts[index].imageUrl, fit: BoxFit.cover),
),
SizedBox(height: 16.0),
Text(
posts[index].title,
style: Theme.of(context).textTheme.title
),
Text(
posts[index].author,
style: Theme.of(context).textTheme.subhead
),
SizedBox(height: 16.0),
],
),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.white.withOpacity(0.3),
highlightColor: Colors.white.withOpacity(0.1),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => PostShow(post: posts[index]))
);
}
),
),
),
],
),
);
}
觀察文法的細節，我們可以注意到一些特征，Flutter使用典型的聲明式文法，開發者聲明UI的布局方式，一切的布局都交給引擎來解決。在寫代碼層面 Dart 使用
,
來分割不同的Widget，這會造成在複雜的布局中，
()
文法嵌套極其複雜，配上VSCode的插件也看的眼花缭亂。
而Swift 雖然也是聲明式文法，但是仔細注意到，Swift的View組合并不是由
,
分割，而是由換行分割，在 Swift 中 函數調用是可以換行分割的。這樣的 DSL 對開發者的體驗更為友好，推測 SwiftUI 使用了類似标記的特征，在統一的時機去做布局。
這樣可以做到非常清晰的可讀性，并且代碼長度也大大縮短。不信你看Xcode 終于支援 miniMap, 在 Objective-C 時代我們的顯示器是沒有足夠空間給我們顯示MiniMap的。
SwiftUI 初體驗前言
但是 Xcode 有一點做的是不如 Flutter的 代碼格式化功能非常差，不過相信這點可以通過插件彌補。
Live reload
曾幾何時用戶端上的開發同學有多麼羨慕前端開發同學的 Live Reload，尤其是iOS平台，動辄連結5分鐘，極大的影響了開發效率，這次 蘋果官方 給開發者帶來了此項功能。
但 One More Thing ，在Xcode 中不僅僅可以通過代碼改變實時預覽，還可以通過編輯預覽生成代碼， This is amazing.
想象一下 在業務開發後期 UED同學和你校對視覺的時候是不是可以直接編輯UI生成代碼 ，而不需要重新編譯。
Mix With UIKit
任何一門新技術，對于目前的技術其實都是一次沖劑，對于舊的技術 雖然經過了很多年的曆史沉澱，有很多的積累，但是這些積累同時變成了包袱，如何背着包袱負重前行，是任何一門新技術都要考慮的問題，
顯然Swift UI 也考慮到了，目前官方給出的文檔中，SwiftUI 是可以和 UIKit 原有的體系很輕松的混合在一起。讓開發者可以漸進式的接入 SwiftUI。
Older iOS Version
官方聲稱 SwiftUI 目前僅支援 iOS 13.x 以上，很多APP 目前還在相容 iOS 9，看起來用上 Swift UI 還需要4年，但是觀察今年 蘋果的重大改變，包括，
iOS12以下 蜂窩網絡下載下傳可以大于 200M, 蘋果官方包優化大小 減少50% ，iOS 13以上甚至完全不限制在蜂窩網絡下下載下傳的大小，有理由相信 蘋果可以考慮把 SwiftUI 内置在 APP 包内，使開發者可以更輕易地相容低版本的作業系統。
生态暢想
從上面中可以看到 SwiftUI 做的很多事情和 Flutter 太過相似，目前 Swift UI 支援 Apple 全平台.
但是要知道的是 安卓是開源的 iOS 是閉源生态，Flutter 把手伸到 iOS 平台不太容易，但 SwiftUI 把手伸到安卓平台可就容易多了。
希望這張圖有機會變成.
淘寶基礎平台團隊正在舉行2019實習生(2020年畢業)和社招招聘，崗位有iOS Android用戶端開發工程師、Java研發工程師、C/C++研發工程師、前端開發工程師、算法工程師，歡迎投遞履歷至
[email protected]如果你想更詳細了解淘寶基礎平台團隊，歡迎觀看
團隊介紹視訊更多淘寶基礎平台團隊的技術分享，可關注淘寶技術微信公衆号AlibabaMTT