Mercari 運用 Jetpack Compose 將 UI 開發效率提高 56%

Mercari 讓數百萬人可以選購幾乎任何商品。這間公司創立於 2013 年，現在是日本最大的智慧型手機專用 C2C 市集。Mercari 的客戶架構師團隊於 2020 年開始使用 Jetpack Compose，目標是使用可以長期擴充的新解決方案和技術，為新應用程式建構自家技術堆疊。

具體措施

Mercari 團隊需要在 Android View 中實作複雜的狀態管理和樣式設計系統，這是相當複雜的工作。使用 Jetpack Compose 後，他們不只能夠實作這個複雜的系統，進而減少開發各個畫面的時間。

Jetpack Compose 也協助團隊運用設計系統，為新的應用程式編寫 UI 程式碼，讓 UI 程式碼簡單明瞭。因此，該團隊能投入更多時間編寫畫面和商業邏輯，例如支援深色主題的實務支援。

此外，Mercari 團隊也編寫了一項概念驗證工具，用來整合 Figma 與設計系統，這個工具會自動根據元件設計產生 UI 程式碼。團隊表示，由於 Compose 的宣告性質，在開發這項工具時比較容易。

「一旦 Android 開發人員習慣編寫 Jetpack Compose 程式碼，他們就不會想回來。」- Mercari 的 Android 技術主管 Anthony Allan Conda

成果

在 Jetpack Compose 及其新設計系統之間，Mercari 得以用更少的程式碼編寫畫面。針對可無限捲動內容的螢幕 (常見用途)，實際程式碼其實減少了 56% 左右。因此，這些畫面可以在同一時間內編寫更多畫面，進而有更多時間編寫商業邏輯和程式碼的其他部分。

此外，這些 API 也能利用 UI 本身完成更多工作，例如加入動畫，以及使用符合直覺的 API，例如 AnimatedVisibility、Crossfade 和 Animatable。

Mercari 打算繼續在新應用程式中使用 Jetpack Compose，直到發布為止。他們的設計系統 (採用以 Jetpack Compose 編寫的 Android SDK) 也是專為 Mercari 中的多個應用程式所設計。

開始使用

進一步瞭解 Jetpack Compose。