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

TikTok adalah platform video pendek global yang dikenal dengan basis penggunanya yang besar dan fitur-fiturnya yang 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 engineering 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 rumit daripada yang terlihat, karena berisi banyak persyaratan bersyarat berlapis. Kompleksitas ini sering kali menghasilkan hierarki View yang sulit dipertahankan dan tidak terstruktur secara optimal serta penyusunan View yang berlebihan, yang menyebabkan penurunan performa karena peningkatan jumlah proses pengukuran.

Compose menawarkan solusi langsung untuk masalah struktural ini. 

Selain itu, strategi pengukuran Compose membantu mengurangi pajak ganda, sehingga mempermudah pengoptimalan performa pengukuran. 

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 mengatasi 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 mencapai pengurangan waktu pemuatan halaman hingga 78% di halaman baru atau yang ditulis ulang sepenuhnya. Peningkatan ini mencapai 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 Views. Tim juga membagikan beberapa pembelajaran:  

Strategi keseluruhan tim TikTok adalah memigrasikan perjalanan pengguna tertentu secara bertahap. Hal ini memberi mereka kesempatan untuk melakukan migrasi, mengonfirmasi manfaat yang terukur, lalu menskalakan ke lebih banyak layar. Mereka mulai menggunakan Compose untuk menyederhanakan struktur keseluruhan dalam fitur kode QR dan melihat peningkatannya. Kemudian, tim memperluas migrasi ke pengalaman Login dan Daftar. 

Tim membagikan beberapa pembelajaran tambahan:  

Saat memeriksa performa selama migrasi, tim TikTok menemukan bahwa penggunaan banyak ComposeView kecil untuk menggantikan 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 Fragment 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 berperforma lebih baik daripada memigrasikan Fragment. 

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 mereka dalam skala besar.

Mulai Menggunakan Jetpack Compose

Pelajari lebih lanjut cara Jetpack Compose dapat membantu tim Anda.