Skip to content

Instantly share code, notes, and snippets.

@kanj

kanj/a_webAssembly.md

Last active October 18, 2024 21:24
Show Gist options
  • Save kanj/feea7a2f25b42cb0e018a9b22df009a7 to your computer and use it in GitHub Desktop.
Save kanj/feea7a2f25b42cb0e018a9b22df009a7 to your computer and use it in GitHub Desktop.
Download ZIP
WebAssembly_I
Raw
a_webAssembly.md

 I have been curious about WebAssembly for a couple years. WebAssembly compiles to a bytecode file (WASM) that can be interperted at near native speeds within a browser. I saw Rick Battigline's The Art of WebAssembly at the library and borrowed it. I wanted to be able to run the examples without using nodejs. I find that nodejs installs hundreds of little packages and it sometimes seems like clutter. I also decided to rely on chatGPT for help. My first prompt was just to get a workflow to got from a WebAssembly Text (WAT) file to a working web page.
 How do I run a webassembly WAT file in a browser?

I was provided with a workflow that was illustrated with a simple program, a suggestion to use the WABT package to compile, the matching webpage that could be run with a simple python server. So far so good. I installed WABT and compiled the WAT example and ran it using the webpage. The workflow and example worked as advertised. The code supplied with the book provided javascript wrappers suitable for running the WASM module with nodejs. Once again I turned to chatGPT to povide a html wrapper suitable for running the WASM module with a static webserver.
 I am attaching a WAT file for a webassembly can you suggest a simple webpage to demonstrate the module?
 I have attached a copy of a WAT file and the HTML generated. This approach seemed to work well until Chapter 11 which addresses to me the most interesting question how to port javascript to the faster near native WebAssembly mode. Unfortunately the answer is to port by hand the javascript to ActionScript and compile that to a wasm module. I will put off that to a different grist.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebAssembly Two's Complement</title>
</head>
<body>
<h1>WebAssembly Two's Complement Example</h1>
<p>Enter a number to calculate its two's complement:</p>
<input type="number" id="inputNumber" placeholder="Enter an integer">
<button onclick="calculateTwosComplement()">Calculate Two's Complement</button>
<p>Result: <span id="result"></span></p>
<script>
let wasmInstance;
async function loadWasm() {
try {
// Fetch and instantiate the WASM file (assume it's in the same directory)
const response = await fetch('twos_complement.wasm');
const bytes = await response.arrayBuffer();
const wasmModule = await WebAssembly.instantiate(bytes);
// Store the WASM instance for later use
wasmInstance = wasmModule.instance;
} catch (error) {
console.error('Error loading or running WASM:', error);
}
}
function calculateTwosComplement() {
const inputNumber = document.getElementById('inputNumber').value;
const number = parseInt(inputNumber, 10);
if (!isNaN(number)) {
// Call the twos_complement function from WASM
const result = wasmInstance.exports.twos_complement(number);
// Display the result
document.getElementById('result').textContent = result;
} else {
document.getElementById('result').textContent = 'Please enter a valid integer.';
}
}
// Load the WASM module when the page loads
window.onload = loadWasm;
</script>
</body>
</html>
Raw
twos_complement.wat
(module
(func $twos_complement (export "twos_complement")
(param $number i32)
(result i32)
local.get $number
i32.const 0xffffffff ;; all binary 1s to flip the bits
i32.xor ;; flip all the bits
i32.const 1
i32.add ;; add one after flipping all bits for 2s complement
)
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment