Blazor en Grande: Arquitectura y Escalabilidad

No content

Introducción a Blazor Blazor es un framework de desarrollo web que permite construir aplicaciones web interactivas y dinámicas utilizando C# en lugar de JavaScript para el lado del cliente.

El problema de los Desarrolladores .NET con Blazor

Análisis Comparativo de Tecnologías Web

Most used web frameworks among developers 2024 | Statista

Análisis Comparativo de Tecnologías Web Next.js es un framework de desarrollo web basado en React que permite la creación de aplicaciones web y sitios estáticos. Fue desarrollado por Vercel y es ampliamente utilizado para construir aplicaciones de React más robustas y eficientes.

Análisis Comparativo de Tecnologías Web 1. Arquitectura modular y componentes reutilizables 2. Estructura de carpetas organizada y escalable 3. Estándares de codificación y linting 5. Uso de estándares web y tecnologías modernas 6. Manejo eficiente del estado 7. Optimización y rendimiento 8. Desarrollo accesible (a11y) 10. Tipado estático 11. Seguridad 13. Escalabilidad y mantenibilidad CSS Frontend escalable y mantenible (chatgpt.com)

Manejo eficiente del estado (Según la Docs de Microsoft) El manejo de estado se refiere a cómo una aplicación almacena, actualiza y comparte información entre componentes. Administración de estado de Blazor en ASP.NET Core | Microsoft Learn

Flujo Bidireccional vs. Flujo Unidireccional El flujo bidireccional se refiere a la capacidad de los componentes de una aplicación para cambiar el estado y que esos cambios se reflejen automáticamente en otros componentes. Por ejemplo, en aplicaciones tradicionales o en enfoques más simples: StateContainer.cs ComponenteB ComponenteA

Flujo Bidireccional Desventajas Esta interconexión puede complicar el seguimiento de cómo y por qué cambia el estado, especialmente en aplicaciones más grandes. Los problemas comunes incluyen: Dificultades para depurar: Si hay múltiples componentes cambiando el mismo estado, es más difícil entender qué acción causó un cambio. Condiciones de carrera: Los cambios de estado pueden ocurrir de manera inesperada o fuera de orden, lo que puede llevar a inconsistencias en la interfaz.

Arquitectura Flux Flux es una arquitectura de manejo de estado popularizada por Facebook, diseñada para aplicaciones unidireccionales. Esto simplifica la lógica y hace que el seguimiento de los cambios de estado sea más predecible. Cuando un componente envía una acción, se sabe exactamente cómo se propagara el cambio en la aplicación, lo que facilita la depuración. In-Depth Overview | Flux (facebookarchive.github.io)

Flujo Unidireccional Store: Donde se almacena el estado de la aplicación. Solo el Store puede modificar el estado. Dispatcher: Un manejador central que recibe todas las acciones y las distribuye a los Stores. Actions: Son objetos que describen eventos o intenciones de cambiar el estado. Views: Componentes que reaccionan a los cambios de estado emitidos por los Stores. Los efectos son operaciones que se llevan a cabo como consecuencia de una acción, pero que no cambian directamente el estado.

Redux: Gestión de Estado Eficiente para Aplicaciones JavaScript Una librería JS para la gestión global de estados predecible y fácil de mantener. Style Guide | Redux

Fluxor: Gestión de Estado Eficiente para Aplicaciones Blazor Fluxor es una biblioteca Flux/Redux para Microsoft . mrpmorris/Fluxor: Fluxor is a zero boilerplate Flux/Redux library for Microsoft .NET and Blazor. (github.com)

Creación de una aplicación Blazor escalable App Blazor con WebApi Integrada Minimal Api) Blazor ✓ AutoRender ✓ FluentUI ✓ Fluxor ✓ FluentValidation WebApi ✓ Vertical Slice ✓ MediatR ✓ EntityFramework Core Compartidos ✓ Modelos Requests y Responses

No content

Conclusiones ● Fluxor hace que nuestra aplicación Blazor sea más Predecible, Flexible, Debuggable y Escalable. ● ChatGPT 3.5 y 4 conocen y saben de Fluxor y la arquitectura Flux, que lo convierte en una gran ayuda para agilizar crear las clases más rápido. ● Podemos armar estructuras de nuestras aplicaciones Blazor, basándonos en las estructuras y prácticas de otros frameworks web.

Muchas Gracias!!