TikTok mengurangi ukuran kode sebesar 58% dan meningkatkan performa aplikasi untuk fitur baru dengan Jetpack Compose

TikTok adalah platform video singkat global yang dikenal karena basis penggunanya yang besar dan fitur inovatif. Tim ini terus merilis update, eksperimen, dan fitur baru untuk penggunanya. Menghadapi tantangan untuk mempertahankan kecepatan sambil mengelola utang teknis, tim Android TikTok beralih ke Jetpack Compose.

Tim ingin mengaktifkan iterasi persyaratan produk yang lebih cepat dan berkualitas lebih tinggi. Dengan memanfaatkan Compose, tim berupaya meningkatkan efisiensi teknik dengan menulis lebih sedikit kode dan mengurangi beban kognitif, sekaligus mencapai performa dan stabilitas yang lebih baik. 

Menyederhanakan UI yang kompleks untuk mempercepat produktivitas developer

Halaman TikTok sering kali lebih kompleks daripada yang terlihat, berisi banyak persyaratan bersyarat berlapis. Kompleksitas ini sering kali menghasilkan hierarki View yang sulit dipertahankan dan tidak terstruktur secara optimal serta View yang terlalu banyak, yang menyebabkan penurunan performa karena peningkatan jumlah pengukuran.

Compose menawarkan solusi langsung untuk masalah struktural ini. 

Selain itu, strategi pengukuran Compose membantu mengurangi pajak ganda, sehingga performa pengukuran lebih mudah dioptimalkan. 

Untuk meningkatkan produktivitas developer, tim Sistem Desain pusat TikTok menyediakan library komponen untuk tim yang mengerjakan berbagai fitur aplikasi. Tim mengamati bahwa Pengembangan di Compose itu sederhana; memanfaatkan composable kecil sangat efektif, sementara menggabungkan blok UI besar dengan logika bersyarat sangat mudah dan memiliki overhead minimal.

Membangun jalur ke depan melalui migrasi strategis

Dengan mengadopsi Jetpack Compose secara strategis, TikTok dapat mengelola utang teknis, sekaligus terus berfokus untuk menciptakan pengalaman yang luar biasa bagi penggunanya. Kemampuan Compose untuk menangani logika bersyarat dengan bersih dan menyederhanakan komposisi memungkinkan tim mengurangi waktu pemuatan halaman hingga 78% di halaman baru atau yang ditulis ulang sepenuhnya. Peningkatan ini sebesar 20–30% dalam kasus yang lebih kecil, dan 70–80% untuk penulisan ulang lengkap dan fitur baru. Mereka juga dapat mengurangi ukuran kode sebesar 58%, jika dibandingkan dengan fitur yang sama yang dibuat di View. Tim juga membagikan beberapa hal yang dipelajari:  

Strategi keseluruhan tim TikTok adalah memigrasikan perjalanan pengguna tertentu secara bertahap. Hal ini memberi mereka peluang untuk bermigrasi, mengonfirmasi manfaat yang dapat diukur, lalu menskalakan ke lebih banyak layar. Mereka mulai menggunakan Compose untuk menyederhanakan struktur keseluruhan dalam fitur kode QR dan melihat peningkatannya. Tim kemudian memperluas migrasi ke pengalaman Login dan Pendaftaran. 

Tim membagikan beberapa hal tambahan yang dipelajari:  

Saat memeriksa performa selama migrasi, tim TikTok menemukan bahwa penggunaan banyak ComposeView kecil untuk mengganti elemen di dalam satu ViewHolder, menyebabkan overhead komposisi. Mereka mencapai hasil yang lebih baik dengan memperluas migrasi untuk menggunakan satu ComposeView untuk seluruh ViewHolder.

Saat memigrasikan Fragmen di dalam ViewPager, yang memiliki logika tinggi kustom dan logika bersyarat untuk menyembunyikan dan menampilkan UI berdasarkan eksperimen, performanya tidak terpengaruh. Dalam hal ini, memigrasikan ViewPager ke Composable memberikan performa yang lebih baik daripada memigrasikan Fragmen. 

Jun Shen sangat menyukai Compose karena "mengurangi jumlah kode yang diperlukan untuk pengembangan fitur, meningkatkan kemampuan pengujian, dan mempercepat pengiriman". Tim berencana untuk terus meningkatkan adopsi Compose, menjadikannya framework pilihan dalam jangka panjang. Jetpack Compose terbukti menjadi solusi yang efektif untuk meningkatkan pengalaman developer dan metrik produksi dalam skala besar.

Mulai Menggunakan Jetpack Compose

Pelajari lebih lanjut cara Jetpack Compose dapat membantu tim Anda.