All of this began because on Sunday, I made a silly LinkedIn post that started with:
"Hey Chatgpt, if I wanted to be a frontend developer but I didn't want to learn HTML, CSS, or Javascript, what should I do? Be very rude about it and use tons of emojis"
The post was funny. Snarky AI is funny. A frontend developer who doesn't know about HTML, CSS or JS is funny.
Until I was proven wrong by a very kind Senior developer who mentioned in that post:
"Realistically you could be a front-end dev for decades and never touch HTML, CSS, or JS - you could do WinForms, WPF/XAML, Unity, Unreal Engine, CryEngine, Swift, Blazor, Qt, or any number of other front-end systems which have nothing to do with HTML, CSS or JS. And in fact, nearly all of them can be compiled to Web Assembly and run in a browser with zero HTML, CSS or JS involved." - Timothy Partee
I had no idea what this man was talking about. It seemed unimaginable to think of the web as something that isn't JS-related.
I mean pffff, I've never seen Unity, Unreal Engine, or WinForms as part of the frontend roadmap, have you?
But also... that sounds really cool to learn about.
Can you imagine running video games off the browser if your computer was good enough for it? Or programming a website without using your typical IDE with JS-based frameworks?
So let's start my fall into this rabbit hole of insanity!
Can you run Unreal Engine on the web?
I started by googling the question that seemed the most interesting to me.
For the uninitiated, the Unreal Engine is a game development suite made by Epic Games (the creators of Fortnite). Think of it as one of the big industry standards for making games. With such a powerful tool.. wouldn't it be sort of cool to run a game directly from Chrome for example?
So can you?
The answer was... not exactly what I was looking for.
There are 3 interesting points I found about using Unreal in the Web
From what I can tell, while yes there is a way to have the program use HTML5 (which you can in theory use for making websites), the support of it has seemed to have died in the latest releases.
I've also found a plugin called "Unreal4Web" which can be used to import and showcase 3d models on your website... but without any real demos I can quickly find, I'll just have to take their word for it. It seemed to have been originally used to show models of cars for manufacture's websites but could be used for other industries as well
You could use something called Pixel Streaming to host your game on a server and use the browser as the input device to interact with it. This is excellent for so many reasons. As long as you have a great and stable internet connection, it makes it so you can play a game from any device, no matter how good said device is. But it's not exactly working on the browser natively, is it?
Nope, this wouldn't do. So you can't use Unreal directly like this to host it on the web.
Did you know this article was originally emails written for the Exceptional Frontend Newsletter? 👀 You can learn more about it here
But wait a minute... Tim mentioned you probably could use Web Assembly for that.
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 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 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 only run into in software engineering courses or college.
And guess what? Browsers have their 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 written in C++? 👀
One of the reasons why Figma is so fast, loads instantly, and creates such a good user experience is that 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 😂
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 of 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.
Here's the link if you want to check it out.
(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 frontend developer without Javascript after all?
After doing a deep dive into this really cool technology I've never known 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 that use cases for WASM are very limited (perfect for heavy computing and situations where native performance speed is a must, but not ideal for most other things).
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 article 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 game from my childhood as well)
Oh! And do let me know if I got something wrong about WASM in the comments below 👇
I'd love to learn more about the technology and having conversations around it will help with that.
Thank you!
I write articles like this for my newsletter "Exceptional Frontend"
Twice a week you'll get frontend-centered posts that that are fun and help you become a better developer.
This article was the combination of 2 emails I wrote last week and thought it to be interesting enough to create as an article.
90% of what I write isn't posted anywhere else, so if you don't want to miss out you can sign up here.
Top comments (2)
You don't want us to add all this to the Roadmap.sh FE roadmap do you :')
Maybe if it was an asterisk at the absolute end of the FE roadmap 😄
I do 100% support adding "playing games in the browser like Super Mario 64" as checkpoints throughout to motivate devs to keep learning haha