Monzo 使用 Compose 建構更完善、品質更高的應用程式
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
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 輕鬆測試應用程式，確保應用程式可供存取：「這有助於我們編寫較不脆弱的測試，可靠地執行測試，並讓我們很有信心，確保應用程式在使用者手中正常運作。透過語意系統進行測試，也能確保我們的畫面至少預設具備合理的可存取性。」
開始使用
進一步瞭解「撰寫」。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2021-07-28 (世界標準時間)。
[null,null,["上次更新時間：2021-07-28 (世界標準時間)。"],[],[],null,["# Monzo builds a more robust and higher quality app with Compose\n\n[Monzo](https://monzo.com/) is a bank and app offering\ndigital financial services. Their mission is to make money work\nfor everyone. Monzo's design system started to deviate from Material Design so\nthey wanted an **easy way to write and maintain custom components** that are\nconstantly evolving---so they chose Jetpack Compose.\n\nWhat they did\n-------------\n\nWith Compose the Material Design components are provided as a layer over the\ndesign-system-agnostic foundation APIs. Monzo used the foundation APIs to build\ntheir own component library, using the Material components as reference. They\nstarted by migrating a screen at a time, now using Compose in all new screens.\nNow, Compose is used in production, by all of the Android engineers: *\"We\ndidn't encounter any major problems, and so we felt confident enough to start\nusing it for some select new features, and eventually for all new features.\"*\n\nResults\n-------\n\nThe Monzo team created components that enable them to easily build new\nscreens: *\"The components we provide out of the box make building a screen\nwhile learning Compose a **much smoother experience**. The slot-based APIs is a\nfantastic pattern that makes it really easy for us to build larger components\nout of lots of small building blocks.\"*\n\nWith Compose, the Monzo team were able to build a higher quality app, adding\ndelightful features that previously they couldn't get to in their\nsprints: *\"One example is animations - they're so easy to add in Compose that\n**there's very little reason not to animate things** like color/size/elevation\nchanges. These 'nice to have' animations are often too difficult to be worth\nthe effort and complexity in the View system.\"*\n\nTheir code is now shorter, and it's easier to read, understand, and\nmaintain: *\"Declarative code is **much easier to reason about** than code that\nmanipulates a mutable UI hierarchy. It's also much **easier to trace through code**\nwhen it's all written in the same language and often the same file, rather than\njumping back and forth between Kotlin and XML. Don't even get me started on XML\nthemes and styles! **Theming is a lot easier to understand** in Compose. Our theme\nonly consists of the properties we define, the values are consistent across\ndevices, and because it's in Kotlin it is really easy to search and follow in\nthe IDE.\"*\n\nCompose allowed the Monzo team to easily test their app and ensure their app is\naccessible: *\"It's helped us **write tests that are less fragile, run reliably,\nand give us a lot of confidence** that our app actually works in the hands of our\nusers. Testing through the semantics system also ensures that our screens are\nat least reasonably **accessible by default**.\"*\n\nGet started\n-----------\n\nLearn more about [Compose](/jetpack/compose)."]]
