• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina
Glue Labs

Glue Labs

Trasformiamo le tue idee in prodotti digitali di successo!

  • HOME
  • SOLUZIONI
  • NEWS
  • PRODOTTI
  • CONTATTI
  • CASE STUDY

3 tecniche per gestire liste lunghe di dati nelle Web Application usando Angular

Migliora la User Experience e la gestione della User Interaction

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.

Continua la lettura

  1. Le novità di Angular 14

Categoria: Articoli Tags: front end, front end development, UI, user experience, User Interaction, UX, web application

Barra laterale primaria

Cosa facciamo

  • Content Strategy
  • E-Commerce
  • Formazione avanzata Web, Mobile & Cloud
  • IoT – Sviluppo e Integrazione
  • Micro Live Learning(MLL) Web, Mobile & Cloud
  • Project Management Prince2
  • PushAPE
  • Sicurezza ICT
  • Software Aziendali
  • Sviluppo Mobile App
  • Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
  • System Integration
  • Web Application
  • Web Design

Contatti

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove siamo

Roma: Piazza Don Sturzo 15
Milano: Via Lazzaretto 19
Torino: Via San Domenico 28
Altamura: Via Maggio 1648 24

"*" indica i campi obbligatori

Nome*
Questo sito è protetto da reCAPTCHA e si applicano le Normative sulla Privacy e i Termini di Servizio di Google.
Inviando i tuoi dati accetti le condizioni sulla Privacy. Li useremo per rispondere alle tue domande e richieste.
Consenso*
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Siamo parte di

La nostra Agenzia di Marketing

Footer

Partnership



Rimaniamo in contatto

Iscriviti alla nostra newsletter

Nome
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Soluzioni

  • Revisione, validazione, attestazione e Relazione Tecnica su Ricerca & Sviluppo e Innovazione Tecnologica
  • Migrazione da ASP.NET Web Forms e Visual Basic ad Angular Web Application
  • Corso Angular 15
  • Supporto ed Integrazione di SPID e CIE con OpenID Connect
  • Consulenza e Assessment pre-formazione
  • Integrazione con le API di OpenAI e ChatGPT
  • Corso Firebase
  • Corso Cucumber per Javascript
  • Supporto ed Assistenza nell’implementazione ed utilizzo dei Kit di Designers Italia
  • Realizzazione di Tour Virtuali 3D

Articoli

  • Le 4 metriche principali delle Performance del DevOps
  • Come trasformare una Web Application in una Mobile App: Capacitor di Ionic
  • Moodle per essere compliant con gli obblighi formativi in ambito sicurezza sul lavoro
  • Perchè adottare il modello One Concern(o Application) One Container
  • Perchè utilizzare la WebAR
  • Le 3 ragioni per implementare un chatbot nella tua azienda
  • I 5 fattori che impattano sulla reliability delle applicazioni
  • Le 10 innovazioni che modificheranno i servizi IT nel 2023
  • DevSusOps: sviluppare per la sostenibilità del software e delle architetture IT
  • Cos’è la Communications Platform as a Service(CPaaS) e perchè utilizzarla

Le nostre sedi

  • Roma, Piazza Don Sturzo 15
  • Milano, Via Lazzaretto 19
  • Torino, Via San Domenico 28
  • Altamura, Via Maggio 1648 24

Contatti

  • Tel. +39 06 87811067
  • Fax +39 06 99335373
  • glue-labs@legalmail.it
  • info@glue-labs.com
  • Facebook
  • LinkedIn
  • Twitter

Scarica app da App StoreScarica app da Play Store


Glue Labs © 2011–2023 | Copyright | Privacy Policy | Company Info | Cookie Policy | Gestione Cookies

Gestisci Consenso Cookie
Usiamo cookie per ottimizzare il nostro sito web ed i nostri servizi.
Funzionale Sempre attivo
La conservazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire la fruizione di uno specifico servizio esplicitamente richiesto dall'abbonato o dall'utente, o al solo fine di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente a fini statistici anonimi. Senza un mandato di comparizione, il rispetto volontario da parte del tuo provider di servizi Internet o registrazioni aggiuntive da parte di terzi, le informazioni archiviate o recuperate solo per questo scopo non possono essere generalmente utilizzate per identificarti. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
L'archiviazione tecnica o l'accesso è necessario per creare profili utente per inviare pubblicità o per tracciare l'utente su un sito Web o su più siti Web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Gestisci preferenze
{title} {title} {title}