[PT-Br] Conheça o Blazor e o poder do WebAssembly
Tags: csharp, blazor, crud, braziliandevs
Published: 2021-05-01 12:33:47

# 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)](https://dotnet.microsoft.com/download).
2. Baixe e instale o [Visual Studio 2017 (15.7 ou posterior)](https://visualstudio.microsoft.com/pt-br/) com o ASP.NET e a carga de trabalho de desenvolvimento da web selecionados.

Fonte: [link](https://blazor-tutorial.net/overview)


# Um CRUD simples utilizando Blazor, EFCore e InMemoryDatabase
Neste exemplo vou lhes mostrar como fazer um simples CRUD utilizando as seguintes ferramentas:
- [Blazor](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor);
- [EFCore](https://docs.microsoft.com/pt-br/ef/core/);
- [InMemoryDB](https://docs.microsoft.com/pt-br/ef/core/providers/in-memory/?tabs=dotnet-core-cli).

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](https://visualstudio.microsoft.com/pt-br/) 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](ttps://docs.microsoft.com/pt-br/ef/core/providers/in-memory/?tabs=dotnet-core-cli). 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”.

![Imagem 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/104hdhw2664wm274l2ad.png)

A classe “ClienteService.cs” terá o seguinte código:
{% gist https://gist.github.com/joao2391/bb064d776937b053a96dc46104c905ff %}

 A classe “Context.cs” terá o seguinte código:
{% gist https://gist.github.com/joao2391/57ed4d6f90f4c4c6ef7ae3e13c798676 %}

Agora, dentro da pasta “Models”, vamos criar a seguinte classe:
![Imagem 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t027l1rjiegisla8ncne.png)

A classe “Model.cs” terá o seguinte código:
{% gist https://gist.github.com/joao2391/d85b83cfe4bd68567aa9c99e183aacb2 %}

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”.
![Imagem 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhlrwwswir8kdtjvsnto.png)

A página “Cadastrar.razor” terá o seguinte código:
{% gist https://gist.github.com/joao2391/fea6866a65e6d4c6db2b909ee87e4ca8 %}

E a página “Editar.razor” terá o seguinte código:
{% gist https://gist.github.com/joao2391/516169cc058cde976109c5d967182b16 %}

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:
![Imagem 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvpcmn45bev1hmeeoavp.png)

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

Nossa págna “Cliente” está vazia:
![Imagem 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkb9lelbzb5wki7db9qy.png)

Vamos cadastrar alguns clientes:
![Imagem 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef2x4vxfn6skfxiweyqa.png)
![Imagem 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww3cw77y30ryq9hl0afs.png)
![Imagem 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rivx4yw5pows02aa3pjn.png)

Agora, nossa página de “Clientes” foi preenchida:
![Imagem 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbac0tn26c32un3ctaz2.png)
Repare que podemos editar e excluir o dado cadastrado.
Vamos, primeiro, editar:
![Imagem 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvs9nyjd48a25w2c2icg.png)
![Imagem 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieoz34a2ao5jcwi2ldnw.png)
![Imagem 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqyzhjk4nj6cy5edixy.png)

Agora, vamos excluí-lo:
![Imagem 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01c0shdgvqa5ck3ugqb2.png)
![Imagem 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkb9lelbzb5wki7db9qy.png)

## 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](https://github.com/joao2391/CRUDBlazor)

Um grande abraço!