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

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

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

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

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

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

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

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

TikTok สามารถจัดการหนี้ทางเทคนิคได้ไปพร้อมๆ กับการมุ่งเน้นที่การสร้างประสบการณ์ที่ยอดเยี่ยมให้แก่ผู้ใช้ต่อไปด้วยการนำ Jetpack Compose มาใช้ในเชิงกลยุทธ์ ความสามารถของ 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 ช่วยทีมของคุณได้