Monzo 是一家銀行和應用程式,提供數位金融服務。他們的使命是讓所有人都享有金融服務。Monzo 的設計系統開始與 Material Design 產生差異,因此他們希望輕鬆編寫及維護不斷演進的自訂元件,於是選擇了 Jetpack Compose。
具體措施
在 Compose 中,Material Design 元件會以圖層的形式,提供設計系統無關的基礎 API。Monzo 運用基礎 API 建構自己的元件庫,並以 Material 元件做為參考。他們一開始是逐一遷移畫面,現在所有新畫面都使用 Compose。現在,所有 Android 工程師都在正式版中使用 Compose:「我們沒有遇到任何重大問題,因此有信心開始將其用於部分精選新功能,最終用於所有新功能。」
結果
Monzo 團隊建立的元件可讓他們輕鬆建構新畫面:「我們提供的現成元件讓建構畫面時的 Compose 學習體驗更加順暢。「以 slot 為基礎的 API 是一種絕佳模式,可讓我們輕鬆地以許多小型建構區塊建構大型元件。」
Monzo 團隊運用 Compose 建構出更高品質的應用程式,並加入先前在衝刺階段無法實現的實用功能:「舉例來說,Compose 讓動畫的加入變得非常簡單,幾乎沒有理由不為顏色/大小/高度變化等項目加入動畫。這些『錦上添花』的動畫通常太難製作,不值得在 View 系統中投入心力,也不值得這麼複雜。」
他們的程式碼現在更短,也更容易閱讀、瞭解及維護:「相較於會操控可變動 UI 層級的程式碼,聲明式程式碼更容易推論。此外,當程式碼全部使用相同語言編寫且通常在相同的檔案中時,就會更容易直接追蹤程式碼,而不是在 Kotlin 和 XML 之間來回切換。XML 主題和樣式更是讓我一頭霧水!Compose 的主題設定更容易理解。我們的主題只包含我們定義的屬性,值在各裝置間保持一致,而且由於主題是以 Kotlin 撰寫,因此在 IDE 中搜尋及追蹤非常容易。」
Monzo 團隊運用 Compose 輕鬆測試應用程式,確保應用程式可供存取:「這有助於我們編寫較不脆弱的測試,可靠地執行測試,並讓我們很有信心,確保應用程式在使用者手中正常運作。透過語意系統進行測試,也能確保我們的畫面至少預設可供存取。」