frameworks using WebAssembly Boyan Mihaylov @boyanio boyan.io - PowerPoint PPT Presentation

The rise of non-JavaScript frameworks using WebAssembly Boyan Mihaylov @boyanio boyan.io

WebAssembly ( WASM ) is compiler target for programs on the Web @boyanio

@boyanio https://vimeo.com/272924131

The Web of JavaScript frameworks @boyanio

JavaScript frameworks architecture fetch compile Your code .js / .ts .js .html Compiled app HTML page fetch JavaScript Framework .js @boyanio

How would WebAssembly influence the way we do Web development today? @boyanio

Rewriting existing JavaScript frameworks into a language 1 that can be compiled to WebAssembly @boyanio

WebAssembly-compiled frameworks initialize fetch compile Your code .cpp .wasm .js .html JavaScript Compiled HTML page glue code app Framework’s code .cpp @boyanio

C++/Python → JavaScript → C++/Python @boyanio https://www.tynwiz.com

No direct DOM access index.c main.js extern void createElement (void); const imports = { createElement : () => { int main(void) document.createElement (‘div’); { } createElement(); }; createElement(); … WebAssembly.instantiate (…, imports); return 0; } @boyanio

JavaScript → WebAssembly overhead Firefox 60+ Firefox @boyanio https://blog.benj.me/2018/07/04/mozilla-2018-faster-calls-and-anyref/

Easier to create fast native mobile apps @boyanio

Rewriting parts of existing JavaScript frameworks into 2 a language that can be compiled to WebAssembly @boyanio

@boyanio

https://github.com/vuejs/vue/issues/8193 https://github.com/glimmerjs/glimmer-vm/pull/752 @boyanio

Writing custom components in a language that can be 3 compiled to WebAssembly @boyanio

Angular & WebAssembly https://boyan.io/angular-wasm/ @boyanio

Emergence of non-JavaScript 4 frameworks using WebAssembly @boyanio

Blazor https://blazor.net @boyanio

Traditional .NET architecture load IL compile metadata Source code MyApp.dll CLR JIT compilation .NET Framework to native code Native @boyanio

Blazor architecture load IL compile metadata Source code MyApp.dll mono.wasm execute Blazor.dll Browser netstandard compiled by browser’s VM Native @boyanio

React vs. Blazor https://boyan.io/react-blazor/ @boyanio

Application structure React Blazor @boyanio

Application structure React (Root.jsx) Blazor (Root.razor) @page “/” … render() { <div> return ( <h1>Blazor chat</h1> <div> <NewChatMessage /> <h1>React chat</h1> <Chat … /> <NewChatMessage /> </div> <Chat … /> </div> ); } } @boyanio

@boyanio https://devblogs.microsoft.com/aspnet/blazor-now-in-official-preview/

Blazor-inspired framework in Go https://github.com/bketelsen/wasmplay @boyanio

React-inspired framework in Rust https://github.com/DenisKolodin/yew @boyanio

WebAssembly enables different languages to work together on the Web https://boyan.io/wasm-wheel/ @boyanio

The future of Web belongs to those, who compile Boyan Mihaylov / @boyanio / boyan.io