Webassembly, Blazor y Javascript, una combinación explosiva

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

Transcript

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