10 suggerimenti per migliorare le prestazioni delle applicazioni Phonegap



Ottimo intervento di Christophe Coenraets all'Adobe MAX 2013: 60 minuti di presentazione dove illustra 10 punti da tenere bene a mente quando si realizza una applicazione Phonegap.

Christophe Coenraets è un 'Principal Evangelist' per Adobe, dove si concentra su applicazioni mobili e Enterprise Integration. 
In questo ruolo, Christophe ha aiutato alcune delle più grandi società di servizi finanziari a progettare e realizzare la maggior parte delle loro applicazioni mission-critical.




Eccone un breve riassunto:

#10 - Non generare l'interfaccia utente sul server: recuperare dal server solo i dati, e costruire l'interfaccia esclusivamente sul client.

#9 - Non attendere la ricezione dei dati per disegnare l'interfaccia: nel caso la UI debba essere costruita utilizzando dati che devono essere ricevuti da un server remoto, disegnare da subito un'interfaccia vuota e successivamente aggiornarla alla ricezione dei dati.

#8.1 - Mantenere in cache i dati statici, utilizzando il LocalStorage o un database locale

#8.2 - Mantenere in cache i dati dinamici: eventualmente disegnare subito l'UI con i dati precendentemente depositati nella cache, avviare il recupero dei nuovi e aggiornare l'interfaccia al loro arrivo.

#8.3 - Mantenere in cache i 'query selector': quando è necessario effettuare più operazioni su un determinato elemento è conveniente evitare di effettuare continuamente query sul DOM. Una 'best practice' è effettuare una sola query, salvare il risultato e riutilizzarlo per tutte le operazioni.

#8.4 - Mantenere in cache i template precompilati: evitare di ridisegnare troppo spesso l'interfaccia, cercando di mantenere in cache i template html utilizzati.

#7 - Utilizzare le transizioni CSS e l'accelerazioni hardware: utilizzare per le transizioni di pagina TRANSLATE3D, in modo da forzare il disegno della UI utilizzando l'accelerazione hardware.

A riguardo, Christophe ha realizzato una microlibrary per la realizzazione delle transizioni di pagina utilizzando translate3d: https://github.com/ccoenraets/PageSlider

#6 - Eliminare il ritardo di 300 ms dell'evento 'click': quando si effettua un tap, l'interfaccia utente non può rispondere immediatamente. Deve infatti attendere 300 millisecondi per capire se il 'tap' che ha ricevuto è in realtà un 'double tap'. Negli elementi che non richiedono il doppio tocco, possiamo quindi utilizzare al posto dell'evento 'click' direttamente l'evento 'touchstart', che risponde immediatamente senza attendere i 300 ms.

Per velocizzare l'implementazione di questa modifica è disponibile una microlibrary che si occupa di 'intercettare' l'evento 'click' e sostituirlo in maniera intelligente con 'touchstart': https://github.com/ftlabs/fastclick

#5 - Utilizzare gli Sprite CSS: nel disegno dell'interfaccia, evitare di utilizzare troppe immagini singole.
Troppe immagini = Troppo richieste = rallentamento.
Utilizzare piuttosto gli sprite CSS che comportano il caricamento di una singola immagine che viene poi 'ritagliata' nei vari componenti della UI.

#4 - Limitare l'utilizzo di ombreggiature e gradienti: cercare di mantenere l'interfaccia il più leggera e 'piatta' possibile.

#3 - Evitare di ridisegnare troppo spesso la UI. L'esempio fatto da Christophe è perfettamente calzante: una lista che viene compilata da un ciclo. Invece di aggiungere elementi alla lista all'interno del ciclo (e quindi ridisegnare l'interfaccia ad ogni iterazione) appoggiare il codice html all'interno di una variabile e posizionarlo sulla pagina a ciclo terminato.

#2 - Hai veramente bisogno di quel framework? Quando è possibile, è una buona idea evitare di utilizzare frameworks 'out-of-the-box' ed utilizzare codice scritto al momento o specifico per il progetto che abbiamo in mente. Soluzioni come JQuery Mobile sono molto comode e riducono i tempi di sviluppo, ma sono indubbiamente deleterie per quanto concerne le performance.

#1 - TEST! Sembra scontato, ma non lo è. L'applicazione va testata in tutte le situazioni, con il maggior numero possibile di device, con i dati di test e quelli di produzione, in tutte le situazioni di connettività (2G-3G-Wifi-Connettività assente).

Di seguito il video della presentazione, buona visione!




via http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/

Published: May 14 2013

  • category: