Introdução ao Blazor

O que é?

Blazor é um Web Framework da Microsoft, para criar aplicações Web SPA (Single Page Application) usando apenas HTML, CSS e a linguagem C#.

Se você conhece Angular, React ou Vue.Js, o Blazor é um novo concorrente para esses caras. E a grande vantagem, na minha opinião, é que com Blazor você NÃO precisa usar JavaScript!

No dia 18 de abril de 2019 o Blazor foi anunciado oficialmente como um framework da Microsoft, em versão preview.

Até então, o Blazor era apenas um projeto experimental, e ainda não tínhamos certeza se o Framework seria realmente lançado como um produto. Desde o início de 2020 o Blazor é parte importante do .NET, e está disponível junto com a última versão da plataforma.

WebAssembly

Calma, não estamos falando da volta do Silverlight. O Blazor não é e nem depende de nenhum plugin no browser. O Blazor roda no WebAssembly https://webassembly.org.

WebAssembly é uma iniciativa de viabilizar a execução de código binário dentro dos browsers modernos. Também chamado de Wasm, o WebAssembly surgiu inicialmente para suportar código compilado, escrito em C ou C++.

Atualmente já temos suporte para outras plataformas e linguagens, como é o caso do .NET/C#. Na verdade, no WebAssembly temos suporte para rodar uma versão do Mono, o que viabiliza a implementação do Blazor.

O WebAssembly é um padrão aberto e suportado pelo W3C https://developer.mozilla.org/en-US/docs/WebAssembly. Com isso, os browsers modernos passaram a suportar e manter o WebAssembly, o que nos dá segurança em adotar um framework como o Blazor.

cliente-side X server-side

A versão do Blazor que roda no WebAssembly dos Browsers, é o que chamamos de Blazor client-side. O Framework também pode ser usado no “modo” server-side. A diferença é que em server-side o Blazor não depende do WebAssembly, e vai rodar com a ajuda do SignalR.

A ideia do modo server-side é que o código Blazor execute no servidor, e o browser seja atualizado através do SignalR. O SignalR é um framework da Microsoft que abre uma comunicação do servidor com o cliente através de web-socket. Veja mais aqui: https://docs.microsoft.com/en-us/aspnet/signalr/

Componentes

O Blazor adota o conceito de componentes, como base para a criação de aplicações Web. Um componente pode ser uma Página, uma janela de Diálogo, um formulário, ou uma simples “parte” da interface do usuário.

Um componente Blazor é um arquivo com extensão .razor, que pode conter HTML, CSS e código escrito em C#. O componente quando “executado”, irá renderizar o HTML final a ser exibido para o usuário.

Veja na Figura 1 um exemplo de um componente Blazor.

Figura 1: Exemplo de um componente Blazor

A diretiva @page, na primeira linha do componente, indica que esse componente irá responder pela rota /counter. Logo abaixo temos a estrutura HTML do componente. Tudo que começa com @ é C# e será compilado.

No bloco @code temos mais código C#, onde podemos colocar atributos, propriedades e métodos. Nesse exemplo temos um atributo chamado currentCount, e um método chamado IncrementCount.

Toda vez que o usuário clicar no botão HTML, o método IncrementCount irá incrementar o atributo, que será automaticamente atualizado no HTML.

Esse é só um exemplo simples do que podemos fazer. O Blazor possuí várias outras funcionalidades, como: Parâmetros, Eventos, Data Binding, Rotas com parâmetros, Injeção de Dependência, Layouts, Templating etc.

Como usar

Para utilizar o Blazor basta ter instalado o SDK da última versão do .NET, que você encontra no seguinte link:

https://dotnet.microsoft.com/download/dotnet

O Visual Studio 2019 tem um bom suporte para a edição dos componentes Blazor, e é uma ótima opção. Mas se preferir você também pode utilizar o Visual Studio Code, ou qualquer outro Editor da sua preferência.

Com isso você vai conseguir criar projetos usando os templates do Blazor. No Visual Studio basta criar um projeto do tipo “Blazor App”.

Mas se você preferir utilizar o VS Code para criar o seu projeto Blazor, basta executar o comando dotnet new blazor, como mostra a Figura 2.

Figura 2: Criando novo projeto blazor (server-side) pelo VSCode

Quem está usando

Se você quer ter uma ideia de como o Blazor está caminhando, minha dica é dar uma olhada nesse repositório github: https://github.com/AdrienTorris/awesome-blazor. Nele você vai encontrar uma extensa lista de Artigos, Blogs, Exemplos, Vídeos, Tutoriais e Bibliotecas.

Uma boa notícia é que empresas como DevExpress, Telerik e Syncfusion já oferecem parte de seus componentes para Blazor, o que nos dá um pouco mais de segurança para adotar o framework.

Conclusão

Para concluir, se você trabalha com C#, o Blazor é uma oportunidade incrível de aproveitar todo o seu conhecimento .NET para criar aplicações Web ricas e rápidas!

Nós na Algorama já estamos utilizando o Blazor em vários de nossos projetos, e já temos aplicações rodando em Produção!

Esse blog foi criado para tratar apenas de Blazor, e você já pode encontrar aqui uma série de artigos aqui que exploram a fundo esse excelente framework!

Grande Abraço e até o próximo!

Publicidade