design Need basic example

Your "Hello World" example at http://webassembly.org/getting-started/developers-guide/ creates a 1,301 line HTML file, a 2,688 line JavaScript file to make the generated "Hello World" wasm file work. Presuming it is possible, could you please create a demo with the absolute minimal HTML and JavaScript code? What you have provided is useless to me.

Aug 23 '17 20:08 blakemcbride

For a truly simple WASM file, the HTML and JavaScript can be reduced to maybe 5 lines each, and online tools like http://mbebenita.github.io/WasmExplorer/ make it relatively easy to generate a WASM file, but I agree, a sample putting it all together would be very helpful.

It's on my agenda for the .NET-based WebAssembly implementation I'm making, but I'm not aware of any "standard" way to generate a WASM file that would be appropriate for the official site, other than the complex Emscripten-based approach already there...

Aug 24 '17 00:08 RyanLamansky

Here's an example that's about as simple as it gets:

<!DOCTYPE html>
<body>
  <pre></pre>
  <script>
    /*
      (module
        (func (export "add") (param i32 i32) (result i32)
          get_local 0
          get_local 1
          i32.add))
    */
    let moduleBytes = new Uint8Array([
      0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x07, 0x01, 0x60,
      0x02, 0x7f, 0x7f, 0x01, 0x7f, 0x03, 0x02, 0x01, 0x00, 0x07, 0x07, 0x01,
      0x03, 0x61, 0x64, 0x64, 0x00, 0x00, 0x0a, 0x09, 0x01, 0x07, 0x00, 0x20,
      0x00, 0x20, 0x01, 0x6a, 0x0b
    ]);
    WebAssembly.instantiate(moduleBytes).then(
    ({instance}) => {
      let preEl = document.querySelector('pre');
      preEl.textContent += instance.exports.add(10, 20);
    });
  </script>
</body>

If you load this in your browser it should display 30.

Sep 06 '17 19:09 binji

@binji's example, live: https://jsfiddle.net/b1cmfjzy/

Sep 06 '17 23:09 jfbastien

Thanks a lot @binji! Your example has got to be "as simple as it gets". If you could make it just slightly more complex, it would be very helpful. Your example has the bytecode inline. The way I imagine using WebAssembly is to write WA code, compile it in it's own file, and then use it in a standard html/js situation.

Could you extend your example to have the WebAssembly in a separate file rather than inline? Also, could you give the WebAssembly source for the "display 30" example?

Thanks! Blake

Sep 10 '17 13:09 blakemcbride

OK, here you go: https://gist.github.com/binji/09e61f11f7b9307bcbcc120b95cf4162

The way I imagine using WebAssembly is to write WA code...

You can write WebAssembly text by hand, but we expect most users will compile from a higher-level language.

Also, could you give the WebAssembly source for the "display 30" example?

The source is in the comment before moduleBytes, and I've also included it in the gist.

Sep 11 '17 02:09 binji