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

‫TikTok هي منصة عالمية للفيديوهات القصيرة تشتهر بقاعدة مستخدميها الضخمة وميزاتها المبتكرة. يُصدر الفريق باستمرار تحديثات وتجارب وميزات جديدة للمستخدمين. في مواجهة تحدّي الحفاظ على سرعة التطوير مع إدارة الديون التقنية، لجأ فريق TikTok Android إلى 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 إلى دالة مركّبة أفضل من نقل Fragment. 

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

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

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