Blazor Server vs. Blazor WebAssembly: Just the Facts

Aqui está um problema: Como executar o .NET no navegador usando algo diferente do JavaScript, sem conexão com o servidor e sem complementos ou plug-ins?

A solução: Blazor WebAssembly

Aqui está outro problema: como criar aplicativos voltados para o cliente que tenham uma boa classificação no Google?

The solution: Blazor Server

Para entender tudo sobre como Blazor Server vs. Blazor WebAssembly funcionam, diferem, quando são usados e como exatamente eles formam um dos frameworks mais interessantes e relativamente novos que existem –Blazor– reunimos as seguintes seções no artigo:

Try Ignite UI for Blazor

O que é Blazor WebAssembly?

Blazor WebAssembly, também conhecido como WASM, é um padrão desenvolvido pelo W3C (World Wide Web Consortium) para a criação de software que roda no navegador da web. Ao contrário do JavaScript, Blazor WebAssembly é um software compilado que é executado em velocidades quase nativas em sua CPU.

Blazor programas WebAssembly podem ser escritos em outras linguagens, como C, que podem ser compilados para bytecode WebAssembly. O WebAssembly não se destina a substituir o JavaScript, mas a ser executado junto com ele para programas (ou partes de programas) que precisam ser executados o mais rápido possível.

Blazor, que é suportado pela Microsoft, é uma estrutura de interface do usuário da Web de software livre e multiplataforma para criar aplicativos de página única usando .NET e C# em vez de JavaScript. Blazor oferece duas maneiras suportadas de hospedar aplicativos Web: Blazor Server e Blazor WebAssembly.

Blazor Blazor Server vs Blazor WebAssembly

Conforme mencionado anteriormente, Blazor pode executar o código C# do lado do cliente diretamente no navegador, usando WebAssembly. Como é um .NET real em execução no WebAssembly, você pode reutilizar o código e as bibliotecas de partes do lado do servidor do seu aplicativo.

Como alternativa, Blazor pode executar a lógica do cliente no servidor. Os eventos da interface do usuário do cliente são enviados de volta ao servidor usando o SignalR – uma estrutura de mensagens em tempo real. Após a conclusão da execução, as alterações de interface do usuário necessárias são enviadas ao cliente e mescladas no DOM.

Blazor Servidor

Blazor Server usa um aplicativo ASP.NET Core padrão. Nesse aplicativo, você pode integrar a funcionalidade do lado do servidor, como a integração de um banco de dados SQL Server por meio do Entity Framework (uma estrutura de mapeamento relacional de objeto de software livre que originalmente foi fornecida como parte integrante do .NET Framework).

O aplicativo Blazor Server se comunica com o navegador por meio de uma conexão constante usando o SignalR. Você pode criar páginas do lado do cliente usando componentes Razor ou páginas Razor.

Os aplicativos do Blazor Server são rápidos de carregar e simples de implementar. O suporte para Blazor Server está disponível com o .NET Core 3.1 LTS.

Blazor WebAssembly

Blazor WebAssembly permite que o navegador baixe o aplicativo Blazor.

Isso significa que o aplicativo Blazor é executado no navegador da Web. Não há necessidade de uma conexão constante com um servidor para que o aplicativo funcione.

No entanto, como é apenas um aplicativo do lado do cliente, você não pode integrar diretamente nenhuma funcionalidade do lado do servidor ao aplicativo Blazor.

Para fazer isso, você precisaria conectá-lo a um aplicativo do lado do servidor, como uma API Web ASP.NET Core.

Assim como no Blazor Server, podemos criar páginas do lado do cliente usando componentes Razor ou páginas Razor.

Semelhante ao JavaScript, Blazor aplicativos WebAssembly são executados com segurança no dispositivo do usuário a partir da área restrita de segurança do navegador. Esses aplicativos podem ser implantados como sites estáticos completamente autônomos sem nenhum componente de servidor .NET ou podem ser emparelhados com ASP.NET Core para habilitar o desenvolvimento da Web de pilha completa com o .NET, onde o código pode ser compartilhado sem esforço com o cliente e o servidor.

Linha completa de recursos Blazor

• Blazor WebAssembly vem repleto de recursos para mantê-lo produtivo em seu próximo projeto de aplicativo Web:
• Aproveite a produtividade do C# e a digitação em tempo de execução forte
• Construa no ecossistema .NET estável e maduro
• Reutilize facilmente o código e as bibliotecas padrão .NET existentes no cliente e no servidor
• Modelo de componente compartilhado com aplicativos Blazor Server, implementado em arquivos de componente Razor​
• Implante seu aplicativo como um site estático autônomo ou hospede-o com ASP.NET Core
• Crie Progressive Web Apps (PWA) com recursos offline e integração nativa do sistema operacional
• Suporte integrado para autenticação
• Suporte integrado à globalização e localização
• Environment-based configuration
• IL trimming and build-time precompression
• Full stack debugging
• Ótimas ferramentas com Visual Studio, Visual Studio para Mac e Visual Studio Code

O que é SignalR?

O SignalR é uma biblioteca para desenvolvedores ASP.NET simplificarem o processo de adição de funcionalidade da Web em tempo real aos aplicativos. A funcionalidade da Web em tempo real é a capacidade de fazer com que o código do servidor envie conteúdo para clientes conectados instantaneamente à medida que ele se torna disponível, em vez de fazer com que o servidor espere que um cliente solicite novos dados. O aplicativo de chat é frequentemente usado como exemplo do SignalR.

Blazor Server vs Blazor WebAssembly – When to Use?

O modelo de hospedagem que você deve usar dependerá dos objetivos e dos recursos que deseja oferecer em seu aplicativo. Se você planeja usar o aplicativo em que a conectividade com a Internet é fraca, pode optar pelo Blazor WebAssembly, pois funciona bem sem uma conexão com o servidor. Também é uma escolha melhor se você preferir trabalhar offline.

Por outro lado, se você deseja criar aplicativos voltados para o cliente que tenham uma boa classificação no Google, o Blazor Server é uma escolha melhor.

Blazor WebAssembly vs Angular

Angular, o sucessor do AngularJS, foi criado pelo Google para permitir que os desenvolvedores de front-end interajam com o front-end e o back-end ao mesmo tempo. Como Angular é baseado em JavaScript, há muitos recursos para trabalhar.

Angular existe há muito tempo, ao contrário Blazor. É uma estrutura pronta para produção com suporte total para aplicativos MVC/MVVM e está sendo usada por muitas grandes empresas. Blazor, por outro lado, está sendo continuamente alterado e ainda não atingiu maturidade suficiente para enfrentar Angular, apesar de ser muito promissor. Angular ferramentas também é mais madura com suporte completo à depuração em IDEs como o VS Code.

Para uma análise mais aprofundada da comparação, confira o blog Comparação Blazor vs Angular em 2022.

Painel de eleição presidencial dos EUA integrado Blazor WebAssembly

Para ajudar a ilustrar o tipo de visualizações e análises que podem ser suportadas em um aplicativo Blazor, nossa equipe na Infragistics criou o Painel de Eleições Presidenciais dos EUA, um aplicativo de amostra que compara dados atuais e históricos e identifica tendências de dados.

Este painel fornece visualizações interativas de dados eleitorais até a eleição de 2020. WASM (Blazor integrado) usando o Ignite UI for Blazor, este aplicativo de exemplo apresenta nossos componentes Blazor Data Grid, Blazor Tree Map, Blazor Map e Blazor Data Chart.

Blazor WebAssembly Components

Ignite UI for Blazor do Infragistics inclui componentes Blazor projetados profissionalmente, incluindo suporte total para Blazor Server, Blazor WebAssembly e .NET 6. Você pode criar aplicativos da Web avançados usando suas habilidades em C# e eliminar JavaScript complexo e difícil de aprender. Ignite UI for Blazor controles incluem a grade de dados mais rápida, 60+ gráficos de alto desempenho - gráficos de ações, gráficos financeiros, mapas geoespaciais, caixa de combinação de várias colunas - e muito mais.

Construímos nossa grade de dados Blazor leve e cheia de recursos e tabela Blazor para enfrentar o desafio de exibir grandes volumes de dados, ao mesmo tempo em que fornecemos todos os recursos interativos que seus clientes esperam. A Grade de Dados e todos os componentes Ignite UI Blazor foram projetados para aplicativos Blazor C# modernos, incluindo suporte completo para Blazor WebAssembly, para que você possa implantar em qualquer navegador moderno para obter a melhor experiência de usuário possível.

E aqui está outra coisa empolgante para Blazor desenvolvedores. Lançamos App Builder para Blazor! O que isso significa para o seu processo de desenvolvimento de aplicativos?

• App Builder é uma ferramenta completa de arrastar e soltar WYSIWYG baseada em nuvem que elimina a complexidade do design da interface do usuário com um IDE baseado em nuvem que permite criar aplicativos e temas e adicionar vinculação de dados em um piscar de olhos!
• Você criará seus aplicativos Blazor 10x mais rápido!
• Com o App Builder atuando como sua ferramenta de desenvolvimento low-code, tudo o que você projetar resultará em código pronto para produção para Blazor.
• Com a Visualização do Código, você pode ver seu código-fonte limpo e testável sendo gerado em tempo real enquanto cria seu aplicativo!

Saiba mais sobre nossa grade de dados de Blazor extremamente rápida e veja um exemplo de grade Blazor aqui.

If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com!

E se estiver curioso, você pode ler nossos artigos de comparação sobre Blazor vs Angular e Blazor vs React.

Happy Coding!