Ruby WebAssembly WASM/WASI Guide For Dummies (2023)

Posted By Weston Ganger

Ruby WebAssembly WASM/WASI Guide for Dummies (2023)

In this article we try to focus on Offical CRuby things

Last Updated Jan 13, 2023 - This is a working document so please stay tuned for updates, looks like an offical 3.2.0 ruby.wasm release is coming soon, hopefully before February 2023

Official Repos

Glossary of Terms

  • WASM - Synonym for WebAssembly
  • WASI - WebAssembly System Interface. WASI is an effort to define a standard set of syscalls for WebAssembly modules, allowing WebAssembly modules to not only be portable across architectures but also be portable across environments by immplementing this standard set of system calls. WASI does not rely on JavaScript at all.
  • Emscripten - Alternative to WASI. Not recommended to use this anymore. The community is charging forward with WASI.
  • wasi-vfs - Packages all files and assets into a single binary file. This library is not Ruby-specific and is designed to be used by all WASI-enabled WebAssembly applications.
  • Wasmtime / Wasmer - Used to run WebAssembly code outside of the Web, and can be used both as a command-line utility or as a library embedded in a larger application. So this is not needed for Web-style applications unless you want to run the binary locally during development.

List of important developers

  • Yuta Saito - https://github.com/kateinoigakukun
    • Main researcher who led WASM efforts and is now core maintainer of this part of Ruby. If you see his contributions somewhere then its going to be an "official" WASI library
  • Yusuke Endoh - https://github.com/mame - "Mentor" Researcher

Supports script type text/ruby when using browser.script.iife.js

<script type="text/ruby" src="hello.rb"></script>

How to use javascript (with any pre-built binary with -js)

require "js"

document = JS.global[:document]

button = document.getElementById("draw");
result = document.getElementById("result");

button.addEventListener("click") do |e|
  puts e
  luckiness = ["Lucky", "Unlucky"].sample
  result[:innerText] = luckiness
end

Example Apps

Additional Reading:

Article Topic:Software Development - Ruby / Rails

Date:January 13, 2023