Web Applications in 6502 Assembly!

MOS 6502 was an immense step in affordable computing. Thanks to this little fellow, we got introduced to Commodore64, Apple II,
Atari2600 and NES. Still to this day, people play around with 6502 Assembly, creating software and games for these forgotten platforms.

Now, let me introduce myself - I'm Cassiopeia (however, I use Oliwia in formal settings), a transgender woman with a love for old technology and assembly programming. I've been a JavaScript developer for over six years. Most of the time I worked with typical web technologies such as Vue, React and Angular. Even though most of my experience comes from front-end development, most of the fun I get from programming comes from back-end development. And about a year ago, I grew amazed with old technology, and that's where 6502 comes in.

6502 has only(!) 56 instructions, but even with such a limited amount of instructions, developers (as always) could create impressive programs.
Have you ever thought about what it would be like to write your web applications using 6502?

No?

Of course not, why would you think that?!

But I...! I thought about that! I thought about how would it be to assemble your 6502 program, upload it and have it generate a website!

6502Web

Welcome, to 6502Web, a 6502 runtime written in JavaScript, that makes it possible to create (simple) websites and web applications using 6502 assembly!

I wanted to keep my runtime as simple as possible and as javascript-less as possible, especially since it's my first time writing something like that.

First off, get your 6502 program assembled, for testing I mostly use masswerk assembler since it's the fastest for me.

Let's start with something simple, try to assemble a program like this:

LDA #0
STA $46
STA $0
LDA #3
STA $46
LDA #72
STA $47
LDA #73
STA $48
LDA #33
STA $49
STA $1

Now that you have your .bin file downloaded, link 6502web cdn to your web app.

Then, you can load your binary file and run it like so:

<script>
LOAD_6502("file.bin").then(res => res.run({ log: true, sharedMemory: [] }));
</script>

Open your website (remember to start a web server, 6502web runtime uses fetch to load the binary file, and we need a web server running for that :3)

And... WHAT'S THAT?!

If you open devtools, you can see that somehow, a

element has appeared with "HI!" as its content.. But how?! Let's look at the 6502 code again, now with comments!

LDA #0   ; 0 is the ID of a <p> element in 6502web runtime, lets load it
STA $46  ; store it to $46, which is start of our RAM memory
STA $0
; by storing to $0, we RUN a built-in function which is responsible for creating an HTML element, that uses $46 as its argument (what HTML element to create!)

LDA #3   ; 3 will now be the length of the string we want to put in our <p>!
STA $46  ; store it at $46
LDA #72  ; 'H' in ASCII!
STA $47  ; store it at $47
LDA #73  ; 'I' in ASCII!
STA $48  ; store it at $48
LDA #33  ; '!' in ASCII!
STA $49  ; store it at $49
STA $1

; storing to $1 runs another built-in function, that is responsible for setting up text content of a *recently* created HTML element. Its first argument is length of the string it has to read, and then it reads memory fields (ASCII characters) after that, corresponding to the length we stored at $46

So.. This is basically how the 6502web runtime works. For now there's just a small numbers of features implemented:

• Creating HTML elements,
• Setting text content of HTML elements
• Adding event listeners
• Binding X and Y registers to HTML elements
• Shared memory between 6502 and JS

With this small amount of features I was able to create a very simple counter app!

I believe that's enough for now, if you are interested, come and see for yourself, just be aware that this runtime is mostly a joke (a joke I put a lot effort into)

I'm still working on it, so MANY opcodes are yet to be implemented.

GitHub

Have a good day everyone!