Slide 1
Slide 1 text
5 Consejos para usar Blazor como
un Senior
Lautaro Carro
Slide 2
Slide 2 text
Disclaimer
• Esta presentación contiene toda la
información necesaria para cumplir
con los objetivos mencionados.
• Cualquier opinión es de mi persona y
no de otra entidad.
Slide 3
Slide 3 text
{
"name": "Lautaro Carro",
"username": "@lauchacarro 📷",
"award": "Microsoft MVP 🏆",
"job": "Tech Lead y Coach en Algeiba 💻",
"communities": ["Latino .NET Online"]
}
Slide 4
Slide 4 text
Mi Experiencia con Blazor
Slide 5
Slide 5 text
Los consejos de
siempre…
Slide 6
Slide 6 text
Los consejos de siempre…
• Implementen seguridad con OAuth2, OpenIDConnect,
Authorization Policies, etc
• Trabajen con Interfaces e Inyección de dependencias
• Código testeable, Clean Code, SOLID
Slide 7
Slide 7 text
Bibliotecas de
clases Razor
Slide 8
Slide 8 text
Bibliotecas de clases Razor
Slide 9
Slide 9 text
Bibliotecas de clases Razor
Panel de Administración
Slide 10
Slide 10 text
Bibliotecas de clases Razor
Basado en una Plantilla
Slide 11
Slide 11 text
Bibliotecas de clases Razor
Basado en una Plantilla (Atomic Desing)
Slide 12
Slide 12 text
Bibliotecas de clases Razor
Múltiples Módulos
Slide 13
Slide 13 text
Conoce Blazor
Slide 14
Slide 14 text
Inicializadores de JavaScript
https://learn.microsoft.com/es-
es/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-7.0
Slide 15
Slide 15 text
Cambiar mensajes por defecto
https://www.variablenotfound.com/2020/10/como-personalizar-los-
mensajes-de-error.html
Slide 16
Slide 16 text
Controla tus componentes:
IComponentActivator
• La interfaz IComponentActivator nos permite implementar nuestro
propio Factory de Componentes
• Muy útil para componentes de UI más avanzados. Con interfaces
(IMySpeacialComponent) podemos realizar cierta lógica para algunos
componentes y para otros no.
https://www.variablenotfound.com/2020/12/como-tomar-el-control-en-el-momento-de.html
Slide 17
Slide 17 text
Escalar nuestra aplicación de Blazor
Server con Azure SignalR
• Un Azure App Service Basic, soporta 350 conexiones de
WebSockets.
• A las 351, es una opción remplazar el SignalR local por el servicio de
Azure SignalR
https://www.youtube.com/watch?v=GArgZnL5cec
Slide 18
Slide 18 text
Sé un Frontend
Developer
Slide 19
Slide 19 text
Variables CSS y SASS
• Las librerías de componentes para que sean escalables usan variables de CSS.
• Podemos declarar variables CSS globales y, cuando sea necesario, modificar su
valor con CSS Isolation (ButtonSuccess.razor.css)
• SASS (CSS com Superpoderes) nos permite tener nuestros mantenibles en vez de
3000 líneas en un styles.css
https://adrianhall.github.io/asp.net/2022/08/26/adding-sass-to-blazor/
Slide 20
Slide 20 text
NPM y Webpack
• En vez de agregar scripts JS al index.html o _Host.cshtml, podemos
utilizar el administrador de paquetes de Node.
• Usar el Package.json junto con herramientas que detecten
vulnerabilidades.
Slide 21
Slide 21 text
BEM: Bloques, Elementos y Modificadores
• La metodología BEM divide la interfaz de usuario en bloques independientes
para crear componentes escalables y reutilizables.
• Propone un estilo descriptivo para nombrar cada una de las clases CSS a utilizar,
permitiendo así crear una estructura de código consistente.
Slide 22
Slide 22 text
PWA: Progresive Web App
Slide 23
Slide 23 text
FluentValidation:
Separar
Validaciones
Slide 24
Slide 24 text
FluentValidation
• Es una librería para construir reglas de validaciones.
• [Data Annotations] ensucia mis clases.
• Usar Blazored.FluentValidation para realizar validaciones (Solo UI) de mis
EditForms
• De ser necesario, un segundo FluentValidation para validaciones con EFCore en
los Services
https://github.com/Blazored/FluentValidation
Slide 25
Slide 25 text
Manejo de
Estado Avanzado
con Fluxor
Slide 26
Slide 26 text
¿Qué es Fluxor?
• Fluxor es una librería que implementa la arquitectura Flux (Redux / NGXS)
para .NET.
• Flux es una arquitectura para el manejo y el flujo de los datos en una
Front-End. Fue ideada por Facebook y vendría a sustituir el patrón MVC.
https://github.com/mrpmorris/Fluxor
Slide 27
Slide 27 text
Arquitectura Flux
Slide 28
Slide 28 text
¡Felicidades, ahora
eres un Senior en
Blazor! 🚀
Slide 29
Slide 29 text
Conclusiones
• Al igual que cualquier otro proyecto de .NET vas a poder aprovechar y separarlo en librerías
de clases Razor.
• C# ya no es solo un lenguaje para Backend, ahora es un lenguaje de programación Fullstack,
incluye Frontend.
• Nuestras aplicaciones Blazor pueden escalar considerablemente. Asegurémonos de conocer
todo lo que Blazor tiene para ofrecernos al llegar la hora de crecer
• Pasamos años desarrollando con la arquitectura MVC. Hora de avanzar a una nueva
arquitectura más moderna… Flux
Slide 30
Slide 30 text
Muchas Gracias