دراسات الحالة

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

قراءة لمدة دقيقتين
Ben Trengrove & Ajesh Pai

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

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

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

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

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

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

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

junShenTikTok.png

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

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

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

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

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

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

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

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

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

تأليف:

متابعة القراءة