DEV Community

Cover image for [PT-Br] Conheça o Blazor e o poder do WebAssembly
João Paulo de C. Lima
João Paulo de C. Lima

Posted on

[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:

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
Enter fullscreen mode Exit fullscreen mode
cd NOME_QUE_VOCE_ESCOLHEU
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Codificando

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

Imagem 1

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:
Imagem 2

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”.
Imagem 3

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:
Imagem 4

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

Nossa págna “Cliente” está vazia:
Imagem 5

Vamos cadastrar alguns clientes:
Imagem 6
Imagem 7
Imagem 8

Agora, nossa página de “Clientes” foi preenchida:
Imagem 9
Repare que podemos editar e excluir o dado cadastrado.
Vamos, primeiro, editar:
Imagem 10
Imagem 11
Imagem 12

Agora, vamos excluí-lo:
Imagem 13
Imagem 14

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!

Discussion (0)