Bringing native perfomance to the web with WebAssembly

Breve introduccion a webassebly.

Transcript

1. Webassembly Roberto Perez. @hylian TID-X 2018 http://www.tid-x.com/
5. • https://benchmarksgame.alioth.debian.org/u64q/mandelbrot.html x10 x22
8. Webassembly • Parte del W3C • Formato binario ◦ No es exactamente bytecodes. Es un dump del parseo de AST • Interoperable con JS • No solo esta pensado para navegadores ◦ Está pensado para funcionar en cualquier entorno JS como Node, V8, etc ◦ Incluso funciona en otros entornos como JVM o incluso un FPGA • Cada módulo se ejecuta en un sandbox separado y solo puede acceder a recursos externos usando las APIs del navegador (o del entorno de ejecución) • El MVP se completó en Marzo 2017 y ya está en los navegadores más populares y también en Edge
9. Webassembly vs alternatives • vs asm.js ◦ Aproximacion similar ◦ Webassembly es un formato binario ya parseado, por ello, se pueden hacer cosas como streaming del formato binario ▪ Asm.js es un subconjunto de JS ◦ WA no necesita una VM de JS para ser ejecutado • vs PNaCl ◦ PNaCl era propietario de Chrome ◦ Necesitaba una compilación nativa por arquitectura.
10. Oficialmente soportados • Kotlin • C# • Go • Java • TypeScript Otros Lenguajes
11. Webassembly en C/C++ y Rust • Usando Emscripten (o otros basados en LLVM) • Soporte de librerías ◦ Se pueden usar las mismas librerías que en un desarrollo normal en C/C++. ▪ Pthreads, sdl, OpenGL ◦ En entornos de ejecución web se mapean algunas librerías a las que estas disponibles ▪ OpenGL -> WebGL • Soporte nativo en el compilador de Rust como otra arquitectura más ◦ Aunque usando emscripten como “linker” rustc --target=wasm32-unknown-emscripten hello.rs C/C++ Rust
12. Native code en Webassembly vs tradicional Webrtc codebase Libwebrtc.a (Andr arm64) Libwebrtc.a (x64 linux) Libwebrtc.a (x64 osx) Libwebrtc.dll (x64 win) Chrome Android Chrome Linux Chrome Osx ... Chrome windows Chrome ...
13. Native code en Webassembly vs tradicional Webrtc codebase Libwebrtc.a wasm mod Chrome Android Chrome Linux Chrome Osx Chrome windows Chrome ...
14. Native code en Webassembly vs tradicional • Updates sin tener que cambiar el navegador • Writes Once Runs… • Igual rendimiento • Más control sobre el módulo nativo
15. Webassembly build process fn main() { println!("Hola"); } rustc --target=wasm32-unknown-emscripten hello.rs (func (;77;) (type 4) (param i32 i32) (result i32) (local i32 i32 i32) get_global 12 set_local 4 i32.const 95 get_local 0 get_local 1 call 74 set_local 2 get_local 2 return) hello.wasm
16. Webassembly interoperabilidad con JS. Carga fetch(‘module.wasm’).then(response => response.arrayBuffer()) .then(bytes => WebAssembly.instantiate(bytes, importObject)) .then(result => result.instance ); • En el futuro se cargará con <script type=’module’> o usando `import` • Por ahora hay que usar la API de JS de WebAssembly
17. Webassembly interoperabilidad con JS. Uso loadInstance(‘module.wasm’).then(instance => { var { fibo } = instance.exports; console.log(fibo(1000)); });
18. Webassembly Demo • Effecto fuego usando sdl • Demo en el navegador • Demo de verdad en Unity
19. Webassembly en el mundo real • Unity • libsass • Unreal Engine (asm.js) • Ejecutar en un entorno JS (browser o node) cosas como la JVM o la VM de Lua
20. Thanks!