Blazor, WebAssembly e a Síndrome de Estocolmo
Apesar de experimental, Blazor abalou as estruturas no evento Microsoft Build 2018… Mas o que é Blazor? O que é WebAssembly? Como ele funciona? E porque ele gerou (e tende a gerar) fortes emoções!
Antes de mais nada, quem já me acompanha aqui no Blog (e outros canais) já sabe que considero importante contextualizar o leitor no intuito de fazer com que o conhecimento seja melhor transmitido, compreendido e absorvido… Não faço tipo que gera conteúdo no calor do “hype”, no intuito de gerar um conteúdo de maior embasamento técnico e poder manifestar uma opinião mais coerente possível ao amigo desenvolvedor, leitor, ouvinte e “youtuspectador”…
Tendo dito isso, com Blazor não seria diferente!
Tomei contato com o “termo” por acaso em uma “Googlada” e cheguei a um vídeo de uma apresentação do NDC { Oslo } em 2017 onde Steve Sanderson apresentou o projeto que utiliza um mix de “C#, Razor e HTML” capaz de executar bibliotecas .NET DIRETAMENTE NO NAVEGADOR, SEM QUE SEJA NECESSÁRIA INSTALAÇÃO DE PLUGINS! O Blazor utiliza os mais modernos padrões desenvolvidos para web rodando um “subset” do .NET através do WebAssembly. Já havia esbarrado com WebAssembly um tempo antes, acabei marcando no favoritos para dar uma olha com calma, mas… “To late”…
O contexto web…
Para explorarmos o assunto um pouco mais a fundo, vamos entender um pouco mais sobre alguns aspectos problemáticos do desenvolvimento frontend que motivaram a comunidade na busca de novas alternativas para padrões, recursos e ferramentas para melhorar a experiência do usuário e, porque não, facilitar a vida do desenvolvedor.
Apesar de toda a evolução, considerando o “marco tableless” até hoje, o desenvolvimento web continua sendo um desafio em muitos aspectos.
Quando o assunto é desenvolvimento de aplicações baseadas na Web, em 99,99% dos casos, implementamos a estrutura das interfaces em HTML, o “design” fica a cargo do CSS e as interações ficam por conta do JavaScript.
Particularmente falando, não vejo problema algum no trio acima (HTML + CSS + JS), a minha impressão, é que HTML e CSS avançaram em uma passada diferente do JavaScript, vou explicar.
HTML e CSS são diretamente responsáveis pela “renderização” da interface das páginas aos usuários, essa apresentação da interface variava muito e muitas vezes ficavam desastrosas, dependendo do navegador (Internet Explorer, Firefox, Netscape, Safari, Chrome, etc…) que o visitante estive utilizando naquele momento, cada empresa, por sua vez, “interpretava” HTML e CSS da forma que bem entendia, não haviam padrões “mais rígidos”, não havia um “acordo” e o desenvolvedor é quem sofria para acertar as diferenças entre os navegadores e fazer a mágica acontecer.
Muita coisa interessante surgiu… HTML5, CSS3, melhores padrões, consórcios, acordos e as coisas melhoram bastante… Pacotes de componentes gratuitos (como Bootstrap) começaram a “pipocar” pela internet, a “coisa” ganhou força e o nível de maturação e qualidade dos pacotes de componentes é impressionante.
Já o JavaScript…
Evoluiu, sim, com certeza… Mas não foi um salto tão grande quanto seus “pares” HTML e CSS… Bibliotecas como jQuery arrebataram muitos adeptos, assim como suas derivações… Mas, sejamos realistas, JavaScript também “virou piada”…
Usando um jargão da comunidade, até o final da leitura deste artigo, pelo menos, 20 “novos” frameworks JavaScript serão criados… rs… Piadas a parte, eu não acho que o JavaScript seja um vilão, mas são tantas coisas, tantos frameworks que é um “ecossistema” extremante complexo… E que muda toda semana… rs…
Outro detalhe, praticamente NÃO HÁ FRAMEWORKS (Angular, Vue, React, etc…) que NÃO utilizem JavaScript… É sabido que ele tem uma série de “problemas”, que a performance não anda das melhores mas, mesmo assim, é sempre a primeira opção, somos quase que obrigados a usar e gostar… Somos todos reféns do JavaScript, mas sofremos a “Síndrome de Estocolmo“.
Só pra constar… EU CURTO JAVASCRIPT… Mas que tem hora que dá “um réiva”, ahhh dá…
Outro aspecto que venho observando a um bom tempo, é que, a qualidade das conexões melhoraram (poderia ser melhor, sim, mas comparado com o que era 10 anos atrás, vish, estamos no céu), a capacidade de processamento dos dispositivos (computadores, celulares, tablets, etc) está cada vez maior MAS, ainda sim temos uma navegabilidade precária um consumo excessivo de recursos que deixam a navegação lenta e arrastada.
Faça um teste… Abra em vários navegadores diferentes o WhatsApp Web, abra o monitor de recursos e veja como está a coisa… Depois feche essa aba e veja e diferença… Só do navegador ficar simplesmente parado em um site, muitas vezes o consumo de memória chega a ser maior do que todos os processos abertos naquele momento… Consumo de banda, consumo de memória, consumo de processamento, enfim… O desperdício vai longe… E quando estamos em um celular ainda tem o agravante da bateria (Facebook que o diga, depois que aboli o Facebook do meu celular uma carga de bateria chega a durar 2 dias!).
Blazor e WebAssembly
E vamos, enfim, falar de Blazor… Mas antes, vamos falar do “cara” que faz a mágica acontecer, o WebAssembly (ou simplesmente Wasm)!
O “Wasm” é um novo padrão web (ou o novo padrão DA WEB, talvez?) cujo objetivo é oferecer maior portabilidade, menor tamanho e maior eficiência no tempo de inicialização de compilações na Web! Mas o que isso significa?
O WebAssembly nos oferece novos caminhos para implementação de aplicações Web! O código COMPILADO para WebAssembly é capaz de rodar em qualquer navegador nativamente!
Com isso podemos construir aplicação .NET e fazê-las funcionar diretamente no navegador, sem instalação de plugins, sem “transpilação” de código, qualquer biblioteca padrão do .NET vai direto para o navegador em tempo de execução e pode ser utilizada via WebAssembly!
E algumas considerações finais e interessantes a respeito do Wasm: É mantido pelo W3C (suporte garantido na maior parte dos navegadores), roda OpenGL, a engine Unreal 4 foi portada para Wasm e possui interoperabilidade com JavaScript… “Tudibão” neh?
Porque rodar o .NET diretamente no navegador é interessante?
Como citei acima o desenvolvimento web evoluiu bastante, mas ainda apresenta desafios. Trazer o .NET para esse contexto, pode trazer muitas vantagens, agora mais do que nunca com um novo “modelo” do .NET com maior espaço para o desenvolvimento Cross Platform, enumero abaixo algumas vantagens para essa “nova proposta web”:
- Estabilidade e consistência: O .NET possui grande engajamento da comunidade, é uma plataforma robusta e confiável, utilizada por grandes empresas, possui uma vasta gama de recursos e padrões, ferramentas eficientes amplamente conhecidas no mercado. Está em evolução constante, o .NET Core (versão mais recente e totalmente reescrita do .NET) é open-source e conta com a “curadoria” da Microsoft para garantir a estabilidade, riqueza de recursos e fácil utilização e implementação.
- Suporte a diferentes linguagens: O .NET possui, dentre muitas outras, linguagens de programação como C# e F#, amplamente conhecidas e modernas, que estão em constante atualização e inovadoras.
- “Tooling”: O Visual Studio é uma ferramenta que dispensa comentários. E as versões para Linux, macOS, além de Windows é claro, tornam sua adoção mais transparente, independente do sistema operacional escolhido pelo desenvolvedor, lembrando que para Linux, somente o VSCode está disponível.
- Performance e Escalabilidade: Trazer para o “lado do cliente” o mesmo know-how adquirido na utilização do .NET do “lado do servidor” acrescenta ainda mais na construção de aplicações verdadeiramente “full-stack” de forma rápida, segura e descomplicada.
- Reuso: Permitir que uma biblioteca seja utilizada de FORMA IDÊNTICA em todas as camadas da aplicação amplia ainda mais o reaproveitamento de código, facilita a manutenção e organização das regras de negócio. Com o “Design Pattern” certo as possibilidades são infinitas.
Enfim Blazor!
Em poucas palavras, Blazor é um framework web que usa C#, Razor, HTML e CSS para implementação de interfaces web compiladas em .NET que rodam diretamente no navegador utilizando WebAssembly. Simples assim!
É um projeto experimental, mas extremamente promissor que depois da Build 2018, o Github do projeto, ficou um tanto quanto frenético e interessante, é open-source e digno de um PR!
O Blazor é baseado nas tecnologias web existentes, como HTML e CSS, porém, ao invés de codificar as “interações” em JavaScript, você irá utilizar C# e Razor!
Atualmente já é possível fazer a publicação de aplicações desenvolvidas utilizando UWP ou Xamarin.Forms diretamente para o navegador utilizando WebAssembly, mas o Blazor tem uma proposta promissora por ser mais “clean” e fácil de aprender.
O Blazor possui os seguintes recursos:
- Roteamento;
- Layouts;
- Formulários (com validação);
- Injeção de dependência;
- Interoperabilidade com JavaScript;
- Live Reload (para que você posso ver como ficou uma alteração no código com ele rodando em debug);
- Renderização “do lado do servidor”;
- Debug do .NET no navegador e na IDE (Visual Studio, VSCode, VS for MAC, etc..);
- InteliSense e ferramentas de trabalho padrão de mercado (Visual Studio, VSCode, VS for MAC, etc..);
- Capaz de rodar em navegador “non-WebAssembly” através de biblioteca JavaScript (asm.js);
Devido ao caráter experimental, ainda não é um produto, portanto, não espere suporte da Microsoft para projetos em Blazor nesta fase, adote-o por sua conta e risco, porém, o projeto já está sob “controle” do time do ASP.NET, então acredito que torná-lo um produto é uma questão de tempo, ou então a Microsoft está preparando alguma surpresa nesse assunto.
Apesar das semelhanças, não considero o Blazor um framework SPA (tal qual Angular, Vue, React, etc), pois sua tecnologia nos permite muito mais do que uma implementação de uma SPA, seu potencial para desenvolvimento de aplicações móveis o tornam um grande candidato a uma ferramenta viável para implementação de PWAs (Progressive Web Apps) e muito mais… É preciso aguardar o que o futuro nos reserva!
A “mais nova” versão do Blazor é o release 0.3.0 com ele recebemos algumas coisas interessantes, como:
- Template de projeto utilizando Bootstrap 4;
- Async handlers;
- Novos eventos no ciclo de vida de componentes;
- Simplificação na construção de layouts;
- Melhorias no encapsulamento de parâmetros dos componentes e “refs”;
- e muitas coisas mais…
Testando o Blazor…
Então vamos lá, vamos testar essa “bagaça”!
Para utilizar o Blazor você precisará:
- Instalar Visual Studio 2017 (15.7.x) com os componentes/módulos .NET Core e desenvolvimento web;
- Instalar o .NET Core 2.1 SDK (2.1.300-preview2-008533 ou superior);
- Instalar a última versão da extensão via Visual Studio Marketplace: ASP.NET Core Blazor Language Services;
- https://marketplace.visualstudio.com/items?itemName=aspnet.blazor
- ou pelo Visual Studio:
Em caso de dúvidas, consulte a documentação oficial em https://blazor.net/
Feito isso, ao criar um novo projeto ASP.NET Core, irão aparecer os templates de projetos Blazor para você usar, conforme a imagem abaixo:
Em seguida, execute o projeto Blazor e pá!
Algumas dicas importantes:
Na primeira vez que eu rodei o meu projeto Blazor, o navegador abriu normalmente, apareceu o “Loading…” e, passado alguns segundos, a tela ficava branca… Não só eu tive esse problema, como podemos observar na Issue #798, como orientado no seguinte comentário.
- Verifique se instalou corretamente a versão 2.1.300 do .NET Core;
- Inclua um arquivo “global.json” na raiz da solution (não precisa ser pelo Visual Studio);
- Coloque o seguinte conteúdo:
{ "sdk": { "version": "2.1.300-rc1-008673" } }- Em seguida, abra o Console, ou Power Shell;
- Navegue até a pasta da solution e execute o seguinte comando:
dotnet --version- Execute o projeto novamente e, se deu certo e nada der errado (rs), você verá a página inicial do projeto Blazor.
Passando a régua…
Como já disse anteriormente, o Blazor é um projeto experimental e ainda tem alguns desafios pela frente, mas a comunidade está crescendo, ele está ganhando forma e o projeto promete!
[OFF-TOPIC] Essa semana alguns episódios estranhos aconteceram em algumas comunidades relacionados a minha pessoa e quero aproveitar essa oportunidade para dizer que a minha verdadeira missão é contribuir gerando conteúdo relevante, desprendido de ego e vaidade… Não mantenho um blog por fama, atendo todos que posso em vários grupos e comunidades pelo simples prazer de contribuir… Mas COMUNIDADE não é ditadura e principalmente não vou permitir que utilizem minha cabeça como escada, principalmente pessoas que fazem as coisas para ganhar uma estrelinha para colocar no LinkedIn, meus artigos tem embasamento técnico, não faço traduções porcas sem sequer revisar para ser o “primeiro” a falar sobre o “hype” do momento, CITO MINHAS FONTES, GERO conteúdo de verdade… [/OFF-TOPIC]
Muito bem pessoal, vou ficando por aqui… Esse foi um artigo introdutório, pretendo acompanhar o Blazor bem de perto, fazer alguns vídeos sobre ele e em breve estarão disponíveis meu canal no YouTube, então me segue lá e fique atento as novidades!
Aproveite e faça meu curso Introdução Xamarin.Forms, totalmente online e gratuito!
Não me deixe falando sozinho… Deixei o seu comentário!
Aquele abraço a todos e até a próxima conexão!
Agradecimento especial para meu amigo Pedro Jesus Souza pelas sugestões e correções enviadas, vlw mesmo!
Fontes:
Introdução técnica do Blazor (por Steve Sanderson): http://blog.stevensanderson.com/2018/02/06/blazor-intro/
A new experiment: Browser-based web apps with .NET and Blazor: https://blogs.msdn.microsoft.com/webdev/2018/02/06/blazor-experimental-project/
Site oficial do WebAssembly: https://webassembly.org/
Site oficial do Blazor: https://blazor.net/
Repositório oficial do Blazor: https://github.com/aspnet/Blazor
Release da versão 0.3.0: https://blogs.msdn.microsoft.com/webdev/2018/05/02/blazor-0-3-0-experimental-release-now-available/
Materiais relevantes: