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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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