Keywords: WebAssembly, Wasm, Deno, Rust, JavaScript
Overview: This article introduces WebAssembly (Wasm) and demonstrates how to use it with Deno to execute high-performance code. It explains how to build a simple Wasm module and integrate Rust functions into JavaScript using wasmbuild. The article highlights Deno 2.1’s improved Wasm support, making it easier to import and use Wasm modules. It encourages readers to explore Wasm’s potential and provides resources for further learning.
Section Summaries:
- Building a Wasm module: This section guides you through creating a basic Wasm module using WebAssembly text format and compiling it using
wat2wasm. It demonstrates how to import and use the compiled Wasm module in Deno, emphasizing Deno’s type-checking capabilities for Wasm exports. The example showcases a simple addition function written in Wasm. - Call Rust from JavaScript via Wasm: This section explains how to use
wasmbuildto generate glue code for calling Rust functions from JavaScript. It walks through the process of creating a Rust crate, defining functions with thewasm_bindgenattribute, and building the project. The generated JavaScript code imports and executes the Rust functions, demonstrating seamless integration between Rust and JavaScript. - What’s next?: This section encourages readers to explore potential use cases for WebAssembly and provides additional resources for further learning. It mentions Deno’s plans to simplify the Wasm compilation step and improve the JavaScript API for Rust integration. The section highlights the ease of importing Wasm modules in Deno 2.1.
Related Tools:
- Wabt: https://github.com/webassembly/wabt
- Wasm Code Explorer: https://wasdk.github.io/wasmcodeexplorer/
- wasmbuild: https://github.com/denoland/wasmbuild
References:
- Google Earth comes to more browsers thanks to WebAssembly: https://medium.com/google-earth/google-earth-comes-to-more-browsers-thanks-to-webassembly-1877d95810d6
- Photoshop on the web: https://web.dev/articles/ps-on-the-web
- Deno 2.1’s first-class Wasm support: https://deno.com/blog/v2.1#first-class-wasm-support
- WebAssembly text format: https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format
- Type checking: https://docs.deno.com/runtime/reference/wasm/#type-checking
- Refer to the documentation: https://docs.deno.com/runtime/reference/wasm/
- wasm-bindgen: https://rustwasm.github.io/docs/wasm-bindgen/introduction.html
- Simplifying the Wasm compilation step and only exposing higher level JavaScript API: https://github.com/denoland/wasmbuild/issues/145
- WebAssembly Language Support Matrix: https://developer.fermyon.com/wasm-languages/webassembly-language-support
- Awesome Wasm Langs: https://github.com/appcypher/awesome-wasm-langs
- Wasm By Example: https://wasmbyexample.dev/home.en-us.html
- Deno 2.1 was just released: https://deno.com/blog/v2.1
- first-class Wasm support: https://deno.com/blog/v2.1#first-class-wasm-support
- Long Term Support release branch: https://deno.com/blog/v2.1#long-term-support-release
- improved package management with: https://deno.com/blog/v2.1#dependency-management
- embedding assets with: https://deno.com/blog/v2.1#embed-asset-files-in-deno-compile
Original Article Link: https://deno.com/blog/intro-to-wasm