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

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

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

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

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

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

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

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

رسم مسار للمضي قدمًا من خلال النقل الاستراتيجي

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

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

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

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

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

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

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

مزيد من المعلومات عن كيف يمكن أن يساعد Jetpack Compose  فريقك