爲什麼除了Flutter之外，我們還需要另一個跨平臺開發框架？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"編譯｜核子可樂、燕珊"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不久前，谷歌正式"},{"type":"link","attrs":{"href":"https:\/\/android-developers.googleblog.com\/2021\/07\/jetpack-compose-announcement.html","title":"xxx","type":null},"content":[{"type":"text","text":"推出"}]},{"type":"text","text":"Jetpack Compose 1.0版本。近日，JetBrains在此基礎上發佈了 "},{"type":"link","attrs":{"href":"https:\/\/github.com\/JetBrains\/compose-jb","title":"xxx","type":null},"content":[{"type":"text","text":"Compose Multiplatform"}]},{"type":"text","text":" Alpha版本，旨在將 Compose 擴展到桌面和 Web 端。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose Multiplatform 由 Compose for Desktop 和 Compose for Web組成，通過 Kotlin Multiplatform 支持許多不同的平臺。其中，Compose Desktop 採用Google的"},{"type":"link","attrs":{"href":"https:\/\/skia.org\/","title":"xxx","type":null},"content":[{"type":"text","text":"Skia"}]},{"type":"text","text":"圖形庫，來實現在 Windows、macOS 和 Linux 上的 UI 繪製，藉此在所有支持的操作系統中提供統一的體驗，類似於 Flutter 的做法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"根據 Kotlin 團隊的說法，相比起 Electron 框架，Compose Multiplatform 在內存消耗、安裝大小和 UI 渲染性能等方面將有更明顯的優勢。隨着 Alpha 版本的發佈，Compose Multiplatform 還收穫了新的 Android Studio 插件，包括對在 IDE 中顯示組件預覽的支持以及許多附加功能。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我們希望通過本文幫助大家進一步瞭解Compose的跨平臺能力，以及JetBrains將Compose從Android擴展到這些其他平臺背後的主要驅動力是什麼。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"基於Jetpack Compose 1.0"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"由谷歌打造的Jetpack Compose是一款用於在Android應用程序之內構建用戶界面的官方框架，上週剛剛發佈1.0版本。與此同時，Android Studio代號“極狐”的首個穩定版2020.3.1也正式亮相。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"儘管纔剛迎來1.0，但谷歌表示“目前Play Store中已經有超過2000款應用程序在使用Compose——更重要的是，就連Play Store這款應用本身也在使用Compose。”谷歌方面還表示，“我們一直在與一些頂級應用的開發人員進行合作，他們的反饋和支持幫助我們使 1.0 版本更加強大。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/6b\/6becc672a3c820912d445fa44436379b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose是一套"},{"type":"text","marks":[{"type":"strong"}],"text":"聲明式"},{"type":"text","text":"框架，其最大特色在於擺脫了傳統Android方法中的層級結構，或者說佈局與控制樹。Compose用戶界面通過編寫帶有@Composable註釋的函數（用於描述屏幕狀態）來定義，也就是所謂函數生成用戶界面。谷歌Android開發團隊解釋道，“隨着應用程序狀態的變化，你的UI也會自動更新，這讓快速構建UI變得更加簡單。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9a\/9af197b6d9d32f3adc3073a19a85496d.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"Jetpack Compose for Android迎來1.0版本"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose基於Kotlin開發，而Kotlin與Android Studio（即官方指定的Android IDE）均來自開發工具廠商JetBrains。雖然Jetpack Compose專爲Android打造（與谷歌的Flutter框架不同），"},{"type":"text","marks":[{"type":"strong"}],"text":"但JetBrains公司堅信Compose完全能夠獲得跨平臺能力"},{"type":"text","text":"。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Compose for Desktop: 這只是開始"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose Multiplatform可以說是該框架面向MacOS、Linux、Windows以及Web開設的一個端口，目前剛剛發佈1.0 Alpha版本。雖然尚處於早期開發階段，但JetBrains表示，其已經“爲開發人員帶來能夠基本安全使用的穩定API”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"TheRegister就此事詢問了JetBrains公司Compose項目負責人Nikolay Igotti，希望瞭解爲什麼該公司在擁有了已經廣泛應用於IntelliJ IDEA IDE及多種豐富變體的桌面應用程序跨平臺Java框架之外，還要費力開發Compose for Desktop。Igotti的回答是，“舊有Java框架基本上就是修改版的Swing。Swing屬於默認JDK UI框架，Swing和AWT（Abstract Windows Toolkit，抽象窗口工具包）。Compose則完全是另一碼事，當然我們也在設計中考慮到了互操作性需求……Swing這套框架太陳舊了，最早出現在上世紀九十年代末。多年來人們對於UI的設計思路已經天翻地覆，Swing顯然滿足不了要求了。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/82\/82a0483b1b416474346b162fb0efa452.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"JetBrains IDE中的Compose for Desktop項目"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose與Swing有一個比較大的共同點：與其他使用本機控件的跨平臺框架，比如例如Java的SWT（Standard Widget Toolkit）以及微軟的Xamarin有所不同，它們選擇自主繪製控件。Compose使用的Skia開源圖形庫，也在谷歌Chrome、Flutter及其他衆多框架當中得到廣泛應用。那這是否意味着Compose應用程序將沒有自己的原生外觀？對此，Igotti的迴應是，“這取決於開發人員的選擇，取決於他們如何爲應用程序設置主題。在這方面，Compose的情況與Flutter等其他框架沒什麼區別。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那Compose for Desktop應用程序是否依賴於JVM（Java Virtual Machine）運行？Igotti表示，“我們也知道，JVM應用程序的發佈情況可能比較棘手。因此我們提供自己的Gradle插件，其使用"},{"type":"link","attrs":{"href":"https:\/\/openjdk.java.net\/jeps\/343","title":"xxx","type":null},"content":[{"type":"text","text":"jpackage"}]},{"type":"text","text":"與Jlink以JVM應用程序爲基礎製作原生應用程序。Mac的.dmg、Windows的MSI、Linux的deb包等均可實現，大家用不着擔心JVM。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"也就是說，開發成果將會是一款被精心包裹起來的JVM應用程序。JetBrains還有一款用於解決這個問題的"},{"type":"link","attrs":{"href":"https:\/\/kotlinlang.org\/docs\/native-overview.html","title":"xxx","type":null},"content":[{"type":"text","text":"Kotlin\/Native編譯器"}]},{"type":"text","text":"，“預計將在未來發布，或者專門用於桌面開發。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/64\/64af1b033d122cde1ad090ef4d6f217c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"對應用程序的另一種思考方式"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那Web應用程序方面呢？Igotti迴應稱，“我們使用Kotlin\/JS編譯器。”Compose的Web版本不如桌面版先進，說明文檔中也警告稱“API尚未最終確定，預計會發生重大變化。”此外，雖然Web版本確實使用Compose模型，但API卻完全不同，而且會使用HTML與CSS。所以，Web版與Compose for Desktop之間能夠共享的代碼應該比較少。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"據Igotti介紹，“Compose代表着一種不同的應用程序思考方式。狀態即UI的真實來源，而UI本身是無狀態的，其表達永遠由狀態計算得出。在這方面，Compose for Web採用一組相同的原語，完全相同的狀態管理思路。但是對於具體的小部件集合與排列方式，Web版與桌面版之間確實無法互通。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"說到這裏，爲什麼要把Compose for Android擴展到多種其他平臺之上？“Compose的目標受衆主要分爲三類。首先是使用Kotlin與Compose的Android開發人員，他們希望把自己的開發成果交付至其他平臺；其二是純Kotlin開發人員，他們希望以‘一次編寫、隨處運行’的方式開發新的應用程序；第三則是那些不太熟悉Kotlin或者Compose，但又希望開發出精美UI的用戶，我們希望能爲他們提供實現目標的工具。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Igotti並沒有給出具體的發佈日期，但表示自己希望Beta版能在今年秋天發佈，“我們也希望能在今年之內推出1.0版本。”項目本身是完全開源的，“二十一世紀了，框架在大多數人們心目中就不應該收費。我們只是想開發一款長期缺失的軟件”，補足JetBrains當前商業模式中的工具鏈。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"需要注意的是，Compose並不提供可視化設計器。Igotti提到，“大多數開發者都不喜歡圖形UI構建器”，聲明式UI與設計內容預覽纔是最受歡迎的解決思路。“因此我們提供預覽機制，您可以在composable函數上添加註釋，並在無需運行應用程序的前提下快速預覽。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JetBrains認爲目前工具市場對於桌面應用程序開發者的支持並不到位，公司組織的內部開發者調查也在一定程度上證實了這個結論。“桌面開發現在有點‘二等公民’的意思……這可是個需要高度關注的小衆市場。”"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼，JetBrains會在自己的其他工具中使用Compose嗎？事實上，他們的JetBrains Toolbox（用於管理已安裝的IDE）已經在使用Compose，但Igotti表示短時間內Compose還無法取代IntelliJ IDEA等現有框架。“編輯器是其中最複雜也最重要的組件，經歷了20年的發展演進，我們幾乎不可能在中途進行重寫了。無論是JetBrains還是我個人，都不打算強迫每個人都轉而使用Compose。我們的目標是爲原有框架選項滿足不了的用戶提供新的解決方案。”"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"寫在最後"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那麼，爲什麼除了Flutter之外，我們還需要另一個跨平臺框架？雖然谷歌的Flutter最開始主要面向移動設備，但現在也開始向桌面及iOS進軍，甚至比Compose還搶先了一步。不過，根據StackOverflow的"},{"type":"link","attrs":{"href":"https:\/\/insights.stackoverflow.com\/survey\/2021","title":"xxx","type":null},"content":[{"type":"text","text":"最新調查"}]},{"type":"text","text":"，"},{"type":"text","marks":[{"type":"strong"}],"text":"Flutter使用的語言爲Dart；儘管Dart語言的人氣正在增長（正是受到Flutter的推動），但仍然無法與Kotlin相提並論。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更重要的是，Compose的發展勢頭頗爲強勁——其GitHub repo拿下5000多個星，上報問題的數量也非常多。雖然諸多問題代表着“麻煩”不斷，但也恰恰說明了這是開發者們所熱切關注的方向。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Compose代表着一種獨特的UI構建方法，也許最期待Compose跨平臺功能的受衆，正是那些曾在Android上使用過它、又特別喜歡這種UI構建體驗的開發者。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"想要進一步瞭解Compose，國內 Android 開發者可訪問以下鏈接查看中文手冊："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/compose.net.cn\/","title":"","type":null},"content":[{"type":"text","text":"https:\/\/compose.net.cn\/"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"延伸閱讀："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https:\/\/www.theregister.com\/2021\/08\/06\/compose_for_desktop_kotlin_framework\/","title":"","type":null},"content":[{"type":"text","text":"https:\/\/www.theregister.com\/2021\/08\/06\/compose_for_desktop_kotlin_framework\/"}]}]}]}