Mercari steigert die Produktivität bei der Entwicklung der Benutzeroberfläche mit Jetpack Compose um 56 %

Mercari ermöglicht es Millionen von Menschen, fast alles zu kaufen und zu verkaufen. Das Unternehmen wurde 2013 in Japan gegründet und ist heute der größte C2C-Marktplatz für Smartphones in Japan. Das Client Architect Team von Mercari begann 2020 mit der Verwendung von Jetpack Compose, um moderne Lösungen und Technologien einzusetzen, die langfristig skalierbar sind, um den Tech-Stack für neue Anwendungen zu erstellen.

Vorgehensweise

Das Mercari-Team musste ein Designsystem mit komplexem Statusmanagement und Styling für Android-Ansichten implementieren – eine sehr komplexe Aufgabe. Mit Jetpack Compose konnten sie dieses komplexe System nicht nur implementieren, sondern auch die Entwicklungszeit für jeden Bildschirm verkürzen.

Jetpack Compose hat dem Team auch dabei geholfen, UI-Code für die neue App zu schreiben, der das Designsystem nutzt. So wurde der UI-Code prägnant und leicht verständlich. So kann das Team mehr Zeit für das Schreiben von Bildschirmen und Geschäftslogik aufwenden, z. B. für die praktische Unterstützung des dunklen Designs.

Außerdem hat das Mercari-Team ein Proof-of-Concept-Tool für die Integration von Figma in das Designsystem entwickelt, das automatisch UI-Code aus den Komponentendesigns generiert. Das Team gab an, dass die Entwicklung dieses Tools mit Compose aufgrund des deklarativen Ansatzes einfacher war.

„Wenn Android-Entwickler sich erst einmal an das Schreiben von Jetpack Compose-Code gewöhnt haben, möchten sie nicht mehr zurück.“ – Anthony Allan Conda, Android Tech Lead bei Mercari

Ergebnisse

Durch die Kombination von Jetpack Compose und dem neuen Designsystem konnte Mercari die Anzahl der Codezeilen für die Entwicklung von Benutzeroberflächen deutlich reduzieren. Bei Bildschirmen mit unendlich scrollbaren Inhalten – ein häufiger Anwendungsfall – konnten sie ihren Code um etwa 56 % reduzieren. So konnten sie in derselben Zeit mehr Bildschirme erstellen und hatten mehr Zeit, Geschäftslogik und andere Teile des Codes zu schreiben.

Außerdem konnten sie mehr mit der Benutzeroberfläche selbst tun, z. B. Animationen einbinden und intuitive APIs wie AnimatedVisibility, Crossfade und Animatable verwenden.

Mercari plant, Jetpack Compose in der neuen Anwendung bis zur Veröffentlichung weiter zu verwenden. Das Designsystem mit dem in Jetpack Compose geschriebenen Android SDK ist auch für die Verwendung mit mehreren Anwendungen innerhalb von Mercari konzipiert.

Erste Schritte

Weitere Informationen zu Jetpack Compose