Introdução ao Blazor – Blaze of Code
abril 22, 2019 julho 24, 2019 ~ Rodrigo Sendin
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.
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/
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 já foi dito o Blazor ainda está em preview, mas já podemos utilizá-lo, basta fazer algumas coisas:
Instale o .NET Core 3.0 Preview 7 SDK (3.0.100-preview7-012821)
Instale o Visual Studio Code e/ou o Visual Studio 2019 Preview
Instale os templates do Blazor através do seguinte comando a ser executando no prompt de comando:
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
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.
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!
Blazorc#dotnetdotnetcoredotnetcore3spawasmwebassembly
Próximo ›Criando um novo Projeto Blazor
7 comentários em "Introdução ao Blazor"
Pingback: Criando um novo Projeto Blazor – Blaze of Code
Pingback: Templated Components do Blazor – Blaze of Code
Franklin Hermes disse:
maio 31, 2019 às 10:48 am
Caramba! este este blog e seguir seu twitter é tudo que eu estava procurando para continuar empolgado com Blazor, muito obrigado por todo conteúdo.