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

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

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

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

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

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

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

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

הכנת תוכנית אסטרטגית להעברה

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

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

הצוות שיתף עוד כמה תובנות:  

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

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

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

איך מתחילים לעבוד עם Jetpack Compose

מידע נוסף על האופן שבו Jetpack Compose יכול לעזור לצוות שלכם