‫TikTok تقلّل حجم الرمز البرمجي بنسبة ‎58% وتحسِّن أداء التطبيق للميزات الجديدة باستخدام Jetpack Compose

‫TikTok هو منصة عالمية للفيديوهات القصيرة تشتهر بقاعدة المستخدمين الضخمة والميزات المبتكرة. ويعمل الفريق باستمرار على إصدار تحديثات وتجارب وميزات جديدة للمستخدمين. لمواجهة تحدّي الحفاظ على سرعة الأداء مع إدارة الديون الفنية، استعان فريق Android في TikTok بمكتبة Jetpack Compose.

أراد الفريق إتاحة تكرار أسرع وأعلى جودة لمتطلبات المنتج. من خلال الاستفادة من Compose، سعى الفريق إلى تحسين كفاءة الهندسة عن طريق كتابة عدد أقل من الرموز البرمجية وتقليل الحمل المعرفي، مع تحقيق أداء واستقرار أفضلَين أيضًا. 

تبسيط واجهة المستخدم المعقّدة لتعزيز إنتاجية المطوّرين

غالبًا ما تكون صفحات TikTok أكثر تعقيدًا مما تبدو عليه، إذ تحتوي على العديد من المتطلبات الشرطية المتداخلة. وقد أدّى هذا التعقيد غالبًا إلى صعوبة الحفاظ على تسلسل هرمي للعناصر View منظَّم بشكل غير مثالي، وإلى زيادة عدد عمليات التداخل في العناصر View، ما أدّى إلى انخفاض الأداء بسبب زيادة عدد عمليات القياس.

قدّمت Compose حلاً مباشرًا لهذه المشكلة البنيوية. 

بالإضافة إلى ذلك، تساعد استراتيجية القياس في Compose على الحدّ من الازدواج الضريبي، ما يسهّل تحسين أداء القياس. 

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

تحديد مسار للمستقبل من خلال عملية نقل استراتيجية

من خلال استخدام Jetpack Compose بشكل استراتيجي، تمكّن TikTok من البقاء على اطّلاع على المشاكل الفنية، مع مواصلة التركيز على تقديم تجارب رائعة للمستخدمين. وقد أتاحت قدرة Compose على التعامل مع المنطق الشرطي بشكل واضح وتبسيط عملية الإنشاء للفريق تحقيق انخفاض يصل إلى% 78 في وقت تحميل الصفحة على الصفحات الجديدة أو التي تمت إعادة كتابتها بالكامل. وقد بلغت نسبة التحسّن هذه %20 إلى %30 في الحالات الأصغر، و%70 إلى %80 في عمليات إعادة الكتابة الكاملة والميزات الجديدة. تمكّن الفريق أيضًا من تقليل حجم الرمز البرمجي بنسبة%58، مقارنةً بالميزة نفسها التي تم إنشاؤها في "الفيديوهات القصيرة". شارك الفريق أيضًا بعض المعلومات التي تعلّمها:  

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

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

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

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

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

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

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