Gestión de estados Blazor: prácticas recomendadas a tener en cuenta

Cuando hablamos de Blazor, el estado es una parte esencial de cualquier aplicación que cree con un marco que incluya la interacción del usuario. Considere un escenario en el que un usuario debe iniciar sesión para ver datos confidenciales. Sin embargo, debido a que el estado no se administra correctamente, deben iniciar sesión una y otra vez cada vez que vuelven a cargar la página. ¿Cuál es la probabilidad de que continúen usando la aplicación en el futuro? No es muy probable, creo.

Para evitar este tipo de mala capacidad de respuesta de la interfaz de usuario y una mala experiencia del usuario, los desarrolladores deben implementar una administración de estado de Blazor eficaz y adecuada. De esta manera, los Blazor componentes utilizados para crear la aplicación podrán comunicarse entre sí y transferir de manera efectiva datos específicos de un componente principal a un componente secundario.

Pero, ¿cómo funciona exactamente la Gestión del Estado en Blazor? ¿Cuál es la diferencia entre una aplicación Blazor WebAssembly y una aplicación Blazor Server? Con esta guía rápida, profundizaremos.

Try Ignite UI for Blazor

Un vistazo más detallado a la administración del estado en sus aplicaciones Blazor

Entonces, ¿qué es la Gestión Estatal en Blazor? En esencia, esto se refiere al proceso de manejo de datos + mantenimiento de un estado de interfaz de usuario (UI) receptivo. Es extremadamente vital por varias razones:

• Permite que la aplicación Blazor mantenga su estado actual incluso si la conexión se interrumpe o se pierde.
• Le permite recordar datos específicos del usuario.
• Sincroniza la interfaz de usuario con los datos y siempre se refleja cualquier cambio en los datos de la aplicación.
• Facilitates communication between Blazor components.
• Y ayuda a gestionar la interactividad en tiempo real del lado del cliente.

Si quieres ver cómo será el proceso, veamos esta visualización simplificada + explicación:

Por lo general, la administración de estado de Blazor se puede entender como el control y el almacenamiento sistemáticos de los datos de la aplicación, que pueden ir desde las preferencias del usuario y las entradas de formularios hasta la configuración global y las actualizaciones en tiempo real. Dado que los componentes comparten datos, lo hacen a través de parámetros, parámetros en cascada o servicios, pero también pueden mantener su propio estado local.

A veces, para realizar una administración de estado adecuada, es necesario implementar un contenedor de estado global. Si bien sirve como un repositorio centralizado para administrar datos compartidos, también garantiza un acceso y actualizaciones constantes. Pero, ¿cuáles son las cosas que desencadenan las actualizaciones de estado? Esto puede incluir interacciones del usuario, eventos o cambios externos. Una vez que se desencadenan las actualizaciones de estado, Blazor componentes se suscriben a ellas, lo que representa la interfaz de usuario de acuerdo con los cambios.

A continuación, se muestran algunos casos de uso comunes en los que debería considerar el uso de Blazor administración de estado.

• Cuando hay intercambio de datos e interacciones entre varios componentes que no están directamente relacionados en la jerarquía de componentes.
• Si tiene datos que deben compartirse y accederse a ellos en diferentes partes de la aplicación y necesita realizar un seguimiento del estado de autenticación del usuario, la autorización, los roles, etc.
• Cuando desee actualizar la interfaz de usuario en respuesta a interacciones del usuario, cambios en los datos, etc.
• Para la configuración o configuración de aplicaciones compartidas a las que accederán varios componentes.
• Almacenamiento en caché de datos para mejorar el rendimiento y la capacidad de respuesta de tu aplicación Blazor cuando los datos no cambian con frecuencia.
• Para conservar los datos específicos del usuario cuando haya una actualización de la página, por ejemplo, cuando la página o la aplicación tenga carros de la compra, formularios de datos y otros.
• Para crear una experiencia de usuario personalizada con preferencias específicas del usuario almacenadas: configuración de pantalla, opciones de diseño y más.
• Cuando las actualizaciones en tiempo real deben distribuirse entre los clientes y un servidor.
• Cree interfaces de estilo asistente de varios pasos en las que cada paso mantenga su estado, lo que permite a los usuarios navegar hacia adelante y hacia atrás mientras conservan su progreso.
• También es útil cuando se mantienen filtros, criterios de ordenación o consultas de búsqueda aplicadas a cuadrículas de datos o listas.

Por supuesto, tenga siempre en cuenta el propósito y la lógica específicos de su aplicación y cómo las diferentes técnicas de administración de estado pueden ayudarle a lograrlo de la manera más suficiente.

Cómo utilizar la gestión estatal en Blazor

Hemos discutido Blazor muchas veces y ya hemos descrito cómo funciona, pero para resumirlo rápidamente, el marco le permite crear aplicaciones web interactivas utilizando habilidades puras de C# y .NET. Aquí no hay JavaScript. Pero hay dos formas de manejar las interacciones cliente-servidor: una forma de crear aplicaciones es usar Blazor Server y la otra forma es Blazor WebAssembly (WASM). En Blazor servidor, la aplicación se ejecuta en el servidor y todas las actualizaciones de la interfaz de usuario se capturan en el cliente a través de la conexión SignalR. Esto lo hace adecuado para aplicaciones en tiempo real con control centralizado.

Por otro lado, Blazor WebAssembly se ejecuta directamente en el navegador web, lo que permite la ejecución completa del lado del cliente. Es ideal para escenarios en los que las aplicaciones deben funcionar sin conexión o con una interacción mínima con el servidor mientras se controla un mayor consumo de recursos del cliente.

Estas diferencias arquitectónicas también se reflejan en la Blazor Administración de estado de servidor y Blazor Administración de estado de WebAssembly. Veamos esto más a fondo.

Blazor Server State Management

Lo primero es lo primero, Blazor Server puede usar SignalR para actualizaciones de estado en tiempo real. Sin embargo, en general, la administración de estado en una aplicación de servidor Blazor se almacena en la memoria en una estructura conocida como circuito. Esto está bien siempre que no haya problemas de conexión o alta latencia de red porque obtener actualizaciones en tiempo real puede resultar problemático. En este escenario, Blazor intentará volver a conectarse al mismo circuito. Pero si eso falla y el retraso dura demasiado, se podría establecer un nuevo circuito, lo que podría causar la pérdida de datos cruciales.

Blazor WebAssembly State Management

Cuando se trata de la administración de estado en Blazor aplicaciones de WebAssembly, el estado se hospeda en el navegador que usa la persona. No depende de la memoria del servidor para la administración del estado, por lo que la integridad de la aplicación no se ve afectada por la latencia o los problemas de conexión con la red. Sin embargo, al actualizar la página o volver a abrir la aplicación, normalmente se restablecerá el estado.

Por ejemplo, imagine que tiene una aplicación Blazor con un formulario de varias páginas que utiliza el almacenamiento local para conservar el estado entre páginas. De esta manera, el usuario puede tener botones de retroceso y avance sin enviar un formulario sin completar. Algo así como un largo formulario de encuesta.

Ejemplo de gestión de estado

En ambos casos, debe pensar en realizar la persistencia de estado. Como Microsoft destacó inicialmente,

“… Mantener el estado en los circuitos en los que los usuarios están creando datos activamente, no simplemente leyendo datos que ya existen. Para conservar el estado entre circuitos, la aplicación debe conservar los datos en otra ubicación de almacenamiento que no sea la memoria del servidor. La persistencia de estado no es automática. Debes tomar medidas al desarrollar la aplicación para implementar la persistencia de datos con estado. Por lo general, la persistencia de datos solo es necesaria para el estado de alto valor que los usuarios se esforzaron en crear".

Estas son algunas ubicaciones comunes en las que se conserva el estado:

• Server-side storage (Database)
• Lado del cliente (navegador)
• URL
• Servicio de contenedor de estado en memoria

La aplicación también puede confiar en el almacenamiento del lado del servidor, especialmente cuando se trata de la persistencia permanente de datos entre diferentes usuarios y dispositivos. Las opciones disponibles serían:

• Blob storage
• Key-value storage
• Relational database
• Almacenamiento de mesas

Una vez que se guardan los datos, el estado del usuario se conserva y se puede acceder a él en cualquier circuito.

Mejores prácticas y enfoques para la administración Blazor del estado de la aplicación

Después de aclarar qué es Blazor administración de estado y cómo funciona en Blazor aplicaciones WebAssembly y Blazor Server, analicemos algunas de las prácticas recomendadas y los enfoques que hemos explorado en Infragistics y queremos destacar ahora. Tenga en cuenta que cada enfoque tiene diferentes propósitos. Por lo tanto, elegir un enfoque y confiar en una buena práctica siempre depende de los detalles de su proyecto: los requisitos de la aplicación, el alcance de la administración de estado necesaria, las complejidades dentro de la aplicación Blazor y otros.

Parámetros de componente o valor en cascada

Blazor le permite pasar datos entre componentes mediante parámetros. Los componentes pueden tener parámetros que acepten datos: estos parámetros pueden ser establecidos por el componente principal. Los parámetros en cascada te permiten pasar los mismos datos a una jerarquía de componentes (de un componente principal a un componente secundario) o incluso envolver CascadingValue en todo el contexto de la aplicación.

¿Cuándo es bueno usarlo?

El uso de parámetros es útil cuando se comparten datos entre componentes primarios y secundarios en una estructura jerárquica.

Guardar estados en direcciones URL y parámetros de consulta

Esto es realmente importante porque permite a los usuarios compartir la aplicación y su estado entre los usuarios mediante el envío de una dirección URL (por ejemplo, criterios de filtrado incrustados como parámetros de consulta).

¿Cuándo es bueno usarlo?

Por ejemplo, si desea permitir que los usuarios accedan directamente a una vista o configuración específica haciendo clic en una URL guardada o si desea crear enlaces permanentes.

Mantenimiento del estado del componente a través de campos y propiedades

Una de las mejores cosas de Blazor es que cada componente puede mantener su propio estado, lo que facilita la administración del estado dentro de un componente mediante campos y propiedades. De esta manera, el estado del componente se aísla al componente específico donde está definido.

¿Cuándo es bueno usarlo?

Es excelente cuando tiene datos específicos de componentes que no es necesario compartir con otros componentes.

Uso de servicios de inserción y creación de dependencias

Al crear servicios, tendrá que usar la inserción de dependencias para asegurarse de que están disponibles para todos los componentes. Este enfoque es útil para compartir datos y estados a los que se debe acceder en varios componentes.

¿Cuándo es bueno usarlo?

Esta es una buena práctica cuando desea administrar un estado de toda la aplicación, proporcionar datos a diferentes componentes y proporcionar una ubicación central para administrar el estado de la aplicación.

Obtener ayuda de bibliotecas de administración de estado de terceros

Como desarrollador Blazor, puedes usar bibliotecas de terceros como Fluxor, Blazor-State o bibliotecas basadas en Redux para administrar el estado de tu app. Son útiles porque ofrecen una solución más estructurada y compleja para la gestión del estado + implementan patrones bien establecidos, como la arquitectura Flux.

¿Cuándo es bueno usarlo?

Si desea organizar y optimizar la administración de estado en aplicaciones Blazor más grandes y complejas.

En conclusión...

Contar con una gestión de estado eficaz es fundamental para crear aplicaciones Blazor que respondan, se mantengan y sean fáciles de usar. Al implementar las mejores prácticas y enfoques que se analizan en este artículo, puede asegurarse de que su proyecto pueda manejar datos de manera eficiente, sincronizar sin problemas las interacciones de los componentes y ofrecer una mejor experiencia de usuario. Pero recuerde, independientemente de lo que elija, tenga siempre en cuenta las necesidades de estado de su aplicación para que el enfoque dé más frutos a largo plazo.