TikTok giảm 58% kích thước mã và cải thiện hiệu suất của ứng dụng cho các tính năng mới bằng Jetpack Compose

TikTok là một nền tảng video ngắn toàn cầu, nổi tiếng với cơ sở người dùng khổng lồ và các tính năng sáng tạo. Nhóm này liên tục phát hành các bản cập nhật, thử nghiệm và tính năng mới cho người dùng. Đối mặt với thách thức duy trì tốc độ trong khi quản lý nợ kỹ thuật, nhóm Android của TikTok đã chuyển sang sử dụng Jetpack Compose.

Nhóm muốn lặp lại các yêu cầu về sản phẩm nhanh hơn và chất lượng cao hơn. Bằng cách tận dụng Compose, nhóm đã tìm cách cải thiện hiệu quả kỹ thuật bằng cách viết ít mã hơn và giảm tải nhận thức, đồng thời đạt được hiệu suất và độ ổn định tốt hơn. 

Đơn giản hoá giao diện người dùng phức tạp để tăng năng suất cho nhà phát triển

Các trang TikTok thường phức tạp hơn so với vẻ ngoài, chứa nhiều yêu cầu có điều kiện theo lớp. Sự phức tạp này thường dẫn đến hệ phân cấp view có cấu trúc khó duy trì, không tối ưu và lồng Chế độ xem quá mức, khiến hiệu suất bị giảm do số lượt đo lường tăng lên.

Compose cung cấp giải pháp trực tiếp cho vấn đề về cấu trúc này. 

Hơn nữa, chiến lược đo lường của Compose giúp giảm thuế kép, giúp dễ dàng tối ưu hoá hiệu suất đo lường. 

Để nâng cao năng suất của nhà phát triển, nhóm Hệ thống thiết kế trung tâm của TikTok cung cấp một thư viện thành phần cho các nhóm phát triển nhiều tính năng của ứng dụng.  Nhóm nhận thấy rằng việc phát triển trong Compose rất đơn giản; việc tận dụng các thành phần kết hợp nhỏ mang lại hiệu quả cao, trong khi việc kết hợp các khối giao diện người dùng lớn với logic có điều kiện vừa đơn giản vừa tốn ít tài nguyên.

Xây dựng lộ trình phát triển thông qua việc di chuyển chiến lược

Bằng cách áp dụng Jetpack Compose một cách có chiến lược, TikTok có thể giải quyết nợ kỹ thuật, đồng thời tiếp tục tập trung vào việc tạo ra trải nghiệm tuyệt vời cho người dùng. Khả năng xử lý logic có điều kiện một cách rõ ràng và đơn giản hoá quá trình kết hợp của Compose đã giúp nhóm giảm đến 78% thời gian tải trang trên các trang mới hoặc trang được viết lại hoàn toàn. Mức cải thiện này là 20-30% trong các trường hợp nhỏ hơn và 70-80% đối với các bản viết lại hoàn chỉnh và tính năng mới. Họ cũng có thể giảm 58%kích thước mã, so với cùng một tính năng được xây dựng trong Khung hiển thị. Nhóm cũng chia sẻ thêm một số bài học:  

Chiến lược tổng thể của nhóm TikTok là di chuyển dần dần các hành trình cụ thể của người dùng. Nhờ đó, họ có cơ hội di chuyển, xác nhận các lợi ích có thể đo lường, sau đó mở rộng quy mô sang nhiều màn hình hơn. Họ bắt đầu bằng việc sử dụng Compose để đơn giản hoá cấu trúc tổng thể trong tính năng mã QR và nhận thấy những điểm cải thiện. Sau đó, nhóm đã mở rộng quy trình di chuyển sang trải nghiệm Đăng nhập và Đăng ký. 

Nhóm này cũng chia sẻ thêm một số bài học kinh nghiệm:  

Trong khi kiểm tra hiệu suất trong quá trình di chuyển, nhóm TikTok nhận thấy rằng việc sử dụng nhiều ComposeView nhỏ để thay thế các phần tử bên trong một ViewHolder gây ra hao tổn cho quá trình kết hợp. Họ đã đạt được kết quả tốt hơn bằng cách mở rộng quá trình di chuyển để sử dụng một ComposeView duy nhất cho toàn bộ ViewHolder.

Khi di chuyển một Fragment bên trong ViewPager (có logic chiều cao tuỳ chỉnh và logic có điều kiện để ẩn và hiện giao diện người dùng dựa trên các thử nghiệm), hiệu suất không bị ảnh hưởng. Trong trường hợp này, việc di chuyển ViewPager sang thành phần kết hợp mang lại hiệu suất tốt hơn so với việc di chuyển Fragment. 

Jun Shen rất thích việc Compose "giảm lượng mã cần thiết để phát triển tính năng, cải thiện khả năng kiểm thử và đẩy nhanh quá trình phân phối". Nhóm dự định tăng dần mức độ sử dụng Compose, biến Compose thành khung ưu tiên về lâu dài. Jetpack Compose đã chứng tỏ là một giải pháp hiệu quả để cải thiện cả trải nghiệm của nhà phát triển và chỉ số sản xuất trên quy mô lớn.

Bắt đầu với Jetpack Compose

Tìm hiểu thêm về cách Jetpack Compose có thể giúp ích cho nhóm của bạn.