Grazie ai framework come Angular, le Web Application sono sempre più efficienti e performanti ma quando arriviamo alla gestione di enormi liste di dati, per es. un catalogo di migliaia di prodotti o un sito di news con migliaia di notizie, allora il rischio che il browser frizzi e che la User Experience (UX) diventi pessima è elevatissimo.
Scopriamo 3 tecniche per effettuare il rendering di enormi liste di dati e quali sono gli use case ideali per applicarle. Per le tecniche abbiamo utilizzato Angular, ma i principi si possono applicare liberamente ad altri framework come React e Vue.
Scrolling virtuale
Lo scrolling virtuale è probabilmente il metodo più efficiente e più utilizzato per gestire liste lunghe di dati e grazie ad Angular CDK è veramente semplice implementarlo. Il principio che c’è dietro è che dato un contenitore ed una serie di elementi all’interno, un elemento è visibile solo quando è all’interno della parte visibile del contenitore.
Una volta installato ed importato il relativo modulo Angular CDK è possibile implementarlo scrivendo
<cdk-virtual-scroll-viewport itemSize="100">
<div *cdkVirtualFor="let item of items"> {{ item }} </div>
</cdk-virtual-scroll-viewport>Il modulo può gestire decine di migliaia di elementi senza alcun problema ma chiaramente la semplicità paga un prezzo: gli elementi nascosti non sono ricercabili ed inoltre non è possibile gestire liste o iterazioni con l’utente complesse. La tecnica rimane ideale per scrolling infinito di migliaia di elementi semplici e predefiniti, probabilmente il 99% dei casi. Contattaci subito e senza impegno per supporto e assistenza.
Rendering manuale
In questo caso possiamo utilizzare direttamente le Angular API al posto del classico ngFor per rendere più veloce il rendering ( circa il 30% più veloce).
In particolare occorre dapprima dichiarare nel controller il nostro template ed il nostro container e quindi quando costruire i dati è sufficienti effettuare il rendering utilizzando il metodo ViewContainerRef createEmbeddedView.
Metodo che può essere necessario per liste complesse ma che ha un User Experience peggiorata a causa di freeze iniziale del browser. Contattaci subito e senza impegno per supporto e assistenza.
Rendering progressivo
Il principio dietro questa tecnica è quello di visualizzare un sottogruppo di elementi in maniera progressiva e quindi effettuare un delay dei successivi elementi nel loop del rendering. Questa tecnica permette al browser di effettuare il rendering di tutti gli elementi in maniera controllata.
In pratica il codice viene eseguito, per es. ogni 20 ms, e visualizza un numero definito di elementi, per es. 100. Quando tutti gli elementi sono visualizzati il loop si interrompe. Queste impostazioni possono chiaramente variare in base alle specifiche esigenze.
Questa tecnica permette una User Experience migliore, l’utente nella realtà non si accorge di nulla, potendo nello stesso tempo controllare meglio le liste di elementi. Contattaci subito e senza impegno per supporto e assistenza.
Glue Labs e le Web Application
Ti forniamo sviluppo di Web Application e Formazione Avanzata su Angular e su numerose altre tecnologie. Abbiamo realizzato progetti per Clienti in ambito Health, Financial, Industrial e molto altro. Contattaci subito e senza impegno per maggiori informazioni.
