Introdução ao ASP.NET Core BlazorIntroduction to ASP.NET Core Blazor

Por Daniel Roth e Luke LathamBy Daniel Roth and Luke Latham

Bem-vindo ao Blazor !Welcome to Blazor!

Blazor é uma estrutura para a criação de interface do usuário da Web interativa do lado do cliente com o .net:Blazor is a framework for building interactive client-side web UI with .NET:

  • Crie interfaces de uso avançadas e interativas usando C# em vez de JavaScript.Create rich interactive UIs using C# instead of JavaScript.
  • Compartilhe a lógica de aplicativo do lado do cliente e do servidor gravada no .NET.Share server-side and client-side app logic written in .NET.
  • Renderize a interface do usuário, como HTML e CSS para suporte amplo de navegadores, incluindo navegadores móveis.Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • Integre-se com plataformas de hospedagem modernas, como o Docker.Integrate with modern hosting platforms, such as Docker.

Usar o .NET para desenvolvimento web do lado do cliente oferece as seguintes vantagens:Using .NET for client-side web development offers the following advantages:

  • escreva o código em C# em vez de JavaScript.Write code in C# instead of JavaScript.
  • Aproveite o ecossistema .NET existente das bibliotecas .net.Leverage the existing .NET ecosystem of .NET libraries.
  • Compartilhe a lógica de aplicativo entre o servidor e o cliente.Share app logic across server and client.
  • Beneficie-se com o desempenho, confiabilidade e segurança do .NET.Benefit from .NET's performance, reliability, and security.
  • Mantenha-se produtivo com o Visual Studio no Windows, no Linux e no MacOS.Stay productive with Visual Studio on Windows, Linux, and macOS.
  • Crie um conjunto comum de linguagens, estruturas e ferramentas que são estáveis, com recursos avançados e fáceis de usar.Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

ComponentesComponents

Blazor os aplicativos são baseados em componentes .Blazor apps are based on components . Um componente no Blazor é um elemento da interface do usuário, como um formulário de página, caixa de diálogo ou entrada de dados.A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

Os componentes são classes .NET C# embutidas em assemblies .net que:Components are .NET C# classes built into .NET assemblies that:

A classe de componente geralmente é escrita na forma de uma Razor página de marcação com uma .razor extensão de arquivo.The component class is usually written in the form of a Razor markup page with a .razor file extension. Os componentes no Blazor são formalmente chamados de Razor componentes .Components in Blazor are formally referred to as Razor components . Razor é uma sintaxe para combinar marcação HTML com código C# projetado para a produtividade do desenvolvedor.Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor permite que você alterne entre marcação HTML e C# no mesmo arquivo com suporte à programação IntelliSense no Visual Studio.Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor As páginas e MVC também usam o Razor .Razor Pages and MVC also use Razor. Ao contrário de Razor páginas e MVC, que são criadas em um modelo de solicitação/resposta, os componentes são usados especificamente para a lógica e a composição da interface do usuário do lado do cliente.Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor usa marcas HTML naturais para composição da interface do usuário.Blazor uses natural HTML tags for UI composition. A marcação a seguir Razor demonstra um componente ( Dialog.razor ) que exibe uma caixa de diálogo e processa um evento quando o usuário seleciona um botão:The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

No exemplo anterior, OnYes é um método C# disparado pelo evento do botão onclick .In the preceding example, OnYes is a C# method triggered by the button's onclick event. O texto () e o título () da caixa de diálogo ChildContent Title são fornecidos pelo seguinte componente que usa esse componente em sua interface do usuário.The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

O Dialog componente é aninhado dentro de outro componente usando uma marca HTML.The Dialog component is nested within another component using an HTML tag. No exemplo a seguir, o Index componente ( Pages/Index.razor ) usa o Dialog componente anterior.In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. O atributo da marca Title passa um valor para o título para a Dialog Propriedade do componente Title .The tag's Title attribute passes a value for the title to the Dialog component's Title property. O Dialog texto do componente ( ChildContent ) é definido pelo conteúdo do <Dialog> elemento.The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Quando o Dialog componente é adicionado ao Index componente, o IntelliSense no Visual Studio agiliza o desenvolvimento com a conclusão da sintaxe e do parâmetro.When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

A caixa de diálogo é renderizada quando o Index componente é acessado em um navegador.The dialog is rendered when the Index component is accessed in a browser. Quando o botão é selecionado pelo usuário, o console de ferramentas de desenvolvedor do navegador mostra a mensagem escrita pelo OnYes método:When the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

Componente de caixa de diálogo renderizado no navegador aninhado dentro do componente de índice.

Os componentes são renderizados em uma representação na memória do Modelo de Objeto do Documento do navegador (dom) chamado de árvore de renderização , que é usada para atualizar a interface do usuário de maneira flexível e eficiente.Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree , which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly o é uma estrutura de Spa (aplicativo de página única) para a criação de aplicativos Web do lado do cliente interativos com o .net.Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly usa padrões abertos da Web sem plugins ou recompilando código em outras linguagens.Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly funciona em todos os navegadores da Web modernos, incluindo navegadores móveis.Blazor WebAssembly works in all modern web browsers, including mobile browsers.

A execução de código .NET dentro de navegadores da Web é possibilitada pelo Webassembly (abreviado wasm ).Running .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). O WebAssembly é um formato de código de bytes compacto, otimizado para download rápido e máxima velocidade de execução.WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. O WebAssembly é um padrão aberto da Web compatível com navegadores da Web sem plug-ins.WebAssembly is an open web standard and supported in web browsers without plugins.

O código Webassembly pode acessar a funcionalidade completa do navegador via JavaScript, chamada de interoperabilidade de JavaScript , geralmente reduzida para interoperabilidade de JavaScript ou de js .WebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability , often shortened to JavaScript interop or JS interop . O código .NET executado por meio da WebAssembly no navegador é executado na área restrita do JavaScript do navegador com as proteções que a área restrita oferece contra ações mal intencionadas no computador cliente..NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

::: no-Loc (Webassembly do mais alto)::: executa o código .NET no navegador com Webassembly.

Quando um Blazor WebAssembly aplicativo é compilado e executado em um navegador:When a Blazor WebAssembly app is built and run in a browser:

  • Arquivos de código C# e Razor arquivos são compilados em assemblies .net.C# code files and Razor files are compiled into .NET assemblies.
  • Os assemblies e o tempo de execução do .net são baixados para o navegador.The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly Inicializa o tempo de execução do .NET e configura o tempo de execução para carregar os assemblies para o aplicativo.Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. O Blazor WebAssembly tempo de execução usa a interoperabilidade JavaScript para lidar com a manipulação de Dom e chamadas de API de navegadorThe Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

O tamanho do aplicativo publicado, seu tamanho de payload , é um fator de desempenho crítico para a utilidade do aplicativo.The size of the published app, its payload size , is a critical performance factor for an app's useability. Um aplicativo grande leva um tempo relativamente longo para baixar para um navegador, o que afeta a experiência do usuário.A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly otimiza o tamanho da carga para reduzir os tempos de download:Blazor WebAssembly optimizes payload size to reduce download times:

  • O código não utilizado é removido do aplicativo quando é publicado pela corte de Il (linguagem intermediária).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • As respostas HTTP são compactadas.HTTP responses are compressed.
  • O runtime do .NET e os assemblies são armazenados em cache no navegador.The .NET runtime and assemblies are cached in the browser.
  • O código não utilizado é retirado do aplicativo quando publicado pelo Vinculador de linguagem intermediária (IL).Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • As respostas HTTP são compactadas.HTTP responses are compressed.
  • O runtime do .NET e os assemblies são armazenados em cache no navegador.The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor dissocia a lógica de renderização do componente de como as atualizações da interface do usuário são aplicadas.Blazor decouples component rendering logic from how UI updates are applied. Blazor Server fornece suporte para hospedar Razor componentes no servidor em um aplicativo ASP.NET Core.Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. As atualizações da interface do usuário são manipuladas em uma SignalR conexão.UI updates are handled over a SignalR connection.

Os identificadores de tempo de execução:The runtime handles:

  • Enviando eventos de interface do usuário do navegador para o servidor.Sending UI events from the browser to the server.
  • Aplicando atualizações de interface do usuário ao componente renderizado que são enviados de volta pelo servidor.Applying UI updates to the rendered component that are sent back by the server.

A conexão usada pelo Blazor Server para se comunicar com o navegador também é usada para lidar com as chamadas de interoperabilidade do JavaScript.The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

::: no-Loc (servidor de maior número)::: executa o código .NET no servidor e interage com o Modelo de Objeto do Documento no cliente sobre uma::: no-Loc (Signalr)::: Connection

Interoperabilidade do JavaScriptJavaScript interop

Para aplicativos que exigem bibliotecas JavaScript e acesso a APIs do navegador de terceiros, os componentes interoperam com o JavaScript.For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. Os componentes são capazes de usar qualquer biblioteca ou API que o JavaScript possa usar.Components are capable of using any library or API that JavaScript is able to use. O código c# pode chamar o código JavaScripte o código JavaScript pode chamar código C#.C# code can call into JavaScript code, and JavaScript code can call into C# code.

Compartilhamento de código e o .NET StandardCode sharing and .NET Standard

Blazor implementa o .net Standard, que permite que os Blazor projetos referenciem bibliotecas que estão em conformidade com .net Standard especificações.Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. O .NET Standard é uma especificação formal das APIs do .NET que são comuns entre as implementações do .NET..NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard bibliotecas de classe podem ser compartilhadas entre diferentes plataformas .NET, como Blazor , .NET Framework, .NET Core, Xamarin, mono e Unity..NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

As APIs que não são aplicáveis em um navegador da Web (por exemplo, para acessar o sistema de arquivos, abrir um soquete e threading) geram a PlatformNotSupportedException.APIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

Recursos adicionaisAdditional resources