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 ช่วยทีมของคุณได้