Monzo 使用 Compose 建構更完善、品質更高的應用程式

Monzo 是提供數位金融服務的銀行和應用程式。他們的使命是為所有人帶來收益Monzo 的設計系統開始偏離質感設計,因此希望能輕鬆撰寫及維護持續發展的自訂元件,因此選用 Jetpack Compose。

具體措施

透過 Compose 使用質感設計元件,在各設計系統通用的基礎 API 上會以層形式提供質感設計元件。Monzo 使用 Material Design 元件做為參考資料,建構自己的元件程式庫。他們一開始先遷移畫面,現在則在所有新畫面中使用 Compose。現在,所有 Android 工程師都能在實際工作環境中使用 Compose:「我們沒有遇到任何重大問題,因此很有信心可以開始將 Compose 用於部分特定新功能,最終實現所有新功能。」

成果

Monzo 團隊建立可讓這些元件輕鬆建構新畫面的元件:「我們立即提供的元件可以在學習 Compose 的同時建構畫面,帶來更順暢的使用體驗。」以運算單元為基礎的 API 是一種絕佳的模式,讓我們可以透過許多小規模的構成要素輕鬆建構大型元件。」

借助 Compose,Monzo 團隊得以建構出品質更佳的應用程式,並加入了先前在衝刺期間無法實現的有趣功能:「其中一個例子就是動畫:在 Compose 中加入動畫太簡單,因此不應該為顏色/大小/高度變更等項目建立動畫效果。」這些「有吸引力」動畫,往往很難被 View 系統的精力和複雜性。」

這些程式碼現在較短,而且更容易閱讀、理解及維護:「宣告式程式碼比操控可變動 UI 階層的程式碼更易於理解要來得簡單多了。此外,如果所有程式碼都是以相同語言編寫,且通常都是相同的檔案,而不是在 Kotlin 和 XML 之間來回切換,這種方式也容易更輕鬆地進行追蹤。那就先不要 開始建立 XML 主題和樣式在 Compose 中,主題設定更容易理解。我們的主題只會包含我們定義的屬性,值在各種裝置上保持一致,而且因為在 Kotlin 中,所以很容易在 IDE 中搜尋和跟進。“

Compose 可讓 Monzo 團隊輕鬆測試應用程式,並確保應用程式可供存取:「Google Cloud 幫助我們編寫較不脆弱的測試、執行可靠的測試,並讓我們有信心在使用者手中也能實際執行應用程式。透過語意系統進行測試也可確保我們的畫面預設至少可存取。」

開始使用

進一步瞭解 Compose