Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 43 Anzeige

[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇

Herunterladen, um offline zu lesen

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Weitere von Shengyou Fan (20)

Aktuellste (20)

Anzeige

[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇

  1. 1. 范聖佑 (Shengyou Fan) JetBrains Developer Advocate JCConf Taiwan 2022 2022/10/07 開發桌⾯軟體的新選擇 Compose for Desktop
  2. 2. 範例程式碼 — 多平台 https://github.com/shengyou/lottery-machine-multiplatform Desktop 平台 https://github.com/shengyou/lottery-machine-desktop
  3. 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. 4. Compose 是什麼? — • Declarative UI 框架 • 使⽤函式來描述 UI 及狀態 • 完全使⽤ Kotlin 開發 • 提供 Typesafe APIs • 以 Skia 渲染畫⾯* * Compose for Desktop
  5. 5. Compose ⽣態系 — 多平台 Jetpack Compose 建立⼿機應⽤程式介⾯ Compose for Desktop 建立桌⾯應⽤程式介⾯ Compose for Web 建立網路應⽤程式介⾯
  6. 6. 範例:樂透抽獎機 — • 1~49 號碼球 • 以 7 x 7 矩陣排列 • 每按⼀次按鈕 • 隨機抽取 6 個 • 抽到的數字會變⾊
  7. 7. # 跟 Jetpack Compose ⼀樣的地⽅?
  8. 8. 可使⽤的 Jetpack Compose Package — • androidx.compose.runtime • androidx.compose.fundation • androidx.compose.ui • androidx.compose.material
  9. 9. ⚠ 跟 Jackpack Compose 不同的地⽅?
  10. 10. 不同運⾏環境 — • 較簡單的 Life Cycle • 較少的權限限制
  11. 11. 不同的 UI/UX — • 反思 Material Design 在 Desktop 上的適⽤性 • 社群製作的 Theme • 社群製作的 UI 元件庫
  12. 12. 不同的 UI/UX — • 反思 Material Design 在 Desktop 上的適⽤性 • 社群製作的 Theme • 社群製作的 UI 元件庫
  13. 13. 不同的 UI/UX — • 反思 Material Design 在 Desktop 上的適⽤性 • 社群製作的 Theme • 社群製作的 UI 元件庫
  14. 14. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  15. 15. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  16. 16. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  17. 17. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  18. 18. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  19. 19. Desktop 特有元件 — • Window • Menu* • Tooltip • Tray • Scrollbar* • Notification*
  20. 20. Desktop 特有事件 — • MouseEnter • MouExit • MouseMove • KeyDown • KeyUp • Keyboard Shortcut
  21. 21. 不同的開發⽣態系 pt.1 — • 沒有 ViewModel • 沒有 Navigation • 沒有 Room • 沒有 Hilt • 沒有 Firebase
  22. 22. 不同的開發⽣態系 pt.2 — • 但有完整的 JVM ⽣態: - ⽤ Decompose 取代 Navigation - ⽤ SqlDelight 取代 Room - ⽤ Dagger 取代 Hilt - ⽤ Arbor 取代 Timber
  23. 23. 不同的發佈管道 — • 有打包⽤的 Gradle Task - 各作業系統要分別⽤對應機器打包 • 沒有 Play Store - ⽤ update4j 做⾃動更新
  24. 24. % 說到底,好處在哪裡?
  25. 25. Compose for Desktop 的優勢 — • 單⼀語⾔ • 相同語法 • 成熟的 JVM ⽣態系 • 可跟 Swing 互⽤ • 更重要的是…
  26. 26. & 多平台共⽤ UI!
  27. 27. Compose Multiplatform — • android → Android 主程式 • common → 共⽤ UI 及商業邏輯 - androidMain → 平台專⽤實作 (actual) - commonMain → 共⽤核⼼ (expect) - desktopMain → 平台專⽤實作 (actual) • desktop → Desktop 主程式
  28. 28. Desktop SwiftUI Android Jetpack Compose iOS Compose for Desktop Web Compose for Web Kotlin Multiplatform — Common Kotlin UI Logic
  29. 29. Kotlin Multiplatform — Desktop SwiftUI Android Jetpack Compose iOS Compose for Desktop Web Compose for Web Common Kotlin UI Logic Compose Multiplatform
  30. 30. Kotlin Multiplatform — Desktop SwiftUI Android Jetpack Compose iOS Compose for Desktop Web Compose for Web Common Kotlin UI Logic Kotlin Multiplatform Mobile
  31. 31. ' Terminal UI?!!
  32. 32. % 有實際案例嗎?
  33. 33. JetBrains Toolbox App — • Compose for Desktop 的 Production 案例
  34. 34. 可讓 UI 在多平台共⽤ Compose Multiplatform 是開發桌⾯軟體的新選擇 Compose for Desktop 快速回顧 — Kotlin 是⼀個 多平台開發⽣態系
  35. 35. 了解更多 — Jetpack Compose 官網 Compose for Desktop 官網
  36. 36. 官⽅教學及範例 — • 必看資料夾 - tutorials - examples
  37. 37. 推薦影片 — What about…a desktop app? Introducing Compose for Desktop Compose Multiplatform 的故事
  38. 38. 多平台開發範例 — • 各平台開發範例 ⼀應俱全!
  39. 39. 2022 iThome 鐵⼈賽 — • [已完賽] 傳教⼠的 Compose for Desktop 耕讀筆記
  40. 40. 歡迎參加 Kotlin 社群 — Line 群 Telegram 群 加入討論群取得最新資訊 tw.kotlin.tips
  41. 41. Kotlin Collection 全⽅位解析攻略 — collection.kotlin.tips • 詳解 200+ Collection ⽅法 • 解析標準函式庫原始碼 • 實務範例 • 免費下載速查地圖
  42. 42. 關注粉絲⾴及頻道 — Coding 職⼈塾 Kraftsman
  43. 43. 開發桌⾯軟體的新選擇 Compose for Desktop shengyou.fan@jetbrains.com fb.me/shengyoufan shengyoufan @shengyou

×