TikTok ลดขนาดโค้ดลง 58% และปรับปรุงประสิทธิภาพของแอปสำหรับฟีเจอร์ใหม่ด้วย Jetpack Compose

TikTok เป็นแพลตฟอร์มวิดีโอสั้นระดับโลกที่รู้จักกันดีในฐานะที่มีฐานผู้ใช้จำนวนมากและฟีเจอร์ที่เป็นนวัตกรรม ทีมงานจะเผยแพร่การอัปเดต การทดลอง และฟีเจอร์ใหม่ๆ ให้ผู้ใช้อย่างต่อเนื่อง ทีม Android ของ TikTok จึงหันมาใช้ Jetpack Compose เพื่อรับมือกับความท้าทายในการรักษาความเร็วในการพัฒนาไปพร้อมๆ กับการจัดการหนี้สินทางเทคนิค

ทีมงานต้องการให้การทำซ้ำข้อกำหนดของผลิตภัณฑ์มีคุณภาพสูงขึ้นและเร็วขึ้น การใช้ประโยชน์จาก Compose ช่วยให้ทีมงานสามารถปรับปรุงประสิทธิภาพด้านวิศวกรรมด้วยการเขียนโค้ดน้อยลงและลดภาระทางความคิด ขณะเดียวกันก็ยังได้ประสิทธิภาพและความเสถียรที่ดีขึ้นด้วย

การปรับปรุง UI ที่ซับซ้อนเพื่อเพิ่มประสิทธิภาพการทำงานของนักพัฒนาแอป

หน้าต่างๆ ของ TikTok มักจะซับซ้อนกว่าที่เห็น โดยมีข้อกำหนดแบบมีเงื่อนไขซ้อนกันอยู่มากมาย ความซับซ้อนนี้มักจะทำให้เกิดลำดับชั้นของ View ที่ดูแลรักษายาก มีโครงสร้างที่ไม่เหมาะสม และมีการซ้อน View มากเกินไป ซึ่งทำให้ประสิทธิภาพลดลงเนื่องจากมีการวัดผลหลายครั้ง

Compose มีโซลูชันโดยตรงสำหรับปัญหาเชิงโครงสร้างนี้

นอกจากนี้ _กลยุทธ์การวัดผล_ของ Compose ยังช่วยลด __การเก็บภาษีซ้ำซ้อน__ ทำให้การเพิ่มประสิทธิภาพการวัดผลทำได้ง่ายขึ้น

ทีมระบบการออกแบบส่วนกลางของ TikTok ได้จัดเตรียมคลังคอมโพเนนต์สำหรับทีมที่ทำงานกับฟีเจอร์ต่างๆ ของแอป เพื่อปรับปรุงประสิทธิภาพการทำงานของนักพัฒนาแอป ทีมงานสังเกตเห็นว่าการพัฒนาใน Compose นั้นง่าย การใช้ประโยชน์จากคอมโพเนนต์ขนาดเล็กมีประสิทธิภาพสูง ขณะที่การรวมบล็อก UI ขนาดใหญ่เข้ากับตรรกะแบบมีเงื่อนไขนั้นทำได้ง่ายและมีค่าใช้จ่ายน้อยมาก

การสร้างเส้นทางไปข้างหน้าผ่านการย้ายข้อมูลเชิงกลยุทธ์

การนำ Jetpack Compose มาใช้ในเชิงกลยุทธ์ช่วยให้ TikTok สามารถจัดการหนี้สินทางเทคนิคได้ ขณะเดียวกันก็ยังคงมุ่งเน้นไปที่การสร้างประสบการณ์ที่ยอดเยี่ยมให้แก่ผู้ใช้ ความสามารถของ Compose ในการจัดการตรรกะแบบมีเงื่อนไขได้อย่างชัดเจนและการปรับปรุงการจัดองค์ประกอบใหม่ช่วยให้ทีมงานลดเวลาในการโหลดหน้าได้สูงสุด 78% ในหน้าใหม่หรือหน้าที่เขียนใหม่ทั้งหมด การปรับปรุงนี้อยู่ที่ 20-30% ในกรณีที่เล็กกว่า และ 70-80% สำหรับการเขียนใหม่ทั้งหมดและฟีเจอร์ใหม่ นอกจากนี้ยังลดขนาดโค้ดลงได้ 58%, เมื่อเทียบกับฟีเจอร์เดียวกันที่สร้างใน View ทีมงานยังได้แชร์สิ่งที่ได้เรียนรู้เพิ่มเติม 2-3 ข้อดังนี้

กลยุทธ์โดยรวมของทีม TikTok คือการย้ายข้อมูลเส้นทางของผู้ใช้ที่เฉพาะเจาะจงทีละขั้นตอน ซึ่งทำให้ทีมงานมีโอกาสย้ายข้อมูล ยืนยันผลประโยชน์ที่วัดผลได้ แล้วขยายไปยังหน้าจออื่นๆ ทีมงานเริ่มต้นด้วยการใช้ Compose เพื่อลดความซับซ้อนของโครงสร้างโดยรวมในฟีเจอร์คิวอาร์โค้ดและเห็นการปรับปรุง ต่อมาทีมงานได้ขยายการย้ายข้อมูลไปยังประสบการณ์การเข้าสู่ระบบและการลงชื่อสมัครใช้

ทีมงานได้แชร์สิ่งที่ได้เรียนรู้เพิ่มเติมดังนี้

ขณะตรวจสอบประสิทธิภาพระหว่างการย้ายข้อมูล ทีม TikTok พบว่าการใช้ ComposeView ขนาดเล็กจำนวนมากเพื่อแทนที่องค์ประกอบภายใน ViewHolder เดียวทำให้เกิดค่าใช้จ่ายในการจัดองค์ประกอบใหม่ ทีมงานได้ผลลัพธ์ที่ดีขึ้นด้วยการขยายการย้ายข้อมูลให้ใช้ ComposeView เดียวสำหรับ ViewHolder ทั้งหมด

ประสิทธิภาพไม่ได้รับผลกระทบเมื่อย้ายข้อมูล Fragment ภายใน ViewPager ซึ่งมีตรรกะความสูงที่กำหนดเองและตรรกะแบบมีเงื่อนไขเพื่อซ่อนและแสดง UI ตามการทดลอง ในกรณีนี้ การย้ายข้อมูล ViewPager ไปยัง Composable ทำงานได้ดีกว่าการย้ายข้อมูล Fragment

Jun Shen ชอบที่ Compose "ลดจำนวนโค้ดที่จำเป็นสำหรับการพัฒนาฟีเจอร์ ปรับปรุงความสามารถในการทดสอบ และเร่งการเผยแพร่" ทีมงานวางแผนที่จะเพิ่มการนำ Compose มาใช้อย่างต่อเนื่อง เพื่อให้เป็นเฟรมเวิร์กที่ต้องการในระยะยาว Jetpack Compose พิสูจน์ให้เห็นแล้วว่าเป็นโซลูชันที่มีประสิทธิภาพสำหรับการปรับปรุงทั้งประสบการณ์ของนักพัฒนาแอปและเมตริกการผลิตในวงกว้าง

เริ่มต้นใช้งาน Jetpack Compose

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Jetpack Compose ช่วยทีมของคุณได้