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 cải tiến. Nhóm này không ngừng 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. Khi phải đối mặt với thách thức duy trì tốc độ trong khi quản lý nợ kỹ thuật, nhóm TikTok Android đã chuyển sang sử dụng Jetpack Compose.

Nhóm này muốn cho phép lặp lại các yêu cầu về sản phẩm nhanh hơn và có chất lượng cao hơn. Bằng cách tận dụng Compose, nhóm này đã 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 cao hơn. 

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

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

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

Ngoài ra, chiến lược đo lường của Compose giúp giảm thuế trùng lặp, giúp bạn dễ dàng tối ưu hoá hiệu suất đo lường. 

Để cải thiện 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 làm việc trên nhiều tính năng của ứng dụng.  Nhóm nhận thấy 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ỏ rất hiệu quả, 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 có mức hao tổn tài nguyên tối thiểu.

Xây dựng lộ trình bằng cách di chuyển một cách chiến lược

Bằng cách áp dụng Jetpack Compose một cách chiến lược, TikTok có thể kiểm soá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 sáng tác của Compose đã giúp nhóm giảm thời gian tải trang xuống đến 78% trên các trang mới hoặc đượ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 trường hợp viết lại hoàn toàn và các tính năng mới. Họ cũng có thể giảm kích thước mã xuống 58%, khi so sánh với cùng một tính năng được tạo trong Views. Nhóm này cũng chia sẻ thêm một số kiến thức:  

Chiến lược tổng thể của nhóm TikTok là di chuyển từng bước các hành trình cụ thể của người dùng. Điều này mang đến cho họ cơ hội di chuyển, xác nhận những lợi ích có thể đo lường được, sau đó mở rộng sang nhiều màn hình hơn. Họ bắt đầu bằng cách 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 tiến. Sau đó, nhóm đã mở rộng quá trình di chuyển sang trải nghiệm Đăng nhập và Đăng ký. 

Nhóm này đã chia sẻ thêm một số thông tin:  

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 duy nhất đã gây ra chi phí 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 sẽ không bị ảnh hưởng. Trong trường hợp này, việc di chuyển ViewPager sang Composable mang lại hiệu quả cao hơn so với việc di chuyển Fragment. 

Jun Shen rất thích Compose vì "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 đây thành khung hình ưu tiên của họ trong dài hạn. Jetpack Compose đã chứng minh là một giải pháp mạnh mẽ để cải thiện cả trải nghiệm của nhà phát triển và các chỉ số sản xuất ở 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 nhóm của bạn.