חברת TikTok מקטינה את גודל הקוד ב-58% ומשפרת את ביצועי האפליקציה לתכונות חדשות באמצעות Jetpack Compose

‫TikTok היא פלטפורמה גלובלית לסרטונים קצרים, שידועה בבסיס המשתמשים העצום שלה ובתכונות החדשניות שלה. הצוות מפרסם כל הזמן עדכונים, ניסויים ותכונות חדשות למשתמשים. כדי להתמודד עם האתגר של שמירה על קצב הפיתוח תוך כדי ניהול החוב הטכני, צוות Android של טיקטוק פנה אל Jetpack Compose.

הצוות רצה לאפשר איטרציה מהירה ואיכותית יותר של דרישות המוצר. הצוות רצה להשתמש ב-Compose כדי לשפר את יעילות הפיתוח על ידי כתיבת פחות קוד והפחתת העומס הקוגניטיבי, וגם כדי לשפר את הביצועים והיציבות. 

ייעול ממשק משתמש מורכב כדי לשפר את הפרודוקטיביות של המפתחים

דפים בטיקטוק הם בדרך כלל מורכבים יותר ממה שהם נראים, ויש בהם הרבה דרישות מותנות בשכבות. המורכבות הזו גרמה לעיתים קרובות להיררכיות תצוגות שהיה קשה לתחזק ולבנות בצורה אופטימלית, ולקינון מוגזם של תצוגות. כתוצאה מכך, הביצועים נפגעו בגלל מספר מוגבר של מעברי מדידה.

‫Compose הציע פתרון ישיר לבעיה המבנית הזו. 

בנוסף, אסטרטגיית המדידה של Compose עוזרת לצמצם את המיסוי הכפול, וכך קל יותר לבצע אופטימיזציה של ביצועי המדידה. 

כדי לשפר את הפרודוקטיביות של המפתחים, צוות Design System המרכזי של טיקטוק מספק ספריית רכיבים לצוותים שעובדים על תכונות שונות של האפליקציה.  הצוות הבחין שהפיתוח ב-Compose הוא פשוט. שימוש בפונקציות קומפוזביליות קטנות הוא יעיל מאוד, והשילוב של בלוקים גדולים של ממשק משתמש עם לוגיקה מותנית הוא פשוט ודורש מעט מאוד משאבים.

העברה אסטרטגית: הדרך להתקדם

ההטמעה האסטרטגית של Jetpack Compose אפשרה ל-TikTok להתמודד עם החוב הטכני, וגם להמשיך להתמקד ביצירת חוויות נהדרות למשתמשים. היכולת של Compose לטפל בלוגיקה מותנית בצורה נקייה ולייעל את הקומפוזיציה אפשרה לצוות להפחית עד 78% מזמן הטעינה של דפים חדשים או דפים שנכתבו מחדש באופן מלא. השיפור הזה היה בשיעור של 20% עד 30% במקרים קטנים יותר, ובשיעור של 70% עד 80% בשכתובים מלאים ובתכונות חדשות. הם גם הצליחו להקטין את גודל הקוד ב-58%, בהשוואה לאותה תכונה שנוצרה ב-Views. הצוות גם שיתף כמה תובנות:  

האסטרטגיה הכוללת של הצוות של TikTok הייתה להעביר בהדרגה תהליכים ספציפיים שעוברים המשתמשים. כך הייתה להם הזדמנות להעביר את הקמפיינים, לוודא שהם מקבלים יתרונות מדידים ואז להרחיב את הפעילות למסכים נוספים. הם התחילו להשתמש ב-Compose כדי לפשט את המבנה הכולל של תכונת קוד ה-QR, וראו את השיפורים. בהמשך, הצוות הרחיב את ההעברה גם לחוויית ההתחברות וההרשמה. 

הצוות שיתף כמה תובנות נוספות:  

במהלך בדיקת הביצועים בזמן ההעברה, הצוות של טיקטוק גילה ששימוש בהרבה רכיבי ComposeView קטנים כדי להחליף רכיבים בתוך ViewHolder אחד גרם לעומס על הקומפוזיציה. הם השיגו תוצאות טובות יותר על ידי הרחבת ההעברה לשימוש ב-ComposeView אחד לכל ה-ViewHolder.

כשמעבירים Fragment בתוך ViewPager, שיש לו לוגיקה של גובה מותאם אישית ולוגיקה מותנית להסתרה ולהצגה של ממשק המשתמש על סמך ניסויים, הביצועים לא מושפעים. במקרה הזה, העברת ה-ViewPager ל-Composable הניבה ביצועים טובים יותר מהעברת ה-Fragment. 

ג'ון שן ממש אוהב את העובדה ש-Compose "מפחית את כמות הקוד שנדרש לפיתוח תכונות, משפר את יכולת הבדיקה ומאיץ את ההפצה". הצוות מתכנן להגביר בהדרגה את השימוש ב-Compose, ולהפוך אותו למסגרת המועדפת עליו בטווח הארוך. התברר ש-Jetpack Compose הוא פתרון יעיל לשיפור חוויית המפתחים ומדדי הייצור בקנה מידה נרחב.

תחילת העבודה עם Jetpack Compose

איך Jetpack Compose יכול לעזור לצוות שלכם