what is Rust?
Rust is a memeory safe compiled language,
It is used where memory is critical,where high level languages use garbage collector and low level languages give you pointers and allocations to shoot yourself
Rust takes a different approach.
What is WebAssembly?
WebAssembly (wasm) is a simple machine model and executable format with an extensive specification. It is designed to be portable, compact, and execute at or near native speeds.
As a programming language, WebAssembly is comprised of two formats that represent the same structures, albeit in different ways:
The .wat text format (called wat for "WebAssembly Text") uses S-expressions, and bears some resemblance to the Lisp family of languages like Scheme and Clojure.
The .wasm binary format is lower-level and intended for consumption directly by wasm virtual machines. It is conceptually similar to ELF and Mach-O.
Why Rust and WebAssembly?
Low-Level Control with High-Level Ergonomics
Small .wasm Sizes
Code size is incredibly important since the .wasm must be downloaded over the network. Rust lacks a runtime, enabling small .wasm sizes because there is no extra bloat included like a garbage collector. You only pay (in code size) for the functions you actually use.
Do Not Rewrite Everything
Plays Well With Others
The Rust Toolchain
You will need the standard Rust toolchain, including
The Rust and WebAssembly experience is riding the Rust release trains to stable! That means we don't require any experimental feature flags. However, we do require Rust 1.30 or newer.
wasm-pack is your one-stop shop for building, testing, and publishing Rust-generated WebAssembly.
cargo-generate helps you get up and running quickly with a new Rust project by leveraging a pre-existing git repository as a template.
Install cargo-generate with this command:
cargo install cargo-generate
Follow these instructions to install npm.
If you already have npm installed, make sure it is up to date with this command:
npm install npm@latest -g
After you generated a package let's see the contents and what it means.
Let's take a look at a couple of these files in detail.
Cargo.toml file specifies dependencies and metadata for cargo, Rust's package manager and build tool. This one comes pre-configured with a wasm-bindgen dependency, a few optional dependencies we will dig into later, and the
crate-type properly initialized for generating
src/utils.rs module provides common utilities to make working with Rust compiled to WebAssembly easier.
Build the Project
We use wasm-pack to orchestrate the following build steps:
Ensure that we have Rust 1.30 or newer and the wasm32-unknown-unknown target installed via rustup,
Compile our Rust sources into a WebAssembly .wasm binary via cargo,
To do all of that, run this command inside the project directory:
When the build has completed, we can find its artifacts in the pkg directory, and it should have these contents:
Putting it into a Web Page
Run this command within the Project directory:
npm init wasm-app www
Project-Name/www subdirectory contains:
This package.json comes pre-configured with webpack and webpack-dev-server dependencies, as well as a dependency on hello-wasm-pack, which is a version of the initial wasm-pack-template package that has been published to npm.
This file configures webpack and its local development server. It comes pre-configured, and you shouldn't have to tweak this at all to get webpack and its local development server working.
This is the root HTML file for the Web page. It doesn't do much other than load bootstrap.js, which is a very thin wrapper around index.js.
import * as wasm from "hello-wasm-pack";
so I guess that's enough for today
If you liked it give it a heart It will encourage me and if you think something is wrong please let me know below in the comments.If you are new here make sure to check out other rust tutorials.
Top comments (0)