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% เมื่อเทียบกับฟีเจอร์เดียวกันที่สร้างใน Views ทีมยังได้แชร์บทเรียนเพิ่มเติม 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  ช่วยทีมของคุณได้