Presentación de la charla con MadridJS https://www.meetup.com/es-ES/madridjs/events/284051326/

1. WebAssembly,
Blazor y JavaScript,
una combinación
explosiva ;-)
Roberto Sanz Ciriano
@rsciriano
Backend developer Co-coordinador

2. Agenda
- Conociendo WebAssembly
(con algún ejemplo)
- Conociendo Blazor
(con algún ejemplo)
- Un ejemplo explosivo ;-)
He mezclado componentes Blazor en una
aplicación de reactjs y … vamos, que la he
liado parda

3. WebAssembly: ¿Qué es?
https://webassembly.org/
WebAssembly (abbreviated Wasm) is a binary instruction format
for a stack-based virtual machine. Wasm is designed as a portable
compilation target for programming languages, enabling
deployment on the web for client and server applications.
WebAssembly Web API
- November 2017 – Initial MVP from WebAssembly CG (Chrome, Edge, Firefox, and WebKit)
- 15 February 2018 - W3C First Public Working Draft
- 5 December 2019 - W3C Recommendation

4. WebAssembly: Principales características
• Eficiente, rápido y seguro
• Multitud de lenguajes de programación (C/C++, Go, Rust, C#, …)
• Su uso se extiende fuera del navegador
https://wasmer.io/
https://github.com/wasm3/wasm3

5. WebAssembly: Como funciona
https://...
DOM
WebAssembly
Javascript
myapp.js
wasm_exec.js
myapp.wasm
iTerm
$ tinygo build -o myapp.wasm ./myapp.go

6. Ejemplos
WebAssembly
https://github.com/rsciriano/wasm-samples

7. https://huningxin.github.io/opencv.js/samples/index.html
Face detection (asm.js) Face detection (wasm.js)

8. Blazor: Que es
Interactive web UI with C#
Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are
composed of reusable web UI components implemented using C#, HTML, and CSS.
Both client and server code is written in C#, allowing you to share code and libraries.
• Pertenece al ecosistema .NET
• Desarrollo web moderno en C# (interacciones
en cliente, componentes, …)
• Dos sabores: Server y WASM
• Compatible con WebComponents, Angular y
reactjs
https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor

9. Blazor: Como funciona
https://...
DOM
WebAssembly
Razor Components
.NET
https...
DOM
Razor Components
.NET
SignalR
(WS)
Blazor Server Blazor WASM
blazor.server.js
blazor.webassembly.js

10. WaveEngine powered by Blazor
https://evergine.com/es/
https://www.plainconcepts.com/es/wave-engine-web-net-6/
https://robotarmwasm6.azurewebsites.net/
Wave Engine Web mejora el rendimiento con .NET 6.0

11. Ejemplos Blazor
https://github.com/rsciriano/reactjs-blazor-sample