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:

https://devblogs.microsoft.com/aspnet/blazor-now-in-official-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. Hoje o Blazor é parte importante do .NET Core 3, e está disponível na versão preview 7.

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 e 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 com o Blazor, que suporta várias outras funcionalidades, como: Parâmetros, Eventos, Data Binding, Rotas com parâmetros, Injeção de Dependência, Layouts, Templating, etc.

Como usar

Como já foi dito o Blazor ainda está em preview, mas já podemos utilizá-lo, basta fazer algumas coisas:

ddotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview7.19365.7

Com isso você vai conseguir criar projetos usando os templates do Blazor. No Visual Studio basta criar um novo projeto do tipo “Blazor Server App”, e na sequencia selecionar um dos templates do Blazor.

Temos dois templates para o Blazor. Um para criar uma aplicação Blazor em modo server-side, e o segundo para criar aplicações Blazor client-side, para rodar no Browser com o WebAssembly.

Saiba que independentemente do modo que você escolher rodar o Blazor, a forma de codificar os componentes é exatamente a mesma. Eu particularmente estou trabalhando bastante com o modo client-side, e até então os resultados estão sendo muito satisfatórios.

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 (client-side) pelo VSCode

Quem está usando

Ao contrário dos grandes players desse mercado, como Angular, React e Vue.Js, o Blazor está começando e ainda não tem tanta adoção quanto os seus concorrentes.

Mas já podemos encontrar várias referências. 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.

Posso usar em produção?

O framework ainda está em preview, mas já está muito mais maduro do que quando começou de forma experimental.

Eu já estou trabalhando ativamente com o Blazor, e já tenho em produção algumas aplicações de uso próprio, o que eu considero seguro fazer nessa fase.

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!

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!

7 comentários em “Introdução ao Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s