Speeding up my Web App with WebAssembly
×
WebAssembly ? 🤔
In a nutshell 🌰
@MartinaKraus11
- Low-Level Bytecode for the Web
- V1 shipped as Minimum Viable Product
- Fast, efficient, portable
- Uses existing sandboxing tools
- No Plugin needed
- Standard and specification through W3C
So JavaScript will be replaced, finally? 🥳
WebAssembly and JavaScript
@MartinaKraus11
"WebAssembly is designed to complement JavaScript
not replace it"
StateOfJS 2021
@MartinaKraus11
7.2%
Ok so how can we benefit from WASM? 🤔
GDE in Angular, Web Technologies
Women Techmakers Ambassador
Trainer and Consultant
@MartinaKraus11
That's Me
Martina Kraus
martinakraus
@MartinaKraus11
WebAssembly for Web Developers
@MartinaKraus11
- Performance a.k.a "it needs to be fast"
- Filling the gaps in the JavaScript language
DISCLAIMER
Performance
@MartinaKraus11
Runtime performance
(No I/O, databases, HTTP rendering, network traffic)
- JavaScript
- WebAssembly
Execution of JavaScript inside the Browser
@MartinaKraus11
Source Code
Parser
AST
Interpreter / Compiler
Machine Code
Inside V8
@MartinaKraus11
https://itenium.be/blog/javascript/webassembly/
https://hacks.mozilla.org/
2018/01/oxidizing-source
-maps-with-rust-and-webassembly/
But how?
The C++ Toolchain for WebAssembly
asm.js
@MartinaKraus11
Emscripten
@MartinaKraus11
- Drop in Replacement: Cross compiles C/ C++ with LLVM to bytecode and then to wasm
- emulates whole file system if necessary
- using WebGL to pretend to be OpenGL
- Support standard C++ Libs (import via build step)
- Extends LLVM optimizations with JavaScript optimizations
Toolchain
@MartinaKraus11
.cpp
.c
Ports (WebGL)
.js
.html
.wasm
Input/ Output-Files
Emscripten-Tools
Clang/ LLVM
(Fastcomp)
Emscripten Compiler Frontend
(emcc)
Emscripten SDK Manager
(emsdk)
Build pipeline
DEMO
I need to learn C++ now?
Using existing C++ Code
@MartinaKraus11
- JavaScript has many npm packages but sometimes not enough (and not the best quality)
- Find libs on other languages (C++ / Rust)
The future of
WebAssembly
@MartinaKraus11
WebAssembly Threads
- One of the most important performance additions
- using POSIX Threads to run parts of your code in parallel
- a combination of multithreading paradigms on the web:
- Web Worker as a WebAssembly Thread
- SharedArrayBuffer for a shared memory
@MartinaKraus11
SIMD
- Single Instruction, Multiple Data
- simultaneously performing same operation on multiple data elements
- compute intensive applications (image processors, audio codecs) will take advantage of SIMD for better peformance
@MartinaKraus11
- WebAssembly ships C++ (and other languages) to the web
- WASM-binaries faster to download and execute
-
The peak performance of WASM and JavaScript is nearly the same
- but this will change with WebAssembly Threads and SIMD
- But it's easier with WASM to stay at the "high performance" path
- Use the ecosystem from other languages too, compile them to WASM
Summary
kraus.martina.m@gmail.com
@MartinaKraus11
martina-kraus.io
Slides: https://slides.com/martinakraus/speed-with-wasm
Repo: https://github.com/martinakraus/WebAssembly_Demo
Thank you !!!
@MartinaKraus11
- Emscripten: https://emscripten.org/
- WebAssembly: https://developer.mozilla.org/en-US/docs/WebAssembly
- Garden for Mozilla: https://s3.amazonaws.com/mozilla-games/ZenGarden/EpicZenGarden.html
- Articles: https://hacks.mozilla.org/category/webassembly/
- WebAssembly Package Manager: https://wapm.io/
- WebAssembly binary execution: https://wasmer.io/
Links
More with CMake/ Makefiles
@MartinaKraus11
A Makefile defines set of tasks to be executed:
Configuration and compilation:
A Makefile defines set of tasks to be executed
A Makefile defines set of tasks to be executed
Speeding up my Web App with WebAssembly
By Martina Kraus
Speeding up my Web App with WebAssembly
WebAssembly Performance talk at bettCode
