केस स्टडी

Jetpack Compose का इस्तेमाल करके, TikTok ने कोड का साइज़ 58% तक कम किया. साथ ही, नए फ़ीचर के लिए ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाया

दो मिनट में पढ़ा जा सकता है
Ben Trengrove & Ajesh Pai

TikTok , दुनिया भर में शॉर्ट वीडियो का प्लैटफ़ॉर्म है. यह अपने बड़े उपयोगकर्ता आधार और नए-नए फ़ीचर के लिए जाना जाता है. इसकी टीम, अपने उपयोगकर्ताओं के लिए लगातार अपडेट, एक्सपेरिमेंट, और नए फ़ीचर रिलीज़ करती रहती है. तकनीकी कर्ज़ को मैनेज करते हुए, तेज़ी से काम करने की चुनौती का सामना करने के लिए, TikTok की Android टीम ने Jetpack Compose का इस्तेमाल किया.

टीम, प्रॉडक्ट की ज़रूरी शर्तों को तेज़ी से और बेहतर क्वालिटी में पूरा करना चाहती थी. Compose का इस्तेमाल करके, टीम ने कम कोड लिखकर और कॉग्निटिव लोड को कम करके, इंजीनियरिंग की क्षमता को बेहतर बनाने की कोशिश की. साथ ही, बेहतर परफ़ॉर्मेंस और स्थिरता हासिल करने की कोशिश की.

डेवलपर की प्रॉडक्टिविटी बढ़ाने के लिए, जटिल यूज़र इंटरफ़ेस (यूआई) को आसान बनाना

TikTok के पेज, अक्सर दिखने में जितने आसान होते हैं, उससे कहीं ज़्यादा जटिल होते हैं. इनमें, कई लेयर वाली ज़रूरी शर्तें होती हैं. इस जटिलता की वजह से, व्यू के ऐसे क्रम बनते हैं जिन्हें मैनेज करना मुश्किल होता है और जो ऑप्टिमाइज़ नहीं होते. साथ ही, व्यू की नेस्टिंग भी ज़्यादा होती है. इससे, मेज़र पास की संख्या बढ़ने की वजह से, परफ़ॉर्मेंस खराब हो जाती है.

Compose ने इस स्ट्रक्चरल समस्या का सीधा समाधान दिया. 

इसके अलावा, Compose की मेज़रमेंट की रणनीतिडबल टैक्सेशन को कम करने में मदद करती है. इससे, मेज़र परफ़ॉर्मेंस को ऑप्टिमाइज़ करना आसान हो जाता है. 

डेवलपर की प्रॉडक्टिविटी को बेहतर बनाने के लिए, TikTok की सेंट्रल डिज़ाइन सिस्टम टीम, अलग-अलग ऐप्लिकेशन फ़ीचर पर काम करने वाली टीमों के लिए कॉम्पोनेंट लाइब्रेरी उपलब्ध कराती है. टीम ने पाया कि Compose में डेवलपमेंट करना आसान है. छोटे-छोटे कंपोज़ेबल का इस्तेमाल करना काफ़ी असरदार है. वहीं, शर्तों वाली लॉजिक के साथ बड़े यूज़र इंटरफ़ेस (यूआई) ब्लॉक को शामिल करना आसान है और इसमें कम ओवरहेड लगता है.

junShenTikTok.png

रणनीतिक माइग्रेशन के ज़रिए आगे बढ़ने का रास्ता बनाना

Jetpack Compose को रणनीतिक तरीके से अपनाकर, TikTok तकनीकी कर्ज़ को मैनेज कर पाया. साथ ही, अपने उपयोगकर्ताओं के लिए बेहतर अनुभव बनाने पर भी फ़ोकस कर पाया. शर्तों वाली लॉजिक को आसानी से मैनेज करने और कंपोज़िशन को आसान बनाने की Compose की क्षमता की वजह से, टीम नए या पूरी तरह से फिर से लिखे गए पेजों के लोड होने में लगने वाले समय को 78% तक कम कर पाई. छोटे मामलों में यह सुधार 20–30% था. वहीं, पूरी तरह से फिर से लिखे गए पेजों और नए फ़ीचर के लिए यह सुधार 70–80% था. टीम, व्यू में बनाए गए उसी फ़ीचर की तुलना में, अपने कोड का साइज़ 58%तक कम कर पाई, . टीम ने कुछ और जानकारी शेयर की है:  

TikTok की टीम की पूरी रणनीति, खास उपयोगकर्ता के सफ़र को धीरे-धीरे माइग्रेट करने की थी. इससे उन्हें माइग्रेट करने, मेज़र किए जा सकने वाले फ़ायदों की पुष्टि करने, और फिर ज़्यादा स्क्रीन पर स्केल करने का मौका मिला. उन्होंने क्यूआर कोड वाले फ़ीचर में, Compose का इस्तेमाल करके, पूरे स्ट्रक्चर को आसान बनाया और सुधार देखे. इसके बाद, टीम ने लॉगिन और साइन-अप के अनुभवों को भी माइग्रेट किया. 

टीम ने कुछ और जानकारी शेयर की है:  

माइग्रेशन के दौरान परफ़ॉर्मेंस की जांच करते समय, TikTok की टीम ने पाया कि एक ViewHolder में मौजूद एलिमेंट को बदलने के लिए, कई छोटे-छोटे ComposeViews का इस्तेमाल करने से, कंपोज़िशन ओवरहेड बढ़ गया. टीम ने पूरे ViewHolder के लिए, एक ComposeView का इस्तेमाल करके, माइग्रेशन को बढ़ाकर बेहतर नतीजे हासिल किए.

ViewPager में किसी फ़्रैगमेंट को माइग्रेट करने पर, परफ़ॉर्मेंस पर कोई असर नहीं पड़ा. इसमें, कस्टम हाइट लॉजिक और शर्तों वाली लॉजिक का इस्तेमाल किया जाता है. साथ ही, एक्सपेरिमेंट के आधार पर यूज़र इंटरफ़ेस (यूआई) को छिपाने और दिखाने के लिए भी लॉजिक का इस्तेमाल किया जाता है. इस मामले में, फ़्रैगमेंट को माइग्रेट करने के मुकाबले, ViewPager को कंपोज़ेबल में माइग्रेट करने से बेहतर परफ़ॉर्मेंस मिली. 

जून शेन को Compose इसलिए पसंद है, क्योंकि "इससे फ़ीचर डेवलपमेंट के लिए ज़रूरी कोड की मात्रा कम हो जाती है, टेस्ट करने की क्षमता बेहतर होती है, और डिलीवरी की प्रोसेस तेज़ हो जाती है". टीम, Compose को धीरे-धीरे ज़्यादा इस्तेमाल करने की योजना बना रही है. इससे, आने वाले समय में यह उनका पसंदीदा फ़्रेमवर्क बन जाएगा. Jetpack Compose, डेवलपर के अनुभव और बड़े पैमाने पर प्रॉडक्शन मेट्रिक, दोनों को बेहतर बनाने के लिए एक असरदार समाधान साबित हुआ है.

Jetpack Compose का इस्तेमाल करना शुरू करना

इस बारे में ज़्यादा जानें कि Jetpack Compose आपकी टीम की कैसे मदद कर सकता है. 

लेखक:

पढ़ना जारी रखें