book Use `--target web` to reduce complexity of "Hello World" (cut down on tools needed to start)

Suggested instructions that don't need a generator or a bundler:

make sure wasm-pack is installed
checkout or download https://github.com/rustwasm/wasm-bindgen
got to examples/hello_world/
execute wasm-pack build --target web
create an index.html like

<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <script type="module">
      import init, { greet } from './pkg/hello_world.js';

      async function run() {
        await init();

        greet("World");
      }

      run();
    </script>
  </body>
</html>

open index.html in a browser

Jul 27 '19 21:07 kud1ing

Note:

the 4th step will fail, if the example was obtained by checking out the repository, see https://github.com/rustwasm/wasm-bindgen/issues/1680
it would be nice, if the hello_world directory included the index.html already
the last step works in Firefox, but fails in Safari:

[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (hello_world.js, line 0)
[Error] TypeError: Cross-origin script load denied by Cross-Origin Resource Sharing policy.
	promiseReactionJob

Jul 27 '19 21:07 kud1ing

This is pretty close to what we already have here: https://rustwasm.github.io/docs/book/game-of-life/hello-world.html

The main difference is that it doesn't use --target web, but we would like it to eventually. The main thing blocking switching the tutorial to using --target web is the addition of watch and serve subcommands to wasm-pack, so that we don't regress dev server and file watching fromt he developer experience.

Since we don't have an issue open in the book repo to track this, I'll make this issue be that.

Jul 29 '19 17:07 fitzgen

Upstream blockers:

https://github.com/rustwasm/rfcs/pull/10

https://github.com/rustwasm/wasm-pack/issues/457

Jul 29 '19 17:07 fitzgen

I appreciate this, OTOH:

a typical C "Hello world" requires about 2 things: a text editor and a C compiler/linker.
a minimal WASM with Rust "hello world" would require about 3 things: a text editor/git client, Rust and wasm-bindgen.
The current "hello world" asks the reader to install a project generator and an advanced development tool. I would reserve that to later.

I am not a newcomer to Rust, but i've struggled for about 1 hour to figure out how to get the current "hello world" working without installing tools i don't understand the need for.

It' s subjective. I prefer to learn bottom up, from the simple towards the complex.

Jul 29 '19 17:07 kud1ing

The minimal hello world example is now at https://github.com/kud1ing/Rust-WebAssembly-Hello-World/

Aug 07 '19 08:08 kud1ing

I've just noticed that there are some more minimal examples:

https://github.com/rustwasm/wasm-bindgen/tree/master/examples/without-a-bundler
https://github.com/rustwasm/wasm-bindgen/tree/master/examples/without-a-bundler-no-modules

Aug 09 '19 11:08 kud1ing