Fundamentals of Webassembly

I was reading more on the WebAssembly last week.wrote about JavaScript in the last post, I don't know whether I have given wrong feeling that we should not study JavaScript at all. I did not meant that.In fact we should study JavaScript to understand more on the internals and browser JS engines .

The only thing I meant , we are in need finding alternative ways for more robust/new languages to replace JS drawbacks.

Web Assembly + Rust can offer some of the replacement for JS drawbacks. read more https://webassembly.org/


I don't know I know good enough to write this post, but still writing..


How to start with Web Assembly + Rust:


You can read webassembly+ rust on  https://rustwasm.github.io/book/why-rust-and-webassembly.html


In Ubuntu Linux machine probably we need the below steps to run webassembly with rust:

1. You need Rust tool chain: rustc, rustup and Cargo   . read the below link for rust tool chain - https://www.rust-lang.org/tools/install


2. wasm-pack - is a one shop for building testing Rust+webassembly applications.
 read about wasm-pack here https://rustwasm.github.io/wasm-pack/installer/

  wasm-pack has prerequisite for  Rust and npm. Since we installed rust in the above step, we only need npm to install ( if you haven't installed)

npm is a package manager for JavaScript. You can install it from https://www.npmjs.com/get-npm


You can get a project template with following ..

Clone a project template with this command:

cargo generate --git https://github.com/rustwasm/wasm-pack-template

you can follow below steps from the document to start with it .. https://rustwasm.github.io/book/game-of-life/hello-world.html




How to access Document elements(DOM ) using Webassembly+Rust

We need wasm_bindgen and web_sys libraries to access the DOM elements with Rust. You can read more about web_sys here -https://rustwasm.github.io/wasm-bindgen/api/web_sys/

Code: lib.rs

extern crate wasm_bindgen;
extern crate web_sys;

mod utils;

use wasm_bindgen::prelude::*;

use wasm_bindgen::JsCast;
use web_sys::{Document, Element, HtmlElement, Window};


#[wasm_bindgen(start)]
pub fn run() {
    using_web_sys();
}


fn using_web_sys()-> Result<(),JsValue>{
use web_sys::console;

console::log_1(&"Hellowrld to console using websys".into());

let window = web_sys::window().expect("no global window exists");
let document = window.document().expect("no document  found");

let body  = document.body().expect("document should have a body");


let val = document.create_element("p")?;

    val.set_inner_html("Hello from 121Rust!");
val.set_attribute("id","p1");
body.append_child(&val);
        let element = document
.get_element_by_id("p2").expect("no p2 element found");

let element1 = document
.get_element_by_id("p1").expect("no p1 element found");


let att = element.text_content().expect("no element text found");

let att1 = element1.text_content().expect("no element text found");
console::log_1(&att.into());

console::log_1(&att1.into());
    Ok(())

}

cargo.toml:

[package]
name = "na-rust-web"
version = "0.1.0"
authors = ["naveen "]

[lib]
crate-type = ["cdylib", "rlib"]


[dependencies]
cfg-if = "0.1.2"
wasm-bindgen = "0.2.29"
#web-sys = { version = "0.3.6", features = ['console'] }

# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.1", optional = true }

# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.2", optional = true }

[dev-dependencies]
wasm-bindgen-test = "0.2.29"


[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
  'console',
]
profile.release]
# Tell `rustc` to optimize for small code size.

opt-level = "s"