Slide 1
Slide 1 text
¿Cuándo utilizar
Blazor Custom Elements?
Lautaro Carro
Slide 2
Slide 2 text
{
"name": "Lautaro Carro",
"username": "@lauchacarro 📷",
"award": "Microsoft MVP 🏆",
"job": "Desarrollador y Coach en Algeiba 💻",
"communities": ["Latino .NET Online"]
}
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
Agenda:
• Custom Elements en el 2017
• ¿Qué es Blazor Custom Elements ?
• Demos
• Migrar WebForms a Blazor
• Microfrontend
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Hablemos de Blazor
Slide 9
Slide 9 text
¿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.
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
¿Cómo funciona Blazor
Custom Elements ?
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
¿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.
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Muchas Gracias