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"
