Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

Sorry, you do not have permission to ask a question, You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please type your username.

Please type your E-Mail.

Please choose an appropriate title for the post.

Please choose the appropriate section so your post can be easily searched.

Please choose suitable Keywords Ex: post, video.

Browse

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Logo Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Logo

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Navigation

  • Home
  • About Us
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • About Us
  • Contact Us
Home/ Questions/Q 2972

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Author
Asked: November 26, 20242024-11-26T10:24:08+00:00 2024-11-26T10:24:08+00:00

You can be a Frontend Dev without Javascript (and play Super Mario 64 from the browser)

  • 61k

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

  1. 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.

  2. 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

  3. 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 😂

​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 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.

frontendlearningwebassemblywebdev
  • 0 0 Answers
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

Sidebar

Ask A Question

Stats

  • Questions 4k
  • Answers 0
  • Best Answers 0
  • Users 1k
  • Popular
  • Answers
  • Author

    How to ensure that all the routes on my Symfony ...

    • 0 Answers
  • Author

    Insights into Forms in Flask

    • 0 Answers
  • Author

    Kick Start Your Next Project With Holo Theme

    • 0 Answers

Top Members

Samantha Carter

Samantha Carter

  • 0 Questions
  • 20 Points
Begginer
Ella Lewis

Ella Lewis

  • 0 Questions
  • 20 Points
Begginer
Isaac Anderson

Isaac Anderson

  • 0 Questions
  • 20 Points
Begginer

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help

Footer

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise

Querify Question Shop: Explore, ask, and connect. Join our vibrant Q&A community today!

About Us

  • About Us
  • Contact Us
  • All Users

Legal Stuff

  • Terms of Use
  • Privacy Policy
  • Cookie Policy

Help

  • Knowledge Base
  • Support

Follow

© 2022 Querify Question. All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.