Monzo は、デジタル金融サービスを提供する銀行とアプリです。彼らの使命はすべての人のために収益を 生むことです。Monzo のデザイン システムは、マテリアル デザインから逸脱し始めたため、絶えず進化するカスタム コンポーネントを簡単に作成、管理できる方法を模索し、Jetpack Compose を選択しました。
Eyecon の取り組み
Compose では、マテリアル デザイン コンポーネントは、デザイン システムに依存しない基盤 API を超えるレイヤとして提供されます。Monzo は基盤 API を使用して、マテリアル コンポーネントを参照として独自のコンポーネント ライブラリを作成しました。チームは 1 画面ずつ移行することから始め、現在はすべての新しい画面で Compose を使用しています。現在、Compose はすべての Android エンジニアによって本番環境で使用されています。「大きな問題は発生していなかったので、自信を持って一部の新機能に使い始め、最終的にはすべての新機能に使用できるようになりました。」
結果
Monzo のチームは、新しい画面を簡単に構築できるコンポーネントを作成しました。「すぐに提供されているコンポーネントにより、Compose を学習しながら画面を作成できるので、はるかにスムーズになります。スロットベース API の優れたパターンにより、多くの小さな構成要素から大きなコンポーネントを簡単に構築できます。」
Compose により、Monzo のチームは、これまでスプリントではできなかった魅力的な機能を追加して、高品質のアプリを作成することができました。「たとえば、アニメーションは Compose で簡単に追加できるため、色/サイズ/エレベーションの変更など、アニメーション化する理由はほとんどありません。このような「あったら便利」なアニメーションは、多くの場合、View システムの労力と複雑さに見合うほどの難しさを誇ります。」
コードが短くなり、読みやすく、理解やメンテナンスが簡単になりました。「宣言型のコードは、変更可能な UI 階層を操作するコードよりも、はるかに簡単に推論できます。また、Kotlin と XML を行き来することなく、すべて同じ言語で、多くの場合同じファイルに記述されていれば、コードを通じてトレースするのも容易です。XML のテーマとスタイルに手を出す必要はありません！Compose のテーマ設定がわかりやすくなりました。このテーマは、定義したプロパティのみで構成されており、値はデバイス間で一貫しています。また、Kotlin なので、IDE で簡単に検索して確認することができます。」
Compose により、Monzo のチームはアプリを簡単にテストして、アプリにアクセスできることを確認できました。「脆弱で信頼性の高いテストを作成でき、アプリがユーザーの手元で実際に動作するという自信が持てるようになりました。セマンティクス システムを使用したテストにより、少なくともデフォルトで画面にアクセスできることが合理的に確認されます。」
始める
Compose の詳細を確認する。