I’ve heard about web assembly for some time. I’ve never seen anything built around it. Let’s review what’s going on.

WebAssembly is a target platform for compilers in other languages like C++. It allows you to write code in one language, and compile it for the web. Interesting. It is sort of like npm packages – except that instead of a module containing raw javascript, you are getting a binary file that you import modules from. Popular languages are C/C++, Rust, AssemblyScript, Go (Golang), Python (Emscripten), and Kotlin. It looks like someone also created the ability for the 6502 assembly code to target WebAssembly. Now that’s interesting.

Is there a language for it? Not natively. However there is AssemblyScript and WebAssembly Studio.

With all of the hubub about how fast WebAssembly is, why isn’t there a bundler that converts JavaScript code to WebAssembly? Isn’t it faster as assembly?

WebAssembly System Interface (WASI) provides an interface to interact with the operating system to access networks and file systems.

So from what I understand is that WebAssembly is more of a way to access libraries written in other languages if someone’s willing to invest the time to target the WebAssembly platform.

When is WebAssembly used?

• Games
• Augmented Reality
• Virtual Reality
• Image manipulation
• Video processing
• Simulations
• Cryptography / Encryption
• Computationally intense tasks (Neural Nets)
• Porting existing applications
• Blockchain

How do you use it?

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((results) => {
    results.instance.exports.exported_func();
  });

Can some JavaScript be converted/moved to WebAssembly? Probably, but JavaScript (the native language in the web ecosystem) isn’t even listed in the developers guide of the many languages listed to use. The closest is perhaps AssemblyScript, which is similar to TypeScript, which is essentially JavaScript but with typing.

Will this stick around? Will it (has it) become mainstream? Are there people that work specifically with WebAssembly as a career, or is this just another tool that they target? If this is a big deal, then why is it that as a web developer, I haven’t encountered it in any of my projects or seen it mentioned on job postings?

When I first started programming for web development, I was focused more on vbScript. Microsoft Internet Explorer was the dominant browser at the time and supported it out of the box. I grew up with BASIC, QBASIC, and eventually moved to Quick BASIC and various versions of Visual Basic from 3 onward. Once active server pages came out, it’s primary target was vbScript, but could also support JavaScript. It wasn’t until a couple years after the .Net framework came out that I switched over to using C#. vbScript is generally not used anymore except for a few Microsoft Office applications with Visual Basic for Applications (VBA).

Since AssemblyScript is closest to TypeScript, it may be the ideal choice to use. If WebAssembly goes away, or code needs to be moved between compiled/uncompiled, it would be easier to translate between the two languages.

How do you write/compile AssemblyScript?

If you are running node, you can start on the command line to install the assemblyscript package

npm i assemblyscript -D

Create a typescript file, add.ts. Notice that types indicate the number of bits to use for each integer.

export function add(a: i32, b: i32): i32 {
  return a + b;
}

Compile the file

asc add.ts --target release --outFile add.wasm

Load the file as a module

import { add } from "./add.wasm";
console.log(add(1, 2));

Run the file…

[vite] Internal server error: “ESM integration proposal for Wasm” is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use .wasm?init or .wasm?url. See https://vitejs.dev/guide/features.html#webassembly for more details.

Ok… maybe WASM isn’t as great/mainstream as I thought it was if one of the most popular bundlers doesn’t support it. Let’s change how the module is loaded.

import init from "./add.wasm?init";
init().then(({ exports: { add } }) => {
  console.log(add(1, 2));
});

Well, that was fun. We are getting to the point that moving ahead with this should be its own separate project. We aren’t going to convert the whole project to AssemblyScript. Let’s keep the assembly code separate with its own compiler and testing tools and export it as a module. This prevents us from over complicating things.

Upon further research one cementer on InfoWorld’s video AssemblyScript explained: WebAssembly made easy mentioned that wasm is heading into leptos, dioxus, and yew.

@crab-cake 6 months ago
assemblyscript isn’t reallly where wasm is headed. look into leptos, dioxus, yew, etc.

• Yew – https://yew.rs/ Component Based framework using Rust
• Leptos – https://leptos.dev/ Rust framework for web apps
• Dioxus – https://dioxuslabs.com/ Rust library for building apps for desktop/web/mobile

So Rust… we’ve already chosen our platform, but hadn’t considered the possibility of using anything that’s not native to the web.

This changes things. Rust has been on my radar for some time now, and I’d be more inclined to learn Rust as a new language rather than Angular as a framework. It would change the whole platform though. No React. No Three.js library (I think?). Yes, they have something similar called Crate three inspired by Three.js. Can I still program for geolocation, camera, microphone, and Barcode Detection API and Web Audio API? If I can get everything working in Rust, maybe it improves the odds that I can get everything working on different platforms such as native mobile apps rather than web pages alone.

• Does the rust ecosystem (Yew/Leptos/Dioxus) generate anything with JavaScript?
• Is packaging assets a problem? Is it just one web assembly? Is there a way to split web assemblies so that if they are too big, we can progressively load them as needed?
• Does Rust have a large open package manager similar to https://npmjs.org (2+M packages) or https://rubygems.org/ (181K gems) – yes. They are called Crates https://crates.io/ (146K crates).
• How easy is it to develop a web application?

The other thing to consider is – how much time would I be investing learning a new language, jargon, ecosystem and tooling? What are the benefits to using Rust? Is it simply speed? Are other languages better/faster? How difficult is it to setup and configure a Rust project for “Hello World”? What’s the compile time like? Does the syntax have a high learning curve? If Rust is a good idea, why not consider Golang as well? Am I just considering it because I hear about it every now and then? When was the last time I even saw a job posting about Rust? I think I’m leaning too far into bias and desires of learning something cool rather than thinking logically.

I think for now, I’m going to stick with the TypeScript React app. The main goal was to figure out what WebAssembly is and if I should consider using it now in the early stage of the project. WebAssembly is not used for entire front-end development programming. Once I get into computationally intensive stuff on the front-end, I’ll consider WebAssembly with Rust, Golang, or AssemblyScript.

Things I may need it for

• Polyfill Barcode scanning
• Pulling Barcodes out of images
• Physics?
• Audio transfers
• Compression for transfers
• QR Code Generation
• Encrypting data
• Augmented Reality

The main goal is to get this project up and running as quick as possible. Throwing some new technologies into the pipeline is counterintuitive at this time.