‫TikTok تقلّل من حجم الرمز البرمجي بنسبة ‎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. شارك الفريق أيضًا بعض المعلومات التي تعلّمها:  

تمثّلت الاستراتيجية الشاملة لفريق TikTok في نقل رحلات مستخدمين محدّدة بشكل تدريجي. وقد أتاح لهم ذلك فرصة نقل البيانات وتأكيد الفوائد القابلة للقياس، ثم التوسّع إلى المزيد من الشاشات. بدأوا باستخدام Compose لتبسيط البنية العامة في ميزة رمز الاستجابة السريعة ولاحظوا التحسينات. وسّع الفريق نطاق عملية نقل البيانات لاحقًا ليشمل تجارب "تسجيل الدخول" و"الاشتراك". 

شارك الفريق بعض المعلومات الإضافية التي تعلّمها:  

أثناء التحقّق من الأداء أثناء عملية نقل البيانات، تبيّن لفريق TikTok أنّ استخدام العديد من ComposeViews الصغيرة لاستبدال العناصر داخل ViewHolder واحد تسبّب في زيادة الحمل الزائد للتركيب. وقد حقّقوا نتائج أفضل من خلال توسيع عملية نقل البيانات لاستخدام ComposeView واحد لكامل ViewHolder.

عند نقل Fragment داخل ViewPager، والذي يتضمّن منطق ارتفاع مخصّصًا ومنطقًا شرطيًا لإخفاء واجهة المستخدم وعرضها استنادًا إلى التجارب، لم يتأثّر الأداء. في هذه الحالة، كان نقل ViewPager إلى Composable أفضل من نقل Fragment. 

يُعجب "جون شين" كثيرًا بأنّ Compose "يقلّل مقدار الرمز البرمجي المطلوب لتطوير الميزات، ويحسّن إمكانية الاختبار، ويسرّع عملية التسليم". يخطّط الفريق لزيادة استخدام Compose تدريجيًا، ما يجعله إطار العمل المفضّل على المدى الطويل. وقد تبيّن أنّ Jetpack Compose هو حلّ فعّال لتحسين تجربة المطوّرين ومقاييس الإنتاج على نطاق واسع.

بدء استخدام Jetpack Compose

تعرَّف على مزيد من المعلومات حول كيف يمكن أن يساعد Jetpack Compose فريقك.