Presented at All Things Open 2023 Presented by Robert Aboukhalil - CZI Title: Supercharging tutorials with WebAssembly Abstract: sandbox.bio is a free platform that features interactive command-line tutorials for bioinformatics. This talk is a deep-dive into how sandbox.bio was built, with a focus on how WebAssembly enabled bringing command-line tools like awk and grep to the web. Although these tools were originally written in C/C++, they all run directly in the browser, thanks to WebAssembly! And since the computations run on each user's computer, this makes the application highly scalable and cost-effective. Along the way, I'll discuss how WebAssembly works and how to get started using it in your own applications. The talk will also cover more advanced WebAssembly features such as threads and SIMD, and will end with a discussion of WebAssembly's benefits and pitfalls (it's a powerful technology, but it's not always the right tool!). Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen 2023 conference: https://2023.allthingsopen.org/

1. Supercharging tutorials
with WebAssembly
Robert Aboukhalil
robert.bio

3. How?
awk.wasm
WebAssembly Containers
💸 💸
💸
💸 💸
💸

4. WebAssembly

5. What is WebAssembly?
• Compilation target for C/C++/Rust/…
WebAssembly
HTML
CSS
JavaScript
char * hello() {
return "All Things Open";
}
(module
(table 0 anyfunc)
(memory $0 1)
(data (i32.const 16) "All Things Open00")
(export "memory" (memory $0))
(export "hello" (func $hello))
(func $hello (; 0 ;) (result i32)
(i32.const 16)
)
)
WebAssembly Text (WAT)
🖥
Browser

6. 💻 Code Reuse
sql.js
Figma
Photoshop
Google Earth

7. ⚡ Performance
TensorFlow.js 1Password
eBay GenomeRibbon.com

8. Cloudflare, Fastly
📦 Portability
Wasmtime, Wasmer
Node, Deno Wasm3

9. How to get started
Compile C/C++ → WebAssembly
gcc → emcc
g++ → em++
ar → emar
make → emmake
cmake → emcmake
configure → emconfigure

10. Emscripten
$ emcc seqtk.c
-o seqtk.wasm
-O2
-lm
-s USE_ZLIB=1
$ gcc seqtk.c
-o seqtk
-O2
-lm
–lz
./seqtk fqchk data.fastq Module.callMain(["fqchk", "data.fastq"])

11. # Compile grep to WebAssembly
$ ./bootstrap
$ sed -i 's|if ${gl_cv_func_sleep_works+:} false|if true|g' configure
$ sed -i 's|if ${ac_cv_search_nanosleep+:} false|if true|g' configure
$ sed -i 's|if ${gl_cv_func_nanosleep+:} false|if true|g' configure
$ sed -i 's/getprogname ()/"grep"/g' src/grep.c
$ emconfigure ./configure --disable-nls
$ emmake make all -k
CC=emcc WERROR_CFLAGS=""
EXEEXT=.js CFLAGS="-O2
-s USE_ZLIB=1
-s INVOKE_RUN=0
-s FORCE_FILESYSTEM=1
-s EXPORTED_RUNTIME_METHODS=["callMain","FS","WORKERFS"]
-s MODULARIZE=1
-s ENVIRONMENT="web,worker"
-s ALLOW_MEMORY_GROWTH=1
-s ERROR_ON_UNDEFINED_SYMBOLS=0"
-lworkerfs.js
It's not always that easy…

12. Speaking of which…
levelupwasm.com

13. Tools for data-intensive apps

14. Threads
• Use WebWorkers to run JS/WebAssembly in separate threads
• Shared memory with SharedArrayBuffer

15. SIMD
• SIMD = Single Instruction Multiple Data
• Support for 128-bit SIMD
• Example: Add 32-bit integers
32-bit integer 32-bit integer 32-bit integer 32-bit integer
32-bit integer 32-bit integer 32-bit integer 32-bit integer

16. Test drive
Source: WebAssembly and SIMD: A match made in the browser
WebAssembly without SIMD
WebAssembly + SIMD
Native

17. When not to use WebAssembly

18. When not to use WebAssembly
Too little or too much computation (in the browser)
Frontend UI
High-CPU,
high-RAM,
long running
analysis
Sweet Spot: audio/video processing, gaming, simulations, playgrounds, etc.

19. When not to use WebAssembly
Pre-compiled tools are available
biowasm
ffmpeg.wasm

20. When not to use WebAssembly
Trying to replace containers
Sweet Spot: safely running user-provided code, serverless functions

21. Learn more @ levelupwasm.com
PerfMatters 2019 WasmSF Meetup 2019 Crossing the Wasm Chasm
levelupwasm.com/free
Share feedback in the EventMobi app