TikTok, Jetpack Compose ile kod boyutunu% 58 oranında küçülttü ve yeni özellikler için uygulama performansını artırdı

TikTok, geniş kullanıcı tabanı ve yenilikçi özellikleriyle bilinen küresel bir kısa video platformudur. Ekip, kullanıcıları için sürekli olarak güncellemeler, denemeler ve yeni özellikler yayınlamaktadır. TikTok Android ekibi, teknik borcu yönetirken hızı koruma zorluğuyla karşılaştığında Jetpack Compose'u kullanmaya başladı.

Ekip, ürün gereksinimlerinin daha hızlı ve daha kaliteli bir şekilde yinelemesini sağlamak istiyordu. Compose'u kullanarak daha az kod yazıp bilişsel yükü azaltarak mühendislik verimliliğini artırmayı ve aynı zamanda daha iyi performans ve kararlılık elde etmeyi amaçladı. 

Geliştiricilerin üretkenliğini artırmak için karmaşık kullanıcı arayüzünü kolaylaştırma

TikTok sayfaları genellikle göründüğünden daha karmaşıktır ve çok sayıda katmanlı koşullu şart içerir. Bu karmaşıklık genellikle bakımı zor, en iyi şekilde yapılandırılmamış görünüm hiyerarşileri ve aşırı görünüm yerleştirmeyle sonuçlanıyordu. Bu durum, ölçü geçişlerinin sayısının artması nedeniyle performans düşüşüne neden oluyordu.

Compose, bu yapısal soruna doğrudan bir çözüm sunuyordu. 

Ayrıca, Compose'un ölçüm stratejisi, çifte vergilendirmeyi azaltarak performans ölçümünü optimize etmeyi kolaylaştırır. 

TikTok'un merkezi tasarım sistemi ekibi, geliştiricilerin verimliliğini artırmak için farklı uygulama özellikleri üzerinde çalışan ekiplere bir bileşen kitaplığı sunar. Ekip, Compose'da geliştirmenin basit olduğunu gözlemledi. Küçük composable'ları kullanmak oldukça etkiliydi. Koşullu mantık içeren büyük kullanıcı arayüzü bloklarını dahil etmek ise hem kolay hem de minimum ek yükle yapılıyordu.

Stratejik taşıma yoluyla ilerleme

TikTok, Jetpack Compose'u stratejik olarak benimseyerek teknik borç konusunda güncel kalmayı başardı ve aynı zamanda kullanıcıları için harika deneyimler oluşturmaya odaklanmaya devam etti. Compose'un koşullu mantığı sorunsuz bir şekilde işleme ve kompozisyonu kolaylaştırma özelliği, ekibin yeni veya tamamen yeniden yazılmış sayfalarda sayfa yükleme süresini% 78'e kadar azaltmasını sağladı. Bu iyileştirme, daha küçük durumlarda% 20-30, tam yeniden yazma ve yeni özelliklerde ise% 70-80 oranında olmuştur. Ayrıca,aynı özelliğin Views'da oluşturulmuş sürümüyle karşılaştırıldığında kod boyutunu%58 oranında azaltmayı başardılar.  Ekip, öğrendiği birkaç şeyi daha paylaştı:  

TikTok ekibinin genel stratejisi, belirli kullanıcı yolculuklarını kademeli olarak taşımaktı. Bu sayede, geçiş yapma, ölçülebilir avantajları onaylama ve daha fazla ekrana ölçeklendirme fırsatı elde ettiler. QR kodu özelliğindeki genel yapıyı basitleştirmek için Compose'u kullanmaya başlayan ekip, iyileşmeleri fark etti. Ekip daha sonra taşıma işlemini giriş ve kayıt deneyimlerini de kapsayacak şekilde genişletti. 

Ekip, öğrendiği bazı ek bilgileri paylaştı:  

TikTok ekibi, taşıma sırasında performansı kontrol ederken tek bir ViewHolder içindeki öğelerin yerine birçok küçük ComposeView kullanmanın kompozisyon ek yüküne neden olduğunu tespit etti. Taşıma işlemini genişleterek tüm ViewHolder için tek bir ComposeView kullanıp daha iyi sonuçlar elde ettiler.

ViewPager içinde bir Fragment'ı taşırken (özel yükseklik mantığına ve denemelere göre kullanıcı arayüzünü gizlemek ve göstermek için koşullu mantığa sahip), performans etkilenmedi. Bu durumda, ViewPager'ı Composable'a taşıma işlemi, Fragment'ı taşımaya kıyasla daha iyi performans gösterdi. 

Jun Shen, Compose'un "özellik geliştirmek için gereken kod miktarını azaltmasını, test edilebilirliği artırmasını ve teslimatı hızlandırmasını" çok beğeniyor. Ekip, Compose'un kullanımını istikrarlı bir şekilde artırmayı ve uzun vadede tercih edilen çerçeve haline getirmeyi planlıyor. Jetpack Compose, hem geliştirici deneyimlerini hem de üretim metriklerini büyük ölçekte iyileştirmek için güçlü bir çözüm olduğunu kanıtladı.

Jetpack Compose'u kullanmaya başlama

Jetpack Compose 'un ekibinize nasıl yardımcı olabileceği hakkında daha fazla bilgi edinin.