E ai pessoal, tudo certo?

Neste artigo, gostaria de apresentar a todos uma novidade que vem chegando, que é 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 certo… 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 no 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?

WebAssembly, para quem ainda não conhece, tudo indica que ele é 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 como um código nativo de máquina e possui performance superior ao JavaScript.

Atualmente, a documentação e padrões do WebAssembly encontra-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 esta 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 um 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 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 JS 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 isto muda o jogo… Até por que 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 backend .NET para o front, dificulta um pouco a migração de desenvolvedores já habituados a 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 ia encerrar 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, vamos ter 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

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

Para isto, 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, através do 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, qualquer lib JS que tenhamos, mas nosso código C# não está visível.

Imagem de nossa aplicação em execução. Experimente inspecionar o conteúdo, apenas o HTML e CSS estarão visíveis, o código C# não, pois está compilado no arquivo do Web Assembly

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.

Estrutura do projeto, semelhante a de um projeto Razor Pages em sua estrutura.

Criando a página de busca de anúncios

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

Código do arquivo SearchItems.cshtml

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. Em 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:

Código do arquivo NavMenu.cshtml

Executando a página de busca de anúncios

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

Novo item no menu

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.

Nossa página que utiliza a API de busca em funcionamento. Experimente abrir a aba Network do Google Chrome antes de realizar a busca e clique em Search. Apenas o request a API de busca foi feito, como um SPA.

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 disponibilidade vou respondendo a todos.

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