WebAssembly (WASM)
What is WebAssembly?
WebAssembly, or WASM, is a low-level programming language designed to be executed by web browsers
Okay, you lost me again. Can you say that in human words?
Absolutely!
First let's talk about high- and low-level programming languages
Matter of fact, let's talk about my one-sentence answer the the question "What is WebAssembly?" This will be our example, because it's written in a similar way to how we use high-level programming languages. Here it is again:
"WebAssembly, or WASM, is a low-level programming language designed to be executed by web browsers"
You know what's great about that sentence?
It's a sentence. It's short. If you read that sentence and understand what I mean by those words in that order, you're good to go. You don't even need to read the rest of this section to understand what WASM is. Easy!
...for some folks. Inscrutable for others
This is where low-level languages come in
A high-level language assumes a level of knowledge of the person reading it. In the case of our WASM sentence, I assume quite a lot about you, dear reader. I assume you know what a low-level language is and how it contrasts with a high-level one. I assume you know what it means for code to be executed and why it's interesting that WASM can be executed by web browsers. I assume you know what programming languages and web browsers are. I assume that you can read my particular idiolect of English, that you'll infer that "WASM" is an abbreviation for "Web Assembly," and that you'll pronounce it like /'wasm̩/ and not like "W-A-S-M"
But some or all of that may be untrue and you may be left thinking "Who is this maniac, and why is xe making up so many weird words? I can make up words too, you know. Yupt!"
...which is why we have low-level programming languages!
A low-level language can convey the same information that a high-level language does, but it spells out exactly what it means in more explicit terms. We can use my whole answer in this entire section as our example to describe low-level languages. It answers the same question, but assumes less of the reader and walks through the answer step by step
Using more low-level language makes it more likely that you'll understand the answer, but it takes a lot longer to spell everything out. Look at how long this section is compared with the last one!
Speed and comprehensibility
Given the added length, you might conclude that using low-level language would take more time to convey an idea. However, this is not always the case
Imagine someone reading our one-sentence answer and not knowing what a 'low-level programming language' is. Let's call this person 'Kyle.' By xemself, xe can sit and reread the sentence, but without further information xe might not get much closer to understanding it. Xe could guess what it means, but this could lead to unpredictable results
Or... xe could find a friend to interpret the sentence for xyr. Let's call this interpreter 'Beechy'
Hey, I know Beechy!
Beechy is a known lover of languages and knows a lot about computers. Beechy could read the sentence, and if ze understands the meaning I intend to convey, ze could spell it out to Kyle bit by bit. This way, Kyle will likely understand the information as relayed by Beechy
However, there are a couple issues with this strategy. It's a long process. Kyle has to rolodex xys list of friends, remember that Beechy can interpret high-level gibberish, contact Beechy, and prepare some ice cream to bribe zyr into helping out
While Beechy eats zys ice cream, ze has to read the high-level answer and think about what I might mean by it. If there are any terms ze is unsure about, ze will (hopefully) take the time to look them up
Once Beechy has a full stomach and a good grasp on what the sentence means, ze must figure out a way to convey that information to Kyle in a way xe will understand. Then, Beechy will have to actually convey that information to Kyle, probably stopping to answer some of xys questions along the way. This whole process, from Kyle reading the sentence until xe finally understands it, takes a long time
...and this is all assuming that Beechy correctly interprets what I mean and nothing gets lost in translation!
All told, if Kyle doesn't understand my high-level, one sentence answer, it is ultimately faster and more reliable for me to provide an answer using lower-level language
Okay, I'm with you now. But... weren't we talking about computers or something?
Right you are!
Computers, once you follow the chain of technology down to a low enough level (see what I did there?), only understand low-level programming languages. If you feed your computer's CPU a string of text that says "Hey, could you print me something that says 'Hello World,' but in all caps please?" you're likely to receive a response like this:
In reality, the response will look a little different. Most machines don't actually speak English converted to simple character strings, like in that example where the letter 'a' is represented by the string '01100001'. Instead, they need exact instructions for what they are to do
Consider this situation: I'm typing and want to type the character '^'. I can shout at my fingers "Hey, please type a '^' symbol for me!" all I want, but they're unlikely to understand the message
Instead, I send bioelectric impulses through my nervous system to my muscles that instruct them in each action to take. These impulses might be translated something like this:
- - Move our left pinky finger to the left and back towards our stomach, about an inch in total, until it's seated above the 'Shift' key. While doing this, rotate our left wrist slightly so that the other fingers of our left hand stay close to their current positions
- - Press down on the 'Shift' key with our left pinky finger by about half an inch, or until we feel resistance, and hold it there
- - Move our right wrist to the left and out away from our stomach by about 2 inches so that our right index finger can more easily stretch out. While doing this, rotate our right wrist slightly so that the right part of our right hand stays close to its current position
- - Reach out with our right index finger to the left and out away from our stomach, about half an inch, until it's seated above the '6' key
- - Press down on the '6' key with our right index finger by about half an inch, or until we feel resistance
- - Quickly release our hold on the '6' key and move our right hand back to our neutral position
- - Release our hold on the 'Shift' key and move our left hand back to our neutral position
Notice that these directions said nothing about the '^' symbol, or even typing at all. These are higher-level concepts that aren't useful to my muscles themselves
Like my muscles, low-level machines need simpler instructions. The series of 1's and 0's in their language might translate to phrases like "move a copy of this value to this point in memory" or "multiply these two integers together"
An 'Assembly Language' is a programming language that is structured in basic enough terms that a low-level computer can understand them
WebAssembly is so named because it is an Assembly Language for the Web
WebAssembly is a programming language that is structured in terms that web browsers (like Chrome and Firefox) can understand
Where can I use WebAssembly?
WebAssembly is now supported by all major modern web browsers
There are also runtimes for WebAssembly like Wasmtime and Wasmer that you can use to execute WASM code outside of a browser
Okay, but I don't want to write programs in binary! How can I use WebAssembly?
Good news! You don't need to code in binary to write WebAssembly programs!
If you really want to get into the nitty gritty details, WebAssembly has a text format (.wat), that provides a (somewhat) human-readable translation of the WASM binary
Most folks, though, prefer something a bit more high-level. Luckily, we can use a WASM runtime like Wasmtime to write WASM programs using higher-level languages like Rust and Python
This is one of the biggest draws that attracts people to WebAssembly: WASM provides a vehicle for other languages to run in web browsers
Aww come on! Can't I just use JavaScript?
Once written, WebAssembly programs can also be interacted with using JavaScript/TypeScript, either on the client or using runtimes like Deno and Node.js
Let's take my fantasy name generator Namagen as a server-side example. To incorporate Namagen into this website, I have the package running on a small Deno server hosted on the edge that is hit with an API call when you go to the Namagen webpage
For use on the client, a bundler like Vite/Rollup or WebPack is generally used to interface with WASM packages kept in the node_modules folder
Both client and server-side WASM programs can be published to repositories like npm and deno.land/x. You might even be using WASM in your website already without knowing it!
Why would I want to use WebAssembly?
WASM is fast! Since your web browser doesn't need an interpreter to understand WebAssembly, it can perform complex tasks very quickly
In fact, WebAssembly is so fast that some folks are now using it to run full data science stacks inside a web browser!
WASM enables you to run code written in non-JavaScript languages in the browser. The data science stack mentioned above is an example of Python code running in the browser using WASM!
WebAssembly also has security benefits. WASM modules execute in sandboxed environments separate from each other and from the host runtime. That means that, in general, the modules can't talk with the outside world, or with each other, without going through you
All in all, WebAssembly is a great tool you can use to talk with web browsers in their own language!
