O que é o experimento Blazor da Microsoft?
Como apaixonado por tecnologia e novidades, resolvi escrever sobre um experimento que o time de ASP.NET da Microsoft criou, está crescendo e ganhando muitos adeptos.
O tema de hoje chama-se Blazor, que é uma mistura de Browser + Razor. Browser porque são as aplicações que rodam em navegadores, ou seja, qualquer aplicação WEB; e Razor por ser uma linguagem (já existente em aplicações ASP.NET MVC/Core) diretamente nas páginas cshtml. Na primeira vez que vi a palestra com o criador do Blazor, o Steve Sanderson na MS/EUA, foi amor a primeira vista, pois pensar em escrever códigos na linguagem C# diretamente no Browser sem precisar de Java Script é um sonho! Isto é possível porque todos os navegadores modernos suportam o WebAssembly, que é um engine dos navegadores que permite executar DLLs. Com isto, o time da MS, que já tem o projeto Mono (Open Source) consolidado, montou uma maneira de enviar o seu projeto web (nos bastidores é a DLL gerada) para o WebAssembly do browser executar a aplicação. Isto significa que a sua aplicação escrita em Blazor com C# será executada no browser, como se fosse uma app nativa, e o melhor de tudo é que não há postback, envios ao servidor, pois tudo está na DLL. Claro que serviços de dados requisitados ao servidor, trafegarão apenas os dados.
A vantagem do WebAssembly é que suporta várias linguagens do mercado, C#, C++, Java, Rust, Python, .NET, etc. Tudo isto roda sem nenhum plugin ou transpilação de código, é nativo. A quantidade de aplicações que rodarão em WebAssembly será enorme, desde web apps a jogos, tudo rodando muito mais rápido e nativo, é um mundo que se abre aos desenvolvedores.
Blazor, por onde começo?
O primeiro passo visitar a página https://blazor.net é instalar os pré-requisitos (https://blazor.net/docs/get-started.html), rápido e simples. Siga os passos descritos no site, você terá que instalar o .NET Core SDK e uma extensão para Visual Studio 2017 (versão 15.8 ou superior) chamada Blazor Language Services extension.
Caso queira instalar o template via linha de código, basta executar:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
Usarei o VS 2017 para criar o projeto, mas caso queira via linha de comando, os passos são:
dotnet new blazor -o BlazorApp1
cd BlazorApp1
dotnet run
Como é o processo de execução?
Veja na figura a seguir que uma vez tendo os arquivos .CS e .CSHTML, uma vez compilado no VS, será gerada a respectiva DLL. Ao ser executada no Browser (CTRL + F5), diversas DLLs do .NET Core e a sua App são enviadas para que o WebAssembly gerenciar.
Exemplo de projeto Blazor no VS 2017
Abra o VS 2017, selecione File / New / Project. Selecione o template Web / ASP.NET Core Web Application. O nome do projeto é BlazorArtigo1, clique em OK e na tela aberta a seguir, selecione o template Blazor. Certifique-se que estejam selecionados .NET Core e ASP.NET Core 2.1. Ao clicar no template Blazor, note a descrição do lado direito superior desta janela, informando: Um projeto para criar uma aplicação Blazor para rodar no WebAssembly. Pronto, é isto que precisamos para entender o projeto e a execução, o que rola nos bastidores. Não se preocupe com os outros 2 templates de Blazor, os quais abordarei em outro artigo.
Estrutura do projeto Blazor
Alguns pontos importantes para destacarmos no Solution Explorer. Em Dependências, assim que o projeto é criado, automaticamente é feito download dos pacotes (Microsoft.AspNetCore.Blazor.Browser e Microsoft.AspNetCore.Blazor.Build) das versões 0.6.0 do NUGET.
As pastas Pages e Shared contém as páginas .CSHTML com os layouts de cada uma.
A pasta wwwroot é a que contém o produto final quando for executado, ou seja, a raiz da aplicação. Nela há o arquivo index.html e conforme a listagem a seguir, note que o único script que vai é o blazor.webassembly.js. Veremos melhor isto quando executarmos no browser.
Já os arquivos Program.cs e Startup.cs são as classes onde tudo inicia. O Program contém o método Main, o qual chama a método CreateHostBuild informando que a classe BlazorWebAssemblyHost será o host da aplicação. Esta por sua vez, chama o método de extensão UseBlazorStartup com a classe Startup para ser invocada.
Como desenvolvedor ASP.NET Core, você sabe que é no Startup.cs que os serviços são configurados, assim como o método Configure, o qual adiciona um componente chamado APP, que na verdade é o arquivo app.cshtml. Este é o assembly a ser gerado.
Execução no Browser
A melhor forma de mostrar o projeto e os bastidores é rodando no browser, portanto, pressione CTRL + F5. Deixei o VS configurado para rodar no Chrome.
Assim que o projeto é aberto no Browser, pressione F12 (ferramentas do desenvolvedor) e F5 para recarregar a app, assim conseguimos inspecionar os detalhes facilmente. E o que foi carregado? Primeiro, veja no rodapé da figura a seguir que o tamanho do projeto tem apenas 1.9MB e carregou em 5.12 segundos as 23 requisições feitas. Clique em Network e observe que há arquivos .CSS, blazor.webassembly.js, mono.wasm, e várias DLLs carregadas (BlazorArtigo1.dll, as DLLs do ASP.NET Core), ou seja, a partir deste momento quem gerencia as DLLs é o WebAssembly.
No menu da aplicação, clique na opção Counter, e quando abrir a página note que a URL ficou como http://localhost:39730/counter. Em seguida, clique várias vezes no botão Click Me e veja que o valor é incrementado em 1.
Vamos ver os bastidores para saber o quanto de código foi feito, portanto, abra a página /Pages/Counter.cshtml.
Eu não alterei nada no template que o Visual Studio criou. Note que a rota está declarada em @ page /conter, existem tags html <h1>, <p>e <button>.
Onde está o código C#?
Numa página cshtml, tudo que inicia com o @ significa códigos em Razor, portanto, temos o @ functions {}, ou seja, todo o conteúdo contigo em functions será puramente código escrito em C#, fantástico!
Neste exemplo, temos uma variável do tipo INT chamada currentCount incializada com zero. Em seguida, há um médodo chamado IncrementCount que incrementa o valor de 1 (++) à variável currentCount. Até aqui é puro C#, no entanto, onde que iremos usá-lo no Razor?
Primeiro que a variável currentCount é referenciada no parágrafo a seguir, ou seja, basta usar o @ seguido do nome da variável. E, claro que temos o intellisense pra ajudar.
<p>Current count: @currentCount</p>
Em seguida, veja que o botão contém o layout do bootstrap (aliás, o Razor usa o padrão bootstrap 4) na declaração do class. E o que significa a palavra onclick? Como o próprio nome diz, ao clicar no botão, invoca o método declarado no @ IncrementCount, que é exatamente o método escrito em C#.
<button class=”btn btn-primary” onclick=”@IncrementCount”>Click me</button>
O melhor de tudo isto é que não há postback no servidor, está tudo rodando localmente no browser. Caso não esteja acreditando pode analisar as requisições em Network (F12).
Agora, pense que podemos ter diversos métodos sendo invocados pelo Razor em atributos onclick, onmouseover, OnInitAsync, etc a partir de qualquer objeto html.
Enfim, este artigo inicial foi para mostrar a vocês o que este experimento chamado Blazor faz com o WebAssembly.
Conclusão
Escrever sobre um experimento que tenho certeza que a Microsoft vai lançar em 2019 e que irá mudar a forma de programarmos aplicações WEB, deixando cada vez mais a inteligência no cliente (Browser), e ainda mais, sem precisar escrever uma linha de Java Script. Não tenho nenhuma dúvida que teremos muito em breve aplicações WEB mais rápidas, com mais recursos, tendo o ASP.NET Core no backend para prover informações e serviços.
Boa sorte, sucesso nos projetos e se precisar treinar o seu time, fale comigo rehaddad@msn.com
