Monzo 使用 Compose 构建更强大、更优质的应用
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Monzo 是一家银行,并提供数字金融服务。他们的使命是向每个人传授生财之道。Monzo 的设计系统开始偏离 Material Design,因此他们希望找到一种简单的方法来编写和维护不断发展的自定义组件,最终他们选择了 Jetpack Compose。
策略
在 Compose 中,Material Design 组件作为一层位于与设计系统无关的基础 API 之上。Monzo 使用基础 API 构建了自己的组件库,并以 Material 组件作为参考。他们最初一次迁移一个界面,现在所有新界面都使用 Compose。
现在,所有 Android 工程师都在生产环境中使用 Compose:“我们没有遇到任何重大问题,因此我们有足够的信心开始将其用于一些精选的新功能,最终用于所有新功能。”
结果
Monzo 团队创建了可帮助他们轻松构建新界面的组件:“我们提供的开箱即用型组件让您在学习 Compose 的同时,更顺畅地构建界面。基于 slot 的 API 是一种出色的模式,可让我们轻松地使用许多小型构建块来构建大型组件。”
借助 Compose,Monzo 团队能够构建更高质量的应用,并添加之前在冲刺阶段无法实现的出色功能:“举个例子,动画在 Compose 中非常容易添加,因此几乎没有理由不为颜色/大小/高度变化等内容添加动画。这些“锦上添花”的动画往往过于复杂,不值得在视图系统中投入相应精力和复杂性。”
他们的代码现在更短,并且更易于阅读、理解和维护:“与操纵可变界面层次结构的代码相比,声明式代码更易于推断。当所有代码都使用同一种语言编写并且通常位于同一文件中(而不是在 Kotlin 和 XML 语言之间来回切换)时,跟踪代码也变得更容易。我甚至不想再提 XML 主题和样式了!在 Compose 中,主题设置更容易理解。我们的主题仅包含我们定义的属性,这些属性的值在不同设备上保持一致,并且由于它是用 Kotlin 编写的,因此在 IDE 中非常容易搜索和跟踪。”
借助 Compose,Monzo 团队可以轻松测试其应用并确保应用可访问:“它帮助我们编写了不太容易出错、运行可靠且让我们非常有信心的应用测试,确保我们的应用在用户手中正常运行。通过语义系统进行测试还可以确保我们的屏幕至少在默认情况下具有合理的无障碍功能。”
开始使用
详细了解 Compose。
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2021-07-28。
[null,null,["最后更新时间 (UTC):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)."]]