Blazor For All: 5 Consejos para usar Blazor como un Senior

https://restofmycloud.com/events/blazor-for-all-5-consejos-para-usar-blazor-como-senior

Transcript

1. 5 Consejos para usar Blazor como un Senior Lautaro Carro
2. 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.
3. { "name": "Lautaro Carro", "username": "@lauchacarro 📷", "award": "Microsoft MVP 🏆", "job": "Tech Lead y Coach en Algeiba 💻", "communities": ["Latino .NET Online"] }
4. Mi Experiencia con Blazor
5. Los consejos de siempre…
6. 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
7. Bibliotecas de clases Razor
8. Bibliotecas de clases Razor
9. Bibliotecas de clases Razor Panel de Administración
10. Bibliotecas de clases Razor Basado en una Plantilla
11. Bibliotecas de clases Razor Basado en una Plantilla (Atomic Desing)
12. Bibliotecas de clases Razor Múltiples Módulos
13. Conoce Blazor
14. Inicializadores de JavaScript https://learn.microsoft.com/es- es/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-7.0
15. Cambiar mensajes por defecto https://www.variablenotfound.com/2020/10/como-personalizar-los- mensajes-de-error.html
16. 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
17. 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
18. Sé un Frontend Developer
19. 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/
20. 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.
21. 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.
22. PWA: Progresive Web App
23. FluentValidation: Separar Validaciones
24. 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
25. Manejo de Estado Avanzado con Fluxor
26. ¿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
27. Arquitectura Flux
28. ¡Felicidades, ahora eres un Senior en Blazor! 🚀
29. 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
30. Muchas Gracias