E ai, pessoal! Tudo certo?

Neste artigo, gostaria de apresentar a todos uma novidade que está chegando; o Blazor. Trata-se de um projeto experimental da Microsoft para utilização de views utilizando WebAssembly, com C# e .NET.

Isso mesmo! Você leu certinho: utilizaremos C# e .NET em nossas views. Mas, calma, vou explicar isso direito, vamos lá!

Antes de mais nada:

O que é Blazor?

Blazor é um framework Web, baseado nas tecnologias Web já existentes, como: HTML e CSS, mas utiliza C# e Razor ao invés de JavaScript.

Inclusive, o nome dele vem do Razor: Browser + Razor = Blazor. Mas tem muito mais inovação do que apenas o nome, pois ele utiliza o WebAssembly, garantindo a entrega de um bundle compilado para o Browser, e é seguro, pois impede que o usuário veja qualquer código feito em C#, protegendo sua lógica.

O que é WebAssembly?

Para quem ainda não conhece, tudo indica que o WebAssembly é o futuro da Web. Ele é um arquivo compilado, entregue ao seu browser para execução. É como se o seu browser fosse uma VM como o .NET Framework ou a JVM (Java) executando um código binário (WASM), que é quase tão rápido quanto um código nativo de máquina e possui performance superior ao JavaScript.

Atualmente, a documentação e padrões do WebAssembly encontram-se sob responsabilidade do W3C, organização responsável pela definição de padrões de distribuição de conteúdo para Web. Além disso, a maioria dos browsers modernos de hoje já suporta este padrão, e no caso do Blazor, temos alguns meios de compatibilidade para browsers mais antigos, como IE 9, por exemplo.

Podemos ainda rodar OpenGL, acesso a banco de dados e etc. Inclusive, o Unreal Engine 4 já foi portado para WebAssembly, assim como o .NET Core está passando pela portabilidade.

Aí fica aquela dica: Fiquem de olho nesse cara, pessoal!

Vantagens de utilizar .NET no Browser

O desenvolvimento da Web mudou e evoluiu muito nos últimos anos, mas a construção de aplicativos web modernos ainda representa desafios. O uso do .NET no navegador oferece muitas vantagens que podem facilitar a vida do desenvolvedor.

• Estável e consistente: o .NET oferece APIs padrão, ferramentas e infraestrutura de construção em todas as plataformas .NET que são estáveis, completas e fáceis de usar.
• Linguagens inovadoras modernas: linguagens .NET como C# e F# tornam a programação mais fácil e continuam melhorando com novos recursos inovadores na linguagem.
• Ferramentas líderes da indústria: a família de produtos Visual Studio oferece uma excelente experiência de desenvolvimento .NET no Windows, Linux e MacOS.
• Rápido e escalável: o .NET possui um longo histórico de desempenho, confiabilidade e segurança para desenvolvimento web no servidor. Usar o .NET como um Stack completo facilita a criação de aplicativos rápidos, confiáveis e seguros.

E o Blazor? O que ele oferece?

A equipe do ASP.NET anunciou recentemente que o Blazor entrou na organização do ASP.NET, e entramos numa fase experimental para ver como conseguimos desenvolvê-lo e entregá-lo como produto.

O projeto Blazor é construído sobre o que foi feito pela equipe do Mono para compilar C# para WebAssembly. Esse trabalho está em um nível menor e não fornece qualquer framework para desenvolver aplicações web típicas; é puramente o .NET rodando em browser.

A mudança para a equipe do ASP.NET significa que o projeto terá mais recursos para crescer em um ritmo mais rápido, porém, ainda é cedo para anunciar que o projeto se tornará um produto.

O Blazor possui todas as funcionalidades de um framework SPA, como Angular, React e outros:

• Trabalha com o conceito de Component Model
• Roteamento
• Layouts
• Formulários e Validações
• Dependency Injection nativo
• Interoperabilidade com JavaScript
• Hot-reload durante a fase de desenvolvimento
• Renderização server-side, o que é ótimo para SEO
• Debug em .NET diretamente pela IDE e pelo browser
• IntelliSense e Tooling
• Publica sua aplicação diminuindo (comprimindo) o tamanho do bundle da mesma

Ah, e se o browser não for compatível com WebAssembly?

O Blazor tem a capacidade de oferecer o asm.js, permitindo a mesma experiência até no IE 9.

Mas isso tem futuro? Vai “pegar”?

Enquanto todos os frameworks SPA de mercado são baseados em JavaScript (ou TypeScript, no caso do Angular), o Blazor entrega um código nativo rodando em performance superior e com muito mais segurança, visto que o usuário não tem acesso fácil ao código fonte, como no JavaScript. Mesmo um JavaScript minificado pode ser alterado por um usuário mais experiente de forma rápida.

O JavaScript é atualmente considerado o Assembly da internet, mas na minha visão, com a adoção do WebAssembly, isso muda o jogo. Até porque qualquer linguagem pode gerar WebAssembly e se beneficiar de todas suas vantagens.

Aí temos a seguinte pergunta:

Qual será o futuro do JavaScript com a adoção do WebAssembly?

Minhas impressões sobre a adoção do Blazor

• Entrega WebAssembly: já sabemos e vimos que isso é vantagem.
• Possui todas as features de um framework SPA como Angular, React, etc.
• Permite aproveitar todo o conhecimento de .NET com C# e Views em Razor, o que facilita a curva de aprendizado e de entrega para times que já trabalham com C# e .NET.
• Server-side rendering nativo, ótimo para SEO.
• .NET de ponta a ponta! Apenas um stack.
• É completamente novo e experimental, não sabemos se terá continuidade ou adoção, ou se releases futuros vão quebrar as interfaces que temos hoje.
• É baseado em .NET; da mesma forma que facilita a migração de desenvolvedores back-end .NET para o front, dificulta um pouco a migração de desenvolvedores já habituados em utilizar JavaScript para ele.
• Não possui componentes prontos, assim como existem para Angular e React, já que é totalmente novo. Ao mesmo tempo que isso pode incentivar o surgimento de novos projetos open source para isto.
• Não está 100% com suporte da comunidade, documentação e tooling para Visual Studio ou no Code.

Apenas levantando uma observação quanto aos pontos negativos, a maioria deles é devido ao fato de ser um framework totalmente novo e experimental. Com a evolução e adoção do mesmo pela comunidade, isto tende a mudar muito, agregando mais pontos positivos que negativos.

Talk is cheap, show me the code!

Como sou bem do tipo “mão na massa”, não encerraria um artigo desses sem uma demo. Vamos criar um projeto ASP.NET Core utilizando o template padrão do Blazor, e adicionar uma página de busca de anúncios, que utiliza as APIs públicas do Mercado Livre.

Em nosso exemplo, teremos uma tela com um campo para informar o texto a ser pesquisado, e retornaremos uma lista de anúncios, onde exibiremos em uma tabela o código do anúncio, título, preço, se é um produto novo ou usado, e o link para o anúncio. É bem simples, vamos lá!

Criando o projeto

Para poder utilizar a última versão disponível, precisamos utilizar a versão 2.1 RC do .NET Core. Você pode fazer o download em: https://www.microsoft.com/net/download/dotnet-core/sdk-2.1.300-rc1

Feito isso, é necessário também instalar o template padrão do Blazor, assim poderemos utilizar o comando dotnet new ao invés de montar todo o projeto manualmente.

Para isso, basta executar o comando:

dotnet new -i "Microsoft.AspNetCore.Blazor.Templates"

Com isso, criamos nosso projeto através do comando:

dotnet new Blazor --name DemoBlazor

Para execução do projeto, fazemos da mesma forma que com projetos comuns do ASP.NET Core, com o seguinte comando:

dotnet run

Após a aplicação carregar, abrimos o browser na URL informada no console, e podemos ver a aplicação em execução. Através do developer tools, podemos visualizar o HTML gerado e qualquer lib JS que tenhamos, mas nosso código C# não está visível.

Analisando a estrutura do projeto

Vamos analisar a estrutura de nosso projeto para entender melhor como o mesmo funciona. Basicamente, possui a mesma estrutura de um projeto utilizando Razor Pages.

Criando a página de busca de anúncios

Vamos adicionar uma nova página ao nosso projeto, chamada SearchItems.cshtml no diretório Pages. O conteúdo desta página deve ser o seguinte:

O que observamos neste código:

• A primeira linha define a rota / endereço da página.
• Na segunda linha, estamos injetando o componente HttpClient, utilizando o DI nativo do ASP.NET Core.
• Temos nosso código HTML padrão, criando o campo de busca, botão para acionar a busca e tabela onde exibiremos os resultados.
• Seção @functions. É neste ponto que adicionamos nosso código C# que será compilado para WebAssembly.
• No nosso caso, temos a definição de duas classes para deserializar o resultado da API, variáveis de escopo da página que iremos utilizar para fazer o bind dos dados com o nosso HTML e a função Search, que irá realizar a chamada para a API do Mercado Livre.
• Precisamos também adicionar nossa página ao menu de navegação. Basta alterar o arquivo NavBar.cshtml e adicionar o trecho de código em destaque abaixo:

Executando a página de busca de anúncios

Vamos executar nossa aplicação novamente, através do comando dotnet run. Com isso, atualizaremos o browser e poderemos ver um novo item no menu. Vamos clicar nele para navegar para nossa nova página.

Nesta página, vamos procurar por “carregador de celular”, e clicar em “Search”.

Após alguns segundos, visto que não fizemos nenhum mecanismo de carregamento / espera, os resultados irão aparecer em nossa tela. Caso não tenhamos nenhum anúncio no resultado da busca, será exibido um texto informando que não foi encontrado nenhum anúncio para os critérios fornecidos.

Encerrando

Vimos neste artigo mais informações sobre o Blazor, um novo framework para SPA, baseado em WebAssembly e uma demonstração do mesmo em funcionamento. Ainda é algo novo e com pouco suporte, mas já apresenta um grande potencial, ainda mais por ser um projeto aberto onde toda a comunidade pode e deve contribuir.

O código desta demo está disponível no meu Github.

Abaixo, os slides onde apresentei no Visual Studio Summit 2018:

Não deixem de comentar. Podem fazer perguntas que, conforme a disponibilidade, vou respondendo a todos.

Um abraço e até a próxima!