Myles Skinner's Development Portfolio: 650Vue

A 6502 Emulator (okay, Simulator) in Javascript

I currently work with Info-Tech Research Group, where we primarily use Ruby on Rails for application development. Some time ago, Vue.js emerged as our preferred front-end framework, edging out both Angular and React in a lengthy evaluation process. I think Vue.js was absolutely the right choice to pair with Rails at the time, although Hotwire, Turbo, and Stimulus, have completed changed the way we think about pairing Javascript and Rails. Either way, it is fair to say that I have never been a Javascript guy. In fact, I've always viewed Javascript with a bit of suspicion. After all, I was online before Javascript even existed, and I lived through many of its early teething pains.

I figured that if we were going to use this framework, I should have at least a passing acquaintance with it. Armed with such knowledge, I could at least make semi-intelligent comments on peer reviews, even if I never ended up writing a line of Javascript myself. But you can't really learn about a thing without developing at least some level of interest in it, and it wasn't long before I was doing a lot of reading and watching tutorial videos. None of this media was really sinking in; as it turns out, I don't really learn a language or framework until I start writing actual code. I started playing around with simple Vue components to deepen my understanding.

What happened next was unexpected and strange but not atypical of my creative process. A pattern emerged from my early Vue experiments, and before long my experimentation came into focus. I wasn't just goofing around anymore; I had a direction. I was building a single-page application, which evolved into 650Vue, a simulated 6502-based computer built in Vue and capable of running non-trivial software on a virtual machine in the browser.

This development journal documents the process of creating 650Vue, and is divided into several sections:

• Part 1 – Origin Story: How the heck did we get here?
• Part 2 – The 6502: The brains of the outfit.
• Part 3 – KIM-1: Architecture and Modelling.
• Part 4 – A Passion for Design: Finding a look that invokes the time period.
• Part 5 – Registers, Memory, and Vuex: Keeping track of machine state.
• Part 6 – Segmented Registral Displays: Rendering the CPU registers in the browser.
• Part 7 – Status Register Bit Displays: A row of lights to display processor status flags.
• Part 8 – Running the Machine: Rudimentary control logic.
• Part 9 – Machine-Language Monitor: Communicating with 650Vue through a terminal and Vuepermon.