El documento detalla las novedades de Blazor en .NET 6 presentadas en la .NET Conf Latinoamérica 2021, incluyendo un mejor rendimiento, nuevas características como plantillas por defecto y soporte para Hot Reload en Visual Studio 2022. También se abordan mejoras en el manejo de errores, manipulación de parámetros requeridos, y la posibilidad de generar componentes para Angular y React. Además, se introduce la renderización dinámica de componentes y enfoque de elementos en la navegación.

1. .NET Conf Latinoamérica 2021
Novedades en Blazor
con .NET 6
Héctor Pérez - elcamino.dev
Miguel Teheran - Mteheran.dev

2. .NET Conf Latinoamérica 2021
Mejor rendimiento!

3. .NET Conf Latinoamérica 2021
Nueva plantilla para Blazor
• Implicit using por defecto
• Top-level statements por defecto
• Bootstrap 5.1 sin dependencia de javascript
• CSS isolated por defecto

4. .NET Conf Latinoamérica 2021
Puerto Aleatorio

5. .NET Conf Latinoamérica 2021
Hot Reload - Recarga automatica
Visual Studio 2022

6. .NET Conf Latinoamérica 2021
Error boundaries
Manejo de errores no controlados o excepciones dentro de los
componentes
<div class="main">
<div class="content px-4">
<ErrorBoundary>
@Body
</ErrorBoundary>
</div>
</div>

7. .NET Conf Latinoamérica 2021
PageTitle y HeadContent
Definición de títulos para páginas y Head Elements
<PageTitle>Index</PageTitle>
<HeadContent>
<meta name="description" content=".NET CONF"/>
</HeadContent>

8. .NET Conf Latinoamérica 2021
Required parameter - parámetro requerido
[Parameter]
[EditorRequired]
public string Title { get; set; }
[Parameter, EditorRequired]
public string Title { get; set; }

9. .NET Conf Latinoamérica 2021
Manipulación de Query String
[SupplyParameterFromQuery]
https://localhost:7087/counter?CurrentCount=22

10. .NET Conf Latinoamérica 2021
Render components from JavaScript
Podemos invocar componentes desde Javascript y renderizarlos
en cualquier momento
let containerElement = document.getElementById('my-counter');
await Blazor.rootComponents.add(containerElement, 'counter', {
incrementAmount: 10 });

11. .NET Conf Latinoamérica 2021
Render components from JavaScript
(Registro)
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
});
builder.RootComponents.RegisterForJavaScript<Counter>(identifier: "counter");
Blazor Server:
Blazor WebAssembly:

12. .NET Conf Latinoamérica 2021
Dynamically-rendered Components
Podemos cargar componentes de manera dinámica indicando el
tipo
<DynamicComponent Type="@componentType" Parameters="@parameters" />
@code {
private Type componentType = ...;
private IDictionary<string, object> parameters = ...;
}

13. .NET Conf Latinoamérica 2021
Focus an element on navigation
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>

14. .NET Conf Latinoamérica 2021
Generate Angular and React components
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.RegisterForAngular<MyComponent>(); // Register for Angular
builder.RootComponents.RegisterForReact<MyComponent>(); // Register for React
Funcionalidad experimental para generar componentes
específicos para React.js y Angular
samples/samples/aspnetcore/blazor/JSComponentGeneration at main · aspnet/samples (github.com)

15. .NET Conf Latinoamérica 2021
AOT compilation (Without AOT)

16. .NET Conf Latinoamérica 2021
AOT compilation (With AOT)

17. .NET Conf Latinoamérica 2021

18. .NET Conf Latinoamérica 2021

19. .NET Conf Latinoamérica 2021
Datos de contacto
Miguel Teheran
mteheran.dev
@mteheran
Héctor Pérez
elcamino.dev

20. .NET Conf Latinoamérica 2021
¡Gracias!