¿Cuándo utilizar Blazor Custom Elements? - NET Conf 2022 CEC - Lima

Fui invitado a participar de la NET Conf 2022 CEC - Lima organizada por Cloud Experts de Perú donde aprendimos a utilizar Blazor Custom Elements en una situación avanzada de migración.

https://restofmycloud.com/events/blazor-custom-elements-net-conf-2022-lima

Transcript

1. ¿Cuándo utilizar
   Blazor Custom Elements?
   Lautaro Carro
   

   View Slide

2. {
   "name": "Lautaro Carro",
   "username": "@lauchacarro 📷",
   "award": "Microsoft MVP 🏆",
   "job": "Desarrollador y Coach en Algeiba 💻",
   "communities": ["Latino .NET Online"]
   }
   

   View Slide

3. Custom elements @bind enhancements
   LocationChanging
   QuickGrid [PREVIEW]
   Loading progress
   Empty template
   Dynamic auth
   NavigationLock
   More crypto algs
   SIMD / vectorization Faster AOT code Improve debugger
   Multithreading [ALPHA]
   Improve hot reload Fixes & optimizations
   History state
   

   View Slide

4. Agenda:
   • Custom Elements en el 2017
   • ¿Qué es Blazor Custom Elements ?
   • Demos
   • Migrar WebForms a Blazor
   • Microfrontend
   

   View Slide

5. Custom Elements en el 2017
   • WebComponents es un conjunto de características relacionadas con
   HTML, CSS y Javascript, mediante las cuales se pueden crear elementos
   mantenibles, reutilizables y encapsulados llamados componentes
   ¿Qué son los WebComponents? - Javascript en español - Lenguaje JS
   

   View Slide

6. Custom Elements en el 2017
   • Los Custom Elements (Etiquetas HTML personalizadas) son una de las
   características que forman los WebComponents, y mediante los cuales
   podemos crear nuestras propias etiquetas HTML de forma nativa,
   dotándolos de su propio marcado, funcionalidad y/o estilo.
   ¿Qué son los WebComponents? - Javascript en español - Lenguaje JS
   

   View Slide

7. View Slide

8. Hablemos de Blazor
   

   View Slide

9. ¿Qué es Blazor Custom Elements ?
   • Nos permite crear una Etiqueta HTML personalizada que al utilizarla
   en cualquier sitio web, nos renderice un componente de Blazor.
   

   View Slide

10. View Slide

11. ¿Cómo funciona Blazor
    Custom Elements ?
    

    View Slide

12. Los Archivos que carga Blazor
    https://www.MyBlazorApp.com/
    • _framework/blazor.server.js
    • _content/BlazorAppFacturas.styles.css
    • _blazor/initializers
    • _blazor/negotiate?negotiateVersion=1
    • _content/Microsoft.AspNetCore.Components.CustomElements/Micros
    oft.AspNetCore.Components.CustomElements.lib.module.js
    

    View Slide

13. Solo funciona como SameOrigin
    https://www.MyLegacyApp.com/
    • _framework/blazor.server.js
    • _content/BlazorAppFacturas.styles.css
    • _blazor/initializers
    • _blazor/negotiate?negotiateVersion=1
    • _content/Microsoft.AspNetCore.Components.CustomElements/Micros
    oft.AspNetCore.Components.CustomElements.lib.module.js
    

    View Slide

14. Solo funciona como SameOrigin
    Facturas/Editar.aspx
    _framework/blazor.server.js
    Facturas/Editar/_content/BlazorAppFacturas.styles.css
    _framework/blazor.server.js
    _content/BlazorAppFacturas.styles.css
    Facturas/Editar.aspx
    Reverse Proxy
    

    View Slide

15. View Slide

16. ¿Por qué usar Yarp.ReverseProxy?
    • Mantiene las aplicaciones web desacopladas entre sí.
    • Es fácil de publicar en un ambiente de testing o producción.
    • Se encarga de ser intermediario tanto de Request HTTP como de WebSockets
    • En arquitectura de software, un Reverse Proxy permite sumar seguridad a nuestro
    sistema entero.
    

    View Slide

17. Conclusiones
    • Blazor Custom Elements es una funcionalidad clave para realizar modernizaciones de proyectos legacy.
    • Con Yarp, EF Core 7 y Blazor Custom Elements se vuelve más fácil realizar estrategias de modernización.
    • Con la magia de Blazor WebAssembly pueden desarrollar aplicaciones poderosas y complejas usando
    MicroFrontend.
    • Tenemos la oportunidad de rejuvenecer aquellos sistemas con más de 10 años, otorgándoles 10 años más de
    soporte
    

    View Slide

18. Muchas Gracias
    

    View Slide