Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Blazor For All: 5 Consejos para usar Blazor com...

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

Lautaro Carro

August 12, 2023
Tweet

More Decks by Lautaro Carro

Other Decks in Technology

Transcript

  1. 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.
  2. { "name": "Lautaro Carro", "username": "@lauchacarro 📷", "award": "Microsoft MVP

    🏆", "job": "Tech Lead y Coach en Algeiba 💻", "communities": ["Latino .NET Online"] }
  3. 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
  4. 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
  5. 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
  6. 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/
  7. 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.
  8. 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.
  9. 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
  10. ¿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
  11. 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