WebAssembly Tutorial - 5 - Exported Functions

In this video, we delve deeper into how to send functions from JavaScript to WebAssembly to be called. We use the malloc function as an example template and use the concept to create a logger that WebAssembly will periodically call throughout the progress of an expensive function and see how JavaScript will react with the callbacks.

Timestamps
• Introduction: 0:00
• C program: 1:20
• Examining the .wasm file: 5:55
• HTML interface: 8:40
• Progress bar and exploration: 12:56

[MichaelGrieco]

In regards to the mess of the progress bar that we created starting at 12:56, here is an explanation. What we were trying to do was have a visual indicator on the HTML file that showed the progress of an expensive operation happening in WebAssembly's sandbox. This is quite a common task delegated to WebAssembly, and it was the motivating problem to create the technology. As shown, the .wasm file imports a function called logProgress from "env" which takes in a parameter of type double (f64). We created the JavaScript callback which printed the progress value in the console. However, JavaScript would not commit the changes to the DOM or to CSS until the call to exports.randString was completed. The only way for this to happen was with the alert function, which interrupted JavaScript and forced it to push changes to the DOM, albeit at an expense of having to manually click through it.

[arupde]

be regular . continue this webassembly using c++ series

[kyonas]

you should try zig out


compiling to web assembly is included in the compiler itself so it's just a flag away

[EmanueleVassallo]

Hi! This one doesn't work anymore. It doesn't compile to wasm file.
wasm-ld: error: undefined symbol: curTime
wasm-ld: error: undefined symbol: logProgress
emcc: error: -o exported.wasm

PS: Thanks for these tutorials!