Monzo ist eine Bank und App, die digitale Finanzdienstleistungen anbietet. Das Ziel des Unternehmens ist es, Finanzen für alle verständlich zu machen. Das Designsystem von Monzo begann, sich von Material Design abzuweichen. Das Team wollte daher eine einfache Möglichkeit zum Erstellen und Pflegen benutzerdefinierter Komponenten, die sich ständig weiterentwickeln. Deshalb entschied es sich für Jetpack Compose.
Vorgehensweise
Mit Compose werden die Material Design-Komponenten als Schicht über den designsystemunabhängigen Basis-APIs bereitgestellt. Monzo hat anhand der Foundation APIs eine eigene Komponentenbibliothek erstellt und dabei die Material-Komponenten als Referenz verwendet. Er begann damit, jeweils einen Bildschirm zu migrieren, und verwendet jetzt Compose für alle neuen Bildschirme. Jetzt wird Compose von allen Android-Entwicklern in der Produktion verwendet: „Wir sind auf keine größeren Probleme gestoßen und waren daher zuversichtlich genug, es für einige ausgewählte neue Funktionen und schließlich für alle neuen Funktionen zu verwenden.“
Ergebnisse
Das Monzo-Team hat Komponenten erstellt, mit denen sich ganz einfach neue Bildschirme erstellen lassen: „Die von uns bereitgestellten Komponenten machen das Erstellen eines Bildschirms beim Lernen von Compose viel einfacher. Die slotbasierten APIs sind ein fantastisches Muster, mit dem wir ganz einfach größere Komponenten aus vielen kleinen Bausteinen erstellen können.“
Mit Compose konnte das Monzo-Team eine App mit höherer Qualität entwickeln und ansprechende Funktionen hinzufügen, die in ihren Sprints zuvor nicht möglich waren: „Ein Beispiel sind Animationen. Sie lassen sich in Compose so einfach hinzufügen, dass es kaum einen Grund gibt, Dinge nicht zu animieren, z. B. Farb-, Größen- oder Höhenänderungen. Diese „nice-to-have“-Animationen sind oft zu schwierig, um den Aufwand und die Komplexität im View-System zu rechtfertigen.“
Der Code ist jetzt kürzer und leichter zu lesen, zu verstehen und zu pflegen: „Deklarativer Code ist viel einfacher zu verstehen als Code, der eine veränderliche UI-Hierarchie manipuliert. Außerdem ist es einfacher, den Code zu verfolgen, wenn er in derselben Sprache und oft in derselben Datei geschrieben ist, anstatt zwischen Kotlin und XML hin- und herzuspringen. Und XML-Designs und -Stile sind noch gar nicht erwähnt. In Compose ist das Thema viel verständlicher. Unser Design besteht nur aus den von uns definierten Properties. Die Werte sind geräteübergreifend konsistent. Da es in Kotlin geschrieben ist, lässt es sich in der IDE ganz einfach durchsuchen und verfolgen.“
Mit Compose konnte das Monzo-Team seine App ganz einfach testen und dafür sorgen, dass sie barrierefrei ist: „Mit Compose konnten wir Tests schreiben, die weniger empfindlich sind, zuverlässig ausgeführt werden und uns ein hohes Maß an Vertrauen geben, dass unsere App tatsächlich für unsere Nutzer funktioniert. Durch die Tests mit dem semantischen System wird außerdem sichergestellt, dass unsere Bildschirme standardmäßig zumindest einigermaßen barrierefrei sind.“
Erste Schritte
Weitere Informationen zu Compose