TikTok è una piattaforma globale di video brevi nota per la sua enorme base di utenti e le sue funzionalità innovative. Il team rilascia costantemente aggiornamenti, esperimenti e nuove funzionalità per i suoi utenti. Di fronte alla sfida di mantenere la velocità gestendo al contempo il debito tecnico, il team Android di TikTok si è rivolto a Jetpack Compose.

Il team voleva consentire un'iterazione più rapida e di qualità superiore dei requisiti del prodotto. Sfruttando Compose, il team ha cercato di migliorare l'efficienza ingegneristica scrivendo meno codice e riducendo il carico cognitivo, ottenendo al contempo prestazioni e stabilità migliori. 

Semplificare l'interfaccia utente complessa per accelerare la produttività degli sviluppatori

Le pagine di TikTok sono spesso più complesse di quanto sembri, in quanto contengono numerosi requisiti condizionali a più livelli. Questa complessità spesso ha portato a gerarchie di visualizzazione difficili da gestire, strutturate in modo non ottimale e con un'eccessiva nidificazione delle visualizzazioni, che ha causato un peggioramento del rendimento a causa di un aumento del numero di passaggi di misurazione.

Compose ha offerto una soluzione diretta a questo problema strutturale. 

Inoltre, la strategia di misurazione di Compose aiuta a ridurre la doppia tassazione, semplificando l'ottimizzazione del rendimento della misurazione. 

Per migliorare la produttività degli sviluppatori, il team centrale del sistema di progettazione di TikTok fornisce una libreria di componenti ai team che lavorano su diverse funzionalità dell'app. Il team ha osservato che lo sviluppo in Compose è semplice: l'utilizzo di piccoli elementi componibili è molto efficace, mentre l'incorporamento di grandi blocchi dell'interfaccia utente con logica condizionale è semplice e ha un overhead minimo.

Creare un percorso da seguire tramite la migrazione strategica

Adottando strategicamente Jetpack Compose, TikTok è riuscita a tenere sotto controllo il debito tecnico, continuando al contempo a concentrarsi sulla creazione di esperienze straordinarie per i suoi utenti. La capacità di Compose di gestire la logica condizionale in modo pulito e di semplificare la composizione ha consentito al team di ottenere una riduzione fino al 78% del tempo di caricamento delle pagine nuove o completamente riscritte. Questo miglioramento è stato del 20-30% nei casi più piccoli e del 70-80% per le riscritture complete e le nuove funzionalità. Inoltre, sono riusciti a ridurre le dimensioni del codice del 58%, rispetto alla stessa funzionalità creata in Views. Il team ha inoltre condiviso un paio di insegnamenti:  

La strategia generale del team di TikTok era di migrare in modo incrementale percorsi utente specifici. In questo modo, hanno avuto l'opportunità di eseguire la migrazione, confermare i vantaggi misurabili e poi scalare a più schermate. Hanno iniziato a utilizzare Compose per semplificare la struttura complessiva della funzionalità del codice QR e hanno notato i miglioramenti. Il team ha poi esteso la migrazione alle esperienze di accesso e registrazione. 

Il team ha condiviso alcuni insegnamenti aggiuntivi:  

Durante il controllo del rendimento durante la migrazione, il team di TikTok ha scoperto che l'utilizzo di molti piccoli ComposeView per sostituire gli elementi all'interno di un singolo ViewHolder causava un overhead di composizione. Hanno ottenuto risultati migliori espandendo la migrazione in modo da utilizzare un singolo ComposeView per l'intero ViewHolder.

La migrazione di un frammento all'interno di ViewPager, che ha una logica di altezza personalizzata e una logica condizionale per nascondere e mostrare l'interfaccia utente in base agli esperimenti, non ha influito sul rendimento. In questo caso, la migrazione di ViewPager a Composable ha avuto un rendimento migliore rispetto alla migrazione del frammento. 

Jun Shen apprezza molto il fatto che Compose "riduce la quantità di codice necessaria per lo sviluppo delle funzionalità, migliora la testabilità e accelera la consegna". Il team prevede di aumentare costantemente l'adozione di Compose, rendendolo il framework preferito a lungo termine. Jetpack Compose si è dimostrata una soluzione efficace per migliorare sia l'esperienza degli sviluppatori sia le metriche di produzione su larga scala.

Inizia a utilizzare Jetpack Compose

Scopri di più su come Jetpack Compose può aiutare il tuo team.