Blazor é um framework frontend que utiliza C# e HTML, servindo como uma alternativa ao JavaScript, com opções de execução client-side via WebAssembly ou server-side. Cada abordagem tem seus benefícios e desvantagens, como a necessidade de suporte ao WebAssembly em browsers modernos no client-side e a dependência do servidor no server-side. O Blazor.WebAssembly.js é um componente crucial para a execução de aplicativos Blazor, facilitando a comunicação entre o runtime e o DOM.

1. Conceitos Básicos de
Blazor e WebAssembly

2. O que é o framework Blazor
Blazor é um framework FrontEnd feito para ser desenvolvido utilizando C# e
HTML, é uma alternativa para programadores que dominam a linguagem C#
frente as tecnologias web mais comuns do mercado como Javascript e
Typescript.

3. Blazor veio para necessariamente substituir
javascript?
Não, o Blazor tem integração com javascript, não é necessário substituir todo
javascript de uma aplicação
Também veio como uma alternativa para trazer mais performance e o uso de
bibliotecas de .net

4. Linha do tempo do Blazor

5. Blazor Client-side
vs Blazor Server-side

6. Client-side Blazor
● A aplicação está rodando como um app WebAssembly diretamente no
browser
● O Código é compilado no servidor e baixado no cliente e executado
localmente

7. Benefícios
● Roda em todos os browser modernos
● Não necessita de ter o .net instalado no servidor, ter o app compilado no servidor ja é o
suficiente
● Experiência do SPA(single page application)
Desvantagens
● App pode não rodar em broswer mais antigos como versões mais antigas do IE
● O carregamento inicial do app pode levar um pouco mais de tempo
● Suporte ao Debug pode ter uma experiência limitada

8. Server-side Blazor
● Aplicação é rodada no servidor e é apenas servido páginas HTML para o client
● Comunicação entre client e server utilizando SignalR (Tecnologia da microsoft que
fornece uma comunicação real time permitindo o servidor trazer atualização da aplicação
para o client)

9. Benefícios
● O download inicial da aplicação é menor que comparado ao client-side
● Funciona com qualquer aplicação Web API
● Suporte ao debug com experiência melhor que no server side
● Ao contrário do client side, o browser não precisa ter suporte ao webassembly
Desvantagens
● Não existe nenhuma lógica no client, qualquer problema momentâneo no servidor pode
atrapalhar a experiência do usuário
● Pode existir lentidão na aplicação por algum delay de rede
● Problemas com escalabilidade, um número alto de usuários pode onerar muitos recursos
do servidor

10. E o WebAssembly
nessa história?

11. Quando ele entra em ação?
O WebAssembly será utilizado em projetos Client-side, quando o programa
compilado passa a ser executado no Browser.
Isso porque a maioria dos navegadores tem suporte ao WebAssembly. Nesse
Caso o código em blazor é compilado em WebAssembly e o navegador ira
executar as DLLs geradas no padrão .NET

12. Fluxo de Execução
● O Browser recebe o index.html
● index.html executa o blazor.webassembly.js
que baixa o Mono DotNet runtime
(DotNet.wasm) e os DLLs
● blazor.webassembly.js faz a
interoperatividade do DOM, JavaScript e as
DLLs do app e elementos de UI
● E por fim, inicia o Runtime para começar a
execução do app(executa os DLLs)

13. Importância do blazor.webassembly.js
Como deu para perceber, este arquivo é muito importante para orquestrar toda
a execução do app trazendo tudo que é necessário para que o browser consiga
ler o webassembly do Blazor, como WebAssembly não tem acesso ao DOM, ele
é o responsável por se comunicar entre o Runtime e a interação com o DOM