TikTok è una piattaforma globale di video brevi nota per la sua vasta base di utenti e le sue funzionalità innovative. Il team rilascia costantemente aggiornamenti, esperimenti e nuove funzionalità per i propri 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 di 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 le UI complesse per aumentare la produttività degli sviluppatori

Le pagine di TikTok sono spesso più complesse di quanto sembri e contengono numerosi requisiti condizionali a più livelli. Questa complessità spesso comportava gerarchie di visualizzazione difficili da gestire, strutturate in modo non ottimale e un'eccessiva nidificazione delle visualizzazioni, il che causava un peggioramento delle prestazioni a causa di un numero maggiore di passaggi di misurazione.

Compose ha offerto una soluzione diretta a questo problema strutturale. 

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

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

Creare un percorso da seguire attraverso la migrazione strategica

Grazie all'adozione strategica di Jetpack Compose, TikTok è riuscita a tenere sotto controllo il debito tecnico, continuando al contempo a concentrarsi sulla creazione di esperienze straordinarie per i propri utenti. La capacità di Compose di gestire la logica condizionale in modo pulito e semplificare la composizione ha consentito al team di ridurre fino al 78% il 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à integrata in Views. Il team ha condiviso ulteriori due insegnamenti:  

La strategia generale del team di TikTok era quella di eseguire la migrazione incrementale di percorsi utente specifici. In questo modo, hanno avuto l'opportunità di eseguire la migrazione, confermare i vantaggi misurabili e poi scalare a più schermi. 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 sovraccarico di composizione. Hanno ottenuto risultati migliori espandendo la migrazione per utilizzare un'unica ComposeView per l'intero ViewHolder.

Durante la migrazione di un frammento all'interno di ViewPager, che ha una logica di altezza personalizzata e una logica condizionale per nascondere e mostrare la UI in base agli esperimenti, le prestazioni non sono state interessate. 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 distribuzione". Il team prevede di aumentare costantemente l'adozione di Compose, rendendolo il framework preferito a lungo termine. Jetpack Compose si è rivelato una soluzione efficace per migliorare sia l'esperienza degli sviluppatori sia le metriche di produzione su larga scala.

Guida introduttiva a Jetpack Compose

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