Why you can play Mario 64 from the browser - Become a Frontend dev without Javascript (Part 2)

Original email from June 27, 2024

"Wahoo! Yippee!"

Huh? Oh! Sorry is my game too loud? I was still playing Mario 64 straight from the browser 😅

Last email I started exploring the alternatives of just using HTML, CSS or Javascript as a frontend developer.

Is it possible? Does that make sense? Let's continue and find out!

What the heck is Web Assembly?

You know how in Javascript, if you just wanted to add two numbers together you could just do something like const result = num1 + num2?

Well, we can do that because Javascript is a high-level language. That just means that the code we write abstracts away the nitty-gritty computer code that actually performs the addition. So instead of worrying about the details of how the computer processes the numbers, where it stores them, in which part of memory... we just write straightforward, human-readable code!

Under the hood though, our num1 + num2 operation could equal hundreds upon hundreds of instructions that are given to the CPU to change binary values to other binary values. I'm literally talking about 1s to 0s here. All at speeds that we can't even fathom. As well as abstracted away so we don't need to think about it.

Assembly languages are the sort of coding languages that get as close to giving instructions to the computer as possible. It's hard to read, involves knowing a lot about the hardware and is 10000% of something you really only run into in software engineering courses or college.

And guess what? Browsers have their own version of this low-level language they can run since 2017 called Web Assembly (Wasm).

Reading an official description of what Web Assembly is (the bolded text is my addition):

WebAssembly (Wasm) is a low-level binary instruction format designed to be a safe, fast, and platform-independent runtime for high-level languages on the web. What's super freaking dope about it is it allows developers to run code written in languages like C, C++, Rust, and others on web browsers at near-native speeds.

So browsers don't just run Javascript anymore. They can run web assembly alongside Javascript.

The cool thing is you don't ever write in actual Web Assembly (dear heavens imagine if we had to do that), but you code in other languages that aren't JS and then use programs or plugins to convert it to Wasm.

For example...

Did you know Figma is actually written in C++? 👀

One of the reasons why Figma is so fast, loads instantly and creates such a good user experience is because the main program you see isn't in Javascript at all. It's C++ that has been compiled into Wasm, which is later used with JS on the browser.

I don't know why but that fact blew my mind and opened my perspective on everything that can be done on the browser. Imagine a website that isn't just using HTML, CSS and JS!!

Also imagine finding this out just now, 7 years late to the party and being hyped when everybody is over it now 😂

​Here's a really great article made by the Figma team about their experience on using WASM when it became available and increasing speed by 3x.​

Other platforms I've learned that use WASM in similar ways are Autocad and Photoshop as well. Oh and I guess Super Mario 64.

Using WASM to play Super Mario 64 natively on the browser

In June of 2020, the original Super Mario 64 game was decompiled into C. The effort took a team of passionate hobbyists over 2 years to fully reverse-engineer the game, gather as much info as possible and figure out how to get the source code. The end product to all of this was a way to generate an executable that lets you natively run the game off of your computer without it being emulated. Which is like I said before, bananas!

Oh but wait! What did we say before about WASM? That you can use something like a C program, compile it to WASM using something like Emscripten, and then set it up to be run on the browser?

Does that mean that we can... 😏

Oh hell yeah - you can run Super Mario 64 on the browser today.

​Have fun if you want to play like me

(You might have audio issues like I did. That's because browsers don't allow you usually to play music or audio on a website without a prior user interaction. Click on the little lock in the URL of your browser and fiddle around with the settings to trust that site to play audio without user interaction)

But wait a minute, now that WASM exists does that mean...

Can you become a front-end developer without Javascript after all?

After doing a deep dive into this really cool technology I've never knew before, being blown away by the possibilities and excited about the future, all I have to say is...

You should learn Javascript either way 😅

First of all, WASM wasn't made to replace Javascript but to be used together with it. While it would be nice to think you can have a website made entirely with something like C++, the reality is the use cases for WASM are very limited (perfect for heavy computing and situations where native performance speed is a must, but not ideal for anything else).

Another aspect to consider is you can't interact with the DOM without Javascript. Or if you can, it's extremely clunky, it is a very new technology after all.

I have seen some interesting articles on its use for server environments but oof, my brain is fried from learning so much about it these last 2 days. So I'll leave that investigation up to you if you pursue it.

Hopefully, this email served as a good introduction to the concept if you didn't know about it (And served as an excuse to play a beloved N64 from my childhood as well)

Till next week!