自從 Android 團隊推出 Jetpack Compose 後，為 UI 開發打開了一條新路線。既然 Jetpack Compose 是由 Kotlin 打造，支援多平台就變得可能。透過 JetBrains 與 Google 兩方的團隊合作，Compose for Desktop 成為開發桌面軟體的新選擇。在這場分享裡，將模擬桌面軟體的開發，使用 Declarative 的風格實作 UI，並討論 Desktop 與 Mobile 的平台差異，以及開發過程中需要注意的細節。聽完這場分享後，會對 Compose for Desktop 的應用及實作方式有基本的認識。

1. 范聖佑 (Shengyou Fan)
JetBrains Developer Advocate
JCConf Taiwan 2022
2022/10/07
開發桌⾯軟體的新選擇
Compose for Desktop

2. 範例程式碼
—
多平台 https://github.com/shengyou/lottery-machine-multiplatform
Desktop 平台 https://github.com/shengyou/lottery-machine-desktop

3. Compose 發展史
—
Jim Sproch 帶領團
隊開始著⼿研發
Jetpack Compose
May
2017
Google I/O宣佈⽀
援以 Kotlin 開發
Android
May
2019
Google I/O宣佈
Android 開發將以
Kotlin 優先
May
2020
Nikolay Igotti 帶領
團隊將 Compose 變
成 Multiplatform
September
2021
Jetpack Compose
發佈 1.0 版
July
Compose
Multiplatfom
發佈 1.0 版
December

4. Compose 是什麼？
—
• Declarative UI 框架
• 使⽤函式來描述 UI 及狀態
• 完全使⽤ Kotlin 開發
• 提供 Typesafe APIs
• 以 Skia 渲染畫⾯*
* Compose for Desktop

5. Compose ⽣態系
—
多平台
Jetpack Compose
建立⼿機應⽤程式介⾯
Compose for Desktop
建立桌⾯應⽤程式介⾯
Compose for Web
建立網路應⽤程式介⾯

6. 範例：樂透抽獎機
—
• 1~49 號碼球
• 以 7 x 7 矩陣排列
• 每按⼀次按鈕
• 隨機抽取 6 個
• 抽到的數字會變⾊

7. #
跟 Jetpack Compose ⼀樣的地⽅？

8. 可使⽤的 Jetpack Compose Package
—
• androidx.compose.runtime
• androidx.compose.fundation
• androidx.compose.ui
• androidx.compose.material

9. ⚠
跟 Jackpack Compose 不同的地⽅？

10. 不同運⾏環境
—
• 較簡單的 Life Cycle
• 較少的權限限制

11. 不同的 UI/UX
—
• 反思 Material Design 在
Desktop 上的適⽤性
• 社群製作的 Theme
• 社群製作的 UI 元件庫

12. 不同的 UI/UX
—
• 反思 Material Design 在
Desktop 上的適⽤性
• 社群製作的 Theme
• 社群製作的 UI 元件庫

13. 不同的 UI/UX
—
• 反思 Material Design 在
Desktop 上的適⽤性
• 社群製作的 Theme
• 社群製作的 UI 元件庫

14. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

15. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

16. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

17. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

18. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

19. Desktop 特有元件
—
• Window
• Menu*
• Tooltip
• Tray
• Scrollbar*
• Notification*

20. Desktop 特有事件
—
• MouseEnter
• MouExit
• MouseMove
• KeyDown
• KeyUp
• Keyboard Shortcut

21. 不同的開發⽣態系 pt.1
—
• 沒有 ViewModel
• 沒有 Navigation
• 沒有 Room
• 沒有 Hilt
• 沒有 Firebase

22. 不同的開發⽣態系 pt.2
—
• 但有完整的 JVM ⽣態：
- ⽤ Decompose 取代 Navigation
- ⽤ SqlDelight 取代 Room
- ⽤ Dagger 取代 Hilt
- ⽤ Arbor 取代 Timber

23. 不同的發佈管道
—
• 有打包⽤的 Gradle Task
- 各作業系統要分別⽤對應機器打包
• 沒有 Play Store
- ⽤ update4j 做⾃動更新

24. %
說到底，好處在哪裡？

25. Compose for Desktop 的優勢
—
• 單⼀語⾔
• 相同語法
• 成熟的 JVM ⽣態系
• 可跟 Swing 互⽤
• 更重要的是…

26. &
多平台共⽤ UI！

27. Compose Multiplatform
—
• android → Android 主程式
• common → 共⽤ UI 及商業邏輯
- androidMain → 平台專⽤實作 (actual)
- commonMain → 共⽤核⼼ (expect)
- desktopMain → 平台專⽤實作 (actual)
• desktop → Desktop 主程式

28. Desktop
SwiftUI
Android
Jetpack Compose
iOS
Compose for Desktop
Web
Compose for Web
Kotlin Multiplatform
—
Common Kotlin
UI
Logic

29. Kotlin Multiplatform
—
Desktop
SwiftUI
Android
Jetpack Compose
iOS
Compose for Desktop
Web
Compose for Web
Common Kotlin
UI
Logic
Compose Multiplatform

30. Kotlin Multiplatform
—
Desktop
SwiftUI
Android
Jetpack Compose
iOS
Compose for Desktop
Web
Compose for Web
Common Kotlin
UI
Logic
Kotlin Multiplatform Mobile

31. ' Terminal UI?!!

32. %
有實際案例嗎？

33. JetBrains Toolbox App
—
• Compose for Desktop
的 Production 案例

34. 可讓 UI 在多平台共⽤
Compose Multiplatform
是開發桌⾯軟體的新選擇
Compose for Desktop
快速回顧
—
Kotlin 是⼀個
多平台開發⽣態系

35. 了解更多
—
Jetpack Compose 官網 Compose for Desktop 官網

36. 官⽅教學及範例
—
• 必看資料夾
- tutorials
- examples

37. 推薦影片
—
What about…a desktop
app?
Introducing Compose
for Desktop
Compose Multiplatform
的故事

38. 多平台開發範例
—
• 各平台開發範例
⼀應俱全！

39. 2022 iThome 鐵⼈賽
—
• [已完賽] 傳教⼠的
Compose for Desktop
耕讀筆記

40. 歡迎參加 Kotlin 社群
—
Line 群 Telegram 群
加入討論群取得最新資訊
tw.kotlin.tips

41. Kotlin Collection 全⽅位解析攻略
—
collection.kotlin.tips
• 詳解 200+ Collection ⽅法
• 解析標準函式庫原始碼
• 實務範例
• 免費下載速查地圖

42. 關注粉絲⾴及頻道
—
Coding 職⼈塾
Kraftsman

43. 開發桌⾯軟體的新選擇
Compose for Desktop
shengyou.fan@jetbrains.com
fb.me/shengyoufan
shengyoufan
@shengyou