Ottimizzazione delle Prestazioni in Flutter: 6 Trucchi per un’App Più Veloce
Nell’era digitale odierna, le applicazioni mobili hanno rivoluzionato il modo in cui viviamo la nostra vita. Dal ordinare cibo al prenotare un taxi, dalla gestione delle finanze all’accesso alle cure sanitarie – c’è un’app per quasi tutto. Man mano che sempre più imprese e imprenditori si rendono conto del potenziale delle applicazioni mobili, cresce l’interesse nello sviluppo di un Prodotto Minimo Viabile (MVP). Un MVP è una versione semplificata di un’applicazione sviluppata con abbastanza funzionalità per soddisfare gli early adopters e fornire feedback per lo sviluppo futuro del prodotto.
Flutter di Google è emerso come un framework popolare per lo sviluppo di MVP. Flutter è un kit di sviluppo software UI open-source che permette agli sviluppatori di costruire applicazioni compilate in modo nativo per mobile, web e desktop da un unico codice sorgente. Ma come si garantisce il successo nello sviluppo di un MVP utilizzando Flutter? Come agenzia leader specializzata nello sviluppo di app Flutter, abbiamo visto quali sono le migliori pratiche di sviluppo app con Flutter.
Queste pratiche oltre ad aumentare l’efficienza della tua app sono consigliate per l’ottimizzazione del codice in ottica di aderenza agli standard della Green Software Foundation.
1) Esegui in modalità profilo su un dispositivo reale
2) Utilizza il performance overlay e altri strumenti
3) Minimizza le operazioni costose
4) Utilizza il lazy loading e la paginazione
5) Usa il tree shaking per il tuo codice
6) Usa il caricamento differito per il tuo codice
1 Esegui in modalità profilo su un dispositivo reale
Il primo trucco per l’ottimizzazione delle prestazioni in Flutter è eseguire la tua app in modalità profilo su un dispositivo reale. La modalità profilo è una modalità speciale che esegue la tua app con ottimizzazioni simili alla modalità di rilascio, ma consente anche alcune strumenti di misurazione delle prestazioni. La modalità profilo ti aiuta a identificare potenziali problemi di prestazione e a misurare l’impatto delle tue ottimizzazioni.
Per eseguire la tua app in modalità profilo, utilizza il comando flutter run –profile o seleziona l’opzione profilo nel tuo IDE. Puoi anche utilizzare il comando flutter build –profile per creare una compilazione profilo per la tua app.
Eseguire la tua app su un dispositivo reale è importante perché i simulatori e gli emulatori non utilizzano lo stesso hardware dei dispositivi reali, il che porta a differenze nelle loro prestazioni. Rispetto ai dispositivi reali, alcune operazioni del simulatore sono più veloci, mentre altre sono più lente. Inoltre, la modalità di debug attiva controlli aggiuntivi (come gli assert) che non vengono eseguiti nelle compilazioni di profilo o rilascio, e questi controlli possono essere onerosi.
Dovresti considerare di controllare le prestazioni sul dispositivo più lento che i tuoi utenti potrebbero ragionevolmente utilizzare. In questo modo, puoi garantire che la tua app funzioni senza problemi su tutti i dispositivi.
2 Utilizza il performance overlay e altri strumenti
Il secondo trucco per l’ottimizzazione delle prestazioni in Flutter è utilizzare la sovrapposizione delle prestazioni (performance overlay) e altri strumenti per diagnosticare problemi di prestazione. La sovrapposizione delle prestazioni è un widget che mostra due grafici sopra l’interfaccia utente della tua app. I grafici mostrano quanto tempo ogni frame impiega per essere renderizzato sul thread dell’interfaccia utente (grafico superiore) e sul thread raster (grafico inferiore). Il thread raster era precedentemente noto come thread GPU.
Per attivare la sovrapposizione delle prestazioni, utilizza il comando flutter run –profile –show-performance-overlay o premi P mentre esegui la tua app in modalità profilo. Puoi anche attivarlo programmaticamente utilizzando il widget PerformanceOverlay o dalla riga di comando usando il parametro showPerformanceOverlay.
La sovrapposizione delle prestazioni ti aiuta a identificare frame scattosi mostrando picchi nei grafici. Idealmente, ogni frame dovrebbe impiegare meno di 16 ms per essere renderizzato per una prestazione di 60 fps. Se un frame impiega più di 16 ms, significa che non ha rispettato la scadenza e ha causato uno scatto.
3 Minimizza le operazioni costose
Il terzo Hack per l’ottimizzazione delle prestazioni di Flutter consiste nel ridurre al minimo le operazioni costose nel codice. Le operazioni costose sono quelle che consumano molte risorse, come CPU, memoria o rete. Alcuni esempi di operazioni costose sono:
Layout e rendering: layout e rendering sono i processi di calcolo delle dimensioni e della posizione di ciascun widget sullo schermo e di disegno sul display. Il layout e il rendering possono essere costosi se disponi di widget complessi o nidificati, widget grandi o dinamici o widget che cambiano frequentemente. Per ottimizzare il layout e il rendering, dovresti utilizzare widget semplici e piatti, evitare ricostruzioni non necessarie, memorizzare nella cache o riutilizzare i widget ed evitare livelli fuori schermo.
Animazione: l’animazione è il processo di modifica dell’aspetto o della posizione di un widget nel tempo. L’animazione può essere costosa se le animazioni sono troppe o troppo complesse oppure se si utilizzano tecniche di animazione non ottimizzate. Per ottimizzare l’animazione, dovresti utilizzare widget di animazione integrati, evitare di animare widget grandi o costosi, utilizzare l’opacità e il ritaglio con parsimonia e utilizzare il pattern TransitionBuilder per evitare di ricostruire i discendenti.
Caricamento delle immagini: il caricamento delle immagini è il processo di recupero e decodifica dei file di immagine dalla rete o dalla memoria del dispositivo. Il caricamento delle immagini può essere costoso se hai troppe immagini o troppo grandi o se non le memorizzi nella cache o non le ridimensioni correttamente. Per ottimizzare il caricamento delle immagini, è necessario utilizzare formati di immagine compressi, memorizzare nella cache le immagini in memoria o su disco, ridimensionare le immagini per adattarle alle dimensioni del display e utilizzare segnaposto o precaching per migliorare le prestazioni percepite.
Operazioni intrinseche: le operazioni intrinseche sono quelle che dipendono dalla dimensione intrinseca di un widget, come la sua larghezza o altezza naturale. Le operazioni intrinseche possono essere costose perché richiedono un passaggio di layout aggiuntivo per calcolare la dimensione del widget prima di renderizzarlo. Alcuni esempi di operazioni intrinseche utilizzano widget IntrinsicWidth o IntrinsicHeight, utilizzando widget Riga o Colonna con MainAxisSize.min o utilizzando widget di testo con softWrap: true. Per ottimizzare le operazioni intrinseche, dovresti evitarle quando possibile, utilizzare dimensioni fisse anziché dimensioni intrinseche o utilizzare widget alternativi che non richiedono operazioni intrinseche.
4 Utilizza il lazy loading e la paginazione
Il quarto Hack per l’ottimizzazione delle prestazioni di Flutter consiste nell’utilizzare il caricamento lento e l’impaginazione per i tuoi dati. Il caricamento lento è una tecnica che carica i dati solo quando è necessario, invece di caricarli tutti in una volta. La paginazione è una tecnica che divide i dati in blocchi o pagine più piccoli e li carica uno per uno mentre l’utente scorre.
Il caricamento lento e l’impaginazione possono migliorare le prestazioni della tua app riducendo la quantità di dati che devono essere recuperati dalla rete o dall’archiviazione del dispositivo, riducendo l’utilizzo della memoria dell’app e la complessità dell’interfaccia utente della tua app.
Per implementare il caricamento lento e l’impaginazione in Flutter, puoi utilizzare vari widget e plugin, come:
ListView: un widget che visualizza un elenco scorrevole di elementi. È possibile utilizzare ListView con il costruttore del builder per creare elementi pigramente mentre vengono fatti scorrere per essere visualizzati. È inoltre possibile utilizzare ListView con la proprietà controller per ascoltare gli eventi di scorrimento e caricare più dati quando l’utente raggiunge la fine dell’elenco.
GridView: un widget che visualizza una griglia scorrevole di elementi. È possibile utilizzare GridView con le stesse tecniche di ListView per creare elementi in modo pigro e caricare più dati durante lo scorrimento.
PaginatedDataTable: un widget che visualizza una tabella di dati con controlli di impaginazione. Puoi utilizzare PaginatedDataTable con una proprietà di origine personalizzata per recuperare i dati da un’origine remota o locale nelle pagine.
Paginazione a scorrimento infinito: un plugin che fornisce un widget e un controller per implementare l’impaginazione a scorrimento infinito con ListView o GridView. È possibile utilizzare la paginazione a scorrimento infinito con una proprietà pagingController personalizzata per recuperare i dati da un’origine remota o locale nelle pagine.
5. Usa il tree shaking per il tuo codice
Il quinto Hack per l’ottimizzazione delle prestazioni di Flutter consiste nell’utilizzare il tree shaking per il codice. Il il tree shaking è una tecnica che rimuove il codice inutilizzato dal file binario della tua app, riducendone le dimensioni e migliorandone il tempo di avvio.
Il il tree shaking funziona analizzando il codice e determinando quali parti sono raggiungibili e quali no. Solo le parti raggiungibili vengono incluse nell’output finale, mentre le parti irraggiungibili vengono scartate. In questo modo puoi evitare di inviare codice non necessario che non verrà mai eseguito.
Il il tree shaking può essere utile quando nella tua app sono presenti funzionalità di grandi dimensioni o opzionali che non sono necessarie a tutti gli utenti. Ad esempio, puoi utilizzare Il il tree shaking per:
Localizzazione: puoi rimuovere i file di lingua non rilevanti per le impostazioni locali dell’utente, invece di includere tutte le lingue supportate.
Temi: puoi rimuovere i file dei temi che non sono rilevanti per le preferenze dell’utente, invece di includere tutti i temi disponibili.
Funzionalità: puoi rimuovere i moduli di funzionalità che non sono rilevanti per l’azione dell’utente, invece di includere tutte le funzionalità possibili.
Per abilitare il tree shaking in Flutter, non devi fare nulla di speciale. Flutter esegue automaticamente il tree shaking durante la creazione dell’app in modalità di rilascio.
Scopri di più sul tree shaking in Flutter qui.
6 Usa il caricamento differito per il tuo codice
Il sesto Hack per l’ottimizzazione delle prestazioni di Flutter consiste nell’utilizzare il caricamento differito per il codice. Il caricamento differito (deferred loading) è una tecnica che consente di caricare parti del codice su richiesta, invece di caricarle tutte in una volta. Ciò può ridurre le dimensioni del download iniziale e l’utilizzo della memoria dell’app e migliorarne il tempo di avvio.
Per utilizzare il caricamento differito in Flutter, devi utilizzare la parola chiave deferred dopo l’istruzione import e specificare un alias per la libreria importata. Quindi, devi chiamare il metodo loadLibrary() sull’alias per caricare la libreria quando ne hai bisogno.
Il caricamento differito può essere utile quando nella tua app sono presenti funzionalità di grandi dimensioni o facoltative che non sono necessarie all’avvio o a tutti gli utenti. Ad esempio, puoi utilizzare il caricamento differito per:
Localizzazione: puoi caricare solo i file di lingua rilevanti per le impostazioni locali dell’utente, invece di caricare tutte le lingue supportate.
Temi: puoi caricare solo i file dei temi rilevanti per le preferenze dell’utente, invece di caricare tutti i temi disponibili.
Funzionalità: puoi caricare solo i moduli di funzionalità rilevanti per l’azione dell’utente, invece di caricare tutte le funzionalità possibili.