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 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 TikTok Android đã chuyển sang 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à 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 tốc năng suất của nhà phát triển

Các trang TikTok thường phức tạp hơn so với vẻ ngoài của chúng, 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 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ần đo 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 đánh thuế hai lần, giúp tối ưu hoá hiệu suất đo lường dễ dàng hơn. 

Để 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 này 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ỏ 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ó chi phí tối thiểu.

Xây dựng lộ trình phát triển thông qua quá trình di chuyển mang tính 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 kết hợp của Compose cho phép nhóm giảm tới 78% thời gian tải trang 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 tính năng mới và được viết lại hoàn toàn. 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 này đã chia sẻ thêm một vài bài họ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 giúp 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 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 cải tiến. Sau đó, nhóm này đã 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ố bài học:  

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 ComposeViews 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 Mảnh 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 hoạt động tốt hơn so với việc di chuyển Mảnh. 

Jun Shen thực sự 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à tăng tốc quá trình phân phối". Nhóm này dự định tăng dần việc áp dụng Compose, biến Compose thành khung ưu tiên của họ về lâu dài. Jetpack Compose đã chứng tỏ 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.