¿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
2. { "name": "Lautaro Carro", "username": "@lauchacarro 📷", "award": "Microsoft MVP 🏆", "job": "Desarrollador y Coach en Algeiba 💻", "communities": ["Latino .NET Online"] }
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
4. Agenda: • Custom Elements en el 2017 • ¿Qué es Blazor Custom Elements ? • Demos • Migrar WebForms a Blazor • Microfrontend
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
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
8. Hablemos de Blazor
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.
11. ¿Cómo funciona Blazor Custom Elements ?
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
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
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
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.
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
18. Muchas Gracias