Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix typos in hello-world.rust.en-us.md #154

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix typos in hello-world.rust.en-us.md #154

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 18 additions & 18 deletions examples/hello-world/hello-world.rust.en-us.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@

For our first program, we will be doing a "Hello world" type of program in [Rust](https://www.rust-lang.org/) and [wasm-pack](https://github.com/rustwasm/wasm-pack).

To keep things simple with Wasm's limitations mentioned [in the introduction example](/example-redirect?exampleName=introduction&programmingLanguage=all), instead of displaying a string, we will add two numbers together and display the result. Though, it is good to keep in mind, in later examples, a lot of these limitations will be abstracted away by your WebAssembly Language of choice (In this case, Rust). It is also highly recommended you take a look at the [wasm-pack QuickStart Guide](https://github.com/rustwasm/wasm-pack#-quickstart-guide), as it will be referenced a lot in this example.
To keep things simple with Wasm's limitations mentioned [in the introduction example](/example-redirect?exampleName=introduction&programmingLanguage=all), instead of displaying a string, we will add two numbers together and display the result. It is good to keep in mind, though, that in later examples a lot of these limitations will be abstracted away by your WebAssembly language of choice (in this case, Rust). It is also highly recommended you take a look at the [wasm-pack quickstart guide](https://github.com/rustwasm/wasm-pack#-quickstart-guide), as it will be referenced a lot in this example.

---

## Project Setup

So first, Let's get [rust installed](https://www.rust-lang.org/tools/install), which includes [cargo](https://doc.rust-lang.org/cargo/index.html). Then, using cargo, let's install wasm-pack, which we will need later:
First, let's get [Rust installed](https://www.rust-lang.org/tools/install) which includes [cargo](https://doc.rust-lang.org/cargo/index.html). Then, using cargo, let's install wasm-pack, which we will need later:

```bash
cargo install wasm-pack
```

Next, let's create our rust crate in our current directory using cargo:
Next, let's create a Rust crate in our current directory using cargo:

```bash
cargo init
```

Then, let's edit our new `Cargo.toml` to implement [wasm-pack](https://github.com/rustwasm/wasm-pack#-quickstart-guide) as mentioned in their quickstart:
Then, let's edit our new `Cargo.toml` to implement [wasm-pack](https://github.com/rustwasm/wasm-pack#-quickstart-guide) as mentioned in their quickstart guide:

```toml
[package]
Expand All @@ -40,22 +40,22 @@ crate-type = ["cdylib"]
wasm-bindgen = "0.2"
```

Lastly, let's take a quick peek inside at the `src/` directory. Since we are building a library (lib) to be used by a larger application, **we need to rename the `src/main.rs` to `src/lib.rs`.** Go ahead and do that now before moving forward.
Lastly, we'll take a quick peek inside the `src/` directory. Since we are building a library (lib) to be used by a larger application, **we need to rename the `src/main.rs` to `src/lib.rs`.** Go ahead and do that now before moving forward.

Now that we have our project and environment setup, let's go ahead and start the actual implementation.
Now that we have our project and environment set up, on to the actual implementation.

---

## Implementation

Let's go ahead and replace `src/lib.rs` with the required `use` call as mentioned in the quickstart, as well as our add function:
In `src/lib.rs`, import the prelude of `wasm-bindgen` and define our `add` function:

```rust
// The wasm-pack uses wasm-bindgen to build and generate JavaScript binding file.
// Import the wasm-bindgen crate.
use wasm_bindgen::prelude::*;

// Our Add function
// Our addition function
// wasm-pack requires "exported" functions
// to include #[wasm_bindgen]
#[wasm_bindgen]
Expand All @@ -64,26 +64,26 @@ pub fn add(a: i32, b: i32) -> i32 {
}
```

Then, let's compile our crate using wasm-pack, into a wasm module. Then run the following command, taking note of the [--target web](https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target). The wasm-pack tool has support for a lot of different output types, especially for bundlers like Webpack or Rollup. But, since we want an ES6 module in our case, we use the `web` target below:
Next, let's compile our crate using wasm-pack into a Wasm module. Then run the following command, taking note of the [`--target web`](https://rustwasm.github.io/docs/wasm-pack/commands/build.html#target). The wasm-pack tool has support for a lot of different output types, especially for bundlers like Webpack or Rollup. But, since we want an ES6 module in our case, we use the `web` target below:

```bash
wasm-pack build --target web
```

This will output a `pkg/` directory containing our wasm module, wrapped in a js object. Next, lets create an `index.js` JavaScript file, and import the outputted ES6 module in our `pkg/` directory. Then, we will call our exported `add()` function:
This will output a `pkg/` directory containing our Wasm module, wrapped in a JS object. Next, let's create an `index.js` JavaScript file, and import the outputted ES6 module in our `pkg/` directory. Then, we will call our exported `add()` function:

> **NOTE:** In this example, we are using the exported function from the wasm module directly to help highlight the WebAssembly API. `wasm-bindgen` generates JavaScript bindings code that can be imported as an ES6 import, and is the recommended way to work with your Rust Wasm modules. These JavaScript bindings are shown in the "Passing High Level Data Types with `wasm-bindgen`" example.
> **NOTE:** In this example, we are using the exported function from the Wasm module directly to help highlight the WebAssembly API. `wasm-bindgen` generates JavaScript bindings code that can be imported as an ES6 import, and is the recommended way to work with your Rust Wasm modules. These JavaScript bindings are shown in the "Passing High Level Data Types with `wasm-bindgen`" example.

```javascript
// Import our outputted wasm ES6 module
// Which, export default's, an initialization function
// Import our outputted Wasm ES6 module
// Which exports an initialization function
import init from "./pkg/hello_world.js";

const runWasm = async () => {
// Instantiate our wasm module
// Instantiate our Wasm module
const helloWorld = await init("./pkg/hello_world_bg.wasm");

// Call the Add function export from wasm, save the result
// Call the Add function export from Wasm, save the result
const addResult = helloWorld.add(24, 24);

// Set the result onto the body
Expand All @@ -92,7 +92,7 @@ const runWasm = async () => {
runWasm();
```

Lastly, lets load our ES6 Module, `index.js` Javascript file in our `index.html`:
Lastly, let's load our ES6 Module, `index.js` JavaScript file in our `index.html`:

```html
<!DOCTYPE html>
Expand All @@ -106,12 +106,12 @@ Lastly, lets load our ES6 Module, `index.js` Javascript file in our `index.html`
</html>
```

And we should have a working Wasm Add (Hello World) program! Congrats!
And we should have a working Wasm program that adds (Hello World)! Congrats!

You should have something similar to the demo ([Source Code](/source-redirect?path=examples/hello-world/demo/rust)) below:

## Demo

<iframe title="Rust Demo" src="/demo-redirect?example-name=hello-world"></iframe>

Next let's take a deeper look at WebAssembly [Exports](/example-redirect?exampleName=exports).
Next, let's take a deeper look at WebAssembly [exports](/example-redirect?exampleName=exports).