![wasm_logo.png](https://cdn.steemitimages.com/DQmV7viDydF4JeJqAnnkyf9qyRk7MgN8LzsQFfAGZ3rJjZ3/wasm_logo.png)

#### Repository
https://github.com/rust-lang/rust

#### What Will I Learn?

- You will learn how to use Cargo Web
- You will learn about Stdweb
- You will learn about the Rust Web API from Stdweb
- You will learn how to use the js! and console! macros
- You will learn how to make event listeners in Rust
- You will learn how to draw on canvas elements with Stdweb

#### Requirements

##### System Requirements:

- [Visual Studio Code](https://code.visualstudio.com/) or any other Text Editor with Rust language plugins
- The [Rustup](https://rustup.rs/) command line tool and the nightly Rust compiler

##### Required Knowledge
- Some understanding of JavaScript and Node.Js
- Some basic understanding of Rust
- A fair amount of knowledge on web technologies and how they work

##### Resources for Rust
- Rust Website: https://www.rust-lang.org/
- Web Assembly Website: https://webassembly.org/
- Awesome Rust: https://github.com/rust-unofficial/awesome-rust
- Wasm Bindgen Repo: https://github.com/rustwasm/wasm-bindgen

##### Sources
- WASM Logo:  https://webassembly.org/

#### Difficulty

- Intermediate


#### Description

##### Outline and Overview

In this Rust Web Assembly Video tutorial, we take a look at the `stdweb` library for Rust.  This library has certain pros and cons when compared to the `wasm_bindgen` library that we've been using thus far. The `stdweb` library forms the basis for many of the web assembly frameworks and libraries that exist in Rust.  This includes the **Yew framework** that we've looked at in the past.  In this project, we build a bunch of event listeners to capture key and mouse events and we build some functions to allow us to draw on a 2d canvas.


##### Using Stdweb and Cargo Web to Build a Project

The `stdweb` library has many of the same design goals as the `wasm_bindgen` library. How it achieves these goals however, is vastly different.  Stdweb exposes a full native set of Web based APIs for interfacing with web browsers where as with `wasm_bindgen` the developer needs to specify which parts of the web API they want to use.  As a result of this, smaller projects tend to be more resource heavy in `stdweb` unless you strip out unnecessary elements of the API.  `Stdweb` has many nice features built directly on top of it; this includes the ability to write JavaScript code inside of the Rust application using the `js!` macro and the ability to access various top level objects using the `console!` macro.

![js!.png](https://cdn.steemitimages.com/DQmNuEH4QZY9vD1npySNH5bif8S9wVRGbTpWHLvTHQHD3Ma/js!.png)

In our example, we make use of the `js!` macro to write a simple "hello world" application and we also make use of the `console!` macro to be able to streamline access to the console object.  These macros help the library maintain the Rust language feel while still providing the ability to build flexible APIs and projects.  You can see how the lines in the `js!` macro are structured with a syntax that is like any normal JavaScript application. 


##### Making Event Listeners for the Mouse and Keyboard

This library also exposes many event based types which we can use to create listeners.  This includes `IEvent`, `KeyDownEvent`, `KeyUpEvent`, `MouseDownEvent`, `MouseMoveEvent`, `MouseUpEvent` as well as many others.  These types and functions follow the conventions of their JavaScript counterparts.  This means that building applications using the `stdweb` library is very familiar for developers who are well versed in JavaScript and front-end development without giving up the advantages of using Rust as a language.      

![rust_event.png](https://cdn.steemitimages.com/DQmaH9j8LyeqydsH2swf9VjHAtP6mxAdBSz3t4A1PJ62T1V/rust_event.png)

In this sample project, we add event listeners to the `window` object. We are able to gain access to this `window` object through the web module from inside of the `stdweb` library.  We add the event listeners by using closures and first class functions.  In this application, we create event listeners for key up and down, mouse up and down and mouse movement.  Notice how similar this syntax is to a typical JavaScript program. 


##### Accessing HTML Canvas from Rust

Along with the ability to create event listeners and use macros to access various parts of the web API; `stdweb` gives developers the ability to gain access to the canvas API.  This includes the ability to access the canvas context with a `CanvasRenderingContext2d` type and a `CanvasRenderingContext3d` type. The canvas itself can be expressed using the `CanvasElement` type as well.  

![rust_canvas.png](https://cdn.steemitimages.com/DQmWNmXHzeZT7pQFR2B1rZFx2NDxSJruoFKMzGBzKMPeFZA/rust_canvas.png)

In our project, we use this canvas API to draw multiple boxes.  We first draw three boxes using a `draw_box` function and the context which we access using an HTML selector.  We are then able to also attach this canvas `draw_box` function to our `MouseMoveEvent` event listener so that when a user moves their mouse inside of the Canvas element on the HTML document, it draws small squares under the mouse pointer.  


The source code for this project can be found [here](https://github.com/tensor-programming/rust_wasm_stdweb_example)



#### Video Tutorial

<iframe width="560" height="315" src="https://www.youtube.com/embed/kC3ExdRTzsM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

#### Curriculum
- [Intro to Rust Web Assembly with Rust's Wasm Bindgen Library](https://steemit.com/utopian-io/@tensor/intro-to-rust-web-assembly-with-rust-s-wasm-bindgen-library)
- [Rust Web Assembly - Building a Simple Markdown Parser with Rust's Wasm Bindgen](https://steemit.com/utopian-io/@tensor/rust-web-assembly-building-a-simple-markdown-parser-with-rust-s-wasm-bindgen)

#### Proof of Work Done
https://github.com/tensor-programming/