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. ¿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