TikTok giảm kích thước mã xuống 58% 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 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 Android của TikTok đã 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 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 Khung hiển thị có cấu trúc không tối ưu và việc lồng ghép 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 đã đưa ra 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 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 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% đối với 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 58%kích thước mã, 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 dần 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 học được:  

Trong quá trình 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 Đoạ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 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 Compose 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.