Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=cd91b8b0-c4f0-4e77-a26b-96fe40b197f9

VÍDEO: Blazor 5 - manejo de listados gigantes con listas virtualizadas

Una de las novedades más interesantes de Blazor 5, aparecido con .NET 5, es la posibilidad de virtualizar listas.

En las aplicaciones web suele ocurrir que tenemos un listado o una rejilla muy grandes, con muchos datos. Dado que la información debe moverse entre el servidor y el cliente (el navegador), si hay muchos datos puede suponer que la pantalla que muestra la información tarde mucho en responder y, por lo tanto, baje la usabilidad y la satisfacción de los usuarios.

La solución a estas situaciones es llevar al lado cliente tan solo la información que hace falta en cada momento, es decir, la que está visible, pero no toda. Esto es más fácil decirlo que hacerlo, ya que lograr algo así y que no se note desde el punto de vista del usuario implica hacer muchos malabarismos y, dependiendo de la técnica elegida, puede resultar muy complejo.

O al menos hasta la aparición de Blazor 5.

Con Blazor 5 o posterior tenemos una manera muy simple y rápida de conseguir virtualizar las listas: el control <Virtualize>. Gracias a este, en lugar de tener que cargar todo el contenido de los listados, conseguiremos que se cargue tan solo lo que se está visualizando en cada momento (y un poquito más, por lograr agilidad) y, además, sin que se note puesto que el listado o rejilla tendrá el mismo tamaño que si estuvieran todos los datos cargados. A medida que el usuario hace "scroll" por la página se irán cargando los nuevos datos en segundo plano cuando sea necesario visualizarlos. Todo esto de manera transparente para el usuario y el programador. Una maravilla, vamos. Ganaremos en rendimiento y los usuarios disfrutarán de una gran experiencia de usuario.

En el siguiente vídeo te cuento cómo hacerlo y verás claramente la diferencia de funcionamiento que tiene por debajo una lista enorme y otra virtualizada.

Te dejo también el código de ejemplo (244Kb) que he utilizado, en el que están la página original (/Pages/ListadoSinVirtualizar.razor) y la virtualizada (/Pages/Listado.razor), para que puedas usarlas una al lado de la otra.

¡Espero que te parezca útil!

José Manuel Alarcón Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José Manuel Alarcón
Archivado en: Lenguajes y plataformas

¿Te ha gustado este post?
Pues espera a ver nuestro boletín mensual...

Suscríbete a la newsletter

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.