[PT-Br] Conheça o Blazor e o poder do WebAssembly

Overview

O que é Blazor?

É um framework para aplicações “client-side” escrito em .NET e rodando em cima do WebAssembly.
É baseado em tecnologias já existentes como HTLM e CSS, mas você pode usar C# e Razor ao invés de Javascript para buildar os componentes. Oferece todos os benefícios de uma plataforma de aplicativo de página única (SPA) rica e moderna ao usar o .NET de ponta a ponta.
A ideia sobre o Blazor é ser capaz de combinar Razor e C # em um projeto da web do lado do cliente que roda completamente no navegador.

WebAssembly

WebAssembly é um formato binário para o código no navegador e é executado muito mais rápido do que o JavaScript tradicional. Oferece ao navegador várias vantagens, como:

1. Executa em desempenho quase nativo
2. É executado em uma caixa de areia segura para a memória
3. Compila a partir de uma variedade de linguagens, ou seja, .NET, C, C ++, Java, Rust, etc.

A principal vantagem do WebAssembly é que ele lida muito bem com trabalhos com muita memória e multithreading, em comparação com o javascript.

Features

O Blazor contém todos os recursos de uma estrutura web moderna, como:

• Um modelo de componente para a construção de IU combinável
• Roteamento
• Layouts
• Formulários e validação
• Injeção de dependência
• Recarregamento ao vivo no navegador durante o desenvolvimento
• Renderização do lado do servidor
• Depuração completa do .NET em navegadores e no IDE
• Rich IntelliSense e ferramentas
• Publicação e corte de tamanho de aplicativo

Setup

1. Baixe e instale o .NET Core 2.1 SDK (2.1.300 ou posterior).
2. Baixe e instale o Visual Studio 2017 (15.7 ou posterior) com o ASP.NET e a carga de trabalho de desenvolvimento da web selecionados.

Fonte: link

Um CRUD simples utilizando Blazor, EFCore e InMemoryDatabase

Neste exemplo vou lhes mostrar como fazer um simples CRUD utilizando as seguintes ferramentas:

• Blazor;
• EFCore;
• InMemoryDB.

Após a instalação do Blazor, vamos criar um projeto através do seguinte comando:

dotnet new blazorserver -o <VOCE_ESCOLHE_O_NOME> --no-https

cd NOME_QUE_VOCE_ESCOLHEU

Observação: você pode utilizar o Visual Studio e criar o projeto através do caminho “File > New Solution” e pesquisar por “Blazor”

Para saber se está tudo OK, basta digitar o comando

dotnet run

Por padrão, já vem criada uma aplicação para você se ambientar com o Blazor. Para visualizar a aplicação, acesse http://localhost:5000

Agora, vamos criar as nossas classes, páginas e instalar alguns pacotes necessários para fazermos o CRUD.

Setup:

Primeiro, vamos instalar o pacote Microsoft.EntityFrameworkCore.InMemory. Para isso, digite o seguinte comando (dentro da pasta do seu projeto):

dotnet add package Microsoft.EntityFrameworkCore.InMemory --version 3.1.8

Codificando

Agora, dentro da pasta “Data”, vamos criar as seguintes classes: “Context.cs” e “ClienteService.cs”.

A classe “ClienteService.cs” terá o seguinte código:

A classe “Context.cs” terá o seguinte código:

Agora, dentro da pasta “Models”, vamos criar a seguinte classe:

A classe “Model.cs” terá o seguinte código:

Agora, dentro da pasta “Pages”, vamos criar a pasta “Clientes” e dentro dela as seguintes páginas: “Cadastrar.razor” e “Editar.razor”.
Ainda na pasta “Pages”, vamos criar a página “Cliente.razor”.

A página “Cadastrar.razor” terá o seguinte código:

E a página “Editar.razor” terá o seguinte código:

Repare que em ambas as páginas temos códigos C# escritos dentro do bloco “@code”. Dentro desse bloco é possível criar qualquer código em C#.

Testando

Após realizar a codificação, rode o comando “dotnet build” para buildar a aplicação. Caso apareça algum erro, leia-o atentamente e verifique os passos anteriores deste artigo.

Deu tudo certo? Então, vamos rodar nossa aplicação:
dotnet run

Essa é a nossa página inicial:

Você pode navegar pelas páginas através do menu no lado esquerdo.

Nossa págna “Cliente” está vazia:

Vamos cadastrar alguns clientes:

Agora, nossa página de “Clientes” foi preenchida:

Repare que podemos editar e excluir o dado cadastrado.
Vamos, primeiro, editar:

Agora, vamos excluí-lo:

We made it!

Todas as funções desse CRUD estão na classe “ClienteService.cs”. Lembra do bloco “@code” dentro das páginas “.razor”? Pois bem, é nesse bloco que chamamos as funções da nossa classe.

Este foi um pequeno exemplo de como utilizar o C# com WebAssembly através do Blazor. Espero que tenham gostado.
Qualquer dúvida, crítica ou sugestão deixe nos comentários.

Còdigo no Github: source code

Um grande abraço!