Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

¿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

Lautaro Carro

January 28, 2023
Tweet

More Decks by Lautaro Carro

Other Decks in Technology

Transcript

  1. { "name": "Lautaro Carro", "username": "@lauchacarro 📷", "award": "Microsoft MVP

    🏆", "job": "Desarrollador y Coach en Algeiba 💻", "communities": ["Latino .NET Online"] }
  2. 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
  3. Agenda: • Custom Elements en el 2017 • ¿Qué es

    Blazor Custom Elements ? • Demos • Migrar WebForms a Blazor • Microfrontend
  4. 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
  5. 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
  6. ¿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.
  7. 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
  8. 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
  9. ¿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.
  10. 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