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

rustwasm / book

The Rust and WebAssembly Book

https://rustwasm.github.io/docs/book/

MIT License

1.75k stars 211 forks source link

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

Open kud1ing opened 5 years ago

kud1ing commented 5 years ago

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

kud1ing commented 5 years ago

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

fitzgen commented 5 years ago

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.

fitzgen commented 5 years ago

Upstream blockers:

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

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

kud1ing commented 5 years ago

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.

kud1ing commented 5 years ago

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