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.

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.

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.


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

cd NOME_QUE_VOCE_ESCOLHEU
dotnet run

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

Pasta “Data”
Pasta “Models”
Pasta “Pages”

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.

Tela Inicial — Blazor App
Página “Cliente” — Blazor App
Página “Cadastrar Cliente” — Blazor App
Página “Cadastar Cliente” com informações de um cliente preenchida — Blazor App
Página “Cadastar Cliente” com popup informando que o cadastro deu sucesso— Blazor App
Página inicial de clientes com o cliente cadastrado— Blazor App
Página de editar cliente — Blazor App
Página de editar cliente com popup informando o sucesso da edição — Blazor App
Página incial de clientes com informações editadas — Blazor App
Página incial de clientes com popup infrormando a exclusão com sucesso — Blazor App
Página inicial de clientes sem clientes — Blazor App

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.

.NET Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store