Posted
by
Soulskill
on Tuesday January 07, 2014 @11:05PM
from the building-upon-building-things-to-build-things dept.

New submitter amasad writes "This post describes building a JavaScript virtual machine and an in-browser stepping debugger using the latest JavaScript generator feature. It's called debug.js. 'For the past few years I’ve been working on creating tools to help people learn programming on the web. I’ve worked on repl.it and open sourced the underlying technology which powered a few learn to code websites and until recently lead product engineering at Codecademy. Through all that, one thing I really wanted to see are the tools to make it possible to visualize code execution and step through code in the browser. To catch glimpse of what an ideal interactive learning environment would be you should check out Learnable Programming by Bret Victor. In addition to the educational benefits of such a tool, if matured it could be also useful for code instrumentation, web IDEs, and creating a foundation for writing other VMs on top of JavaScript (having the pausable machine state let's you not worry about the non-blocking environment). Ever since I've read about the ES6 Generators proposal, I’ve been toying with this idea in my head but it wasn't a real possibility until Ben Newman's Regenerator brought generators to the browser.'"

Man I wish every web page had a font like those sites linked in the summary (well, all but http://debugjs.com/ [debugjs.com] which appears to be an invalid link). Maybe it's an attempt to lure in old fogies like myself, who can't see worth a shit. Alas, I know nothing about java, and couldn't care less.
But, nice font kid!

Snappy comeback. That AC will surely think twice before stating the obvious in the future!

Look, I'm sorry that your project isn't getting the attention or praise that you had hoped it would garner. It happens. Try not to let this depressingly empty thread discourage you. Just keep making new stuff and you're bound to hit on a project that gets a lot of attention.

JS is nice, but have you ever tried using something like FIG FORTH as a teaching tool? This is some very elegant and simple software with which very powerful things can be done. It certainly is a good intro to the topic of virtual machines, interpretation, binding, and different forms of optimization. An actual debugger is moderately irrelevant, you can interactively step through code. I've had very good luck with this tool.

Yeah, I can't really disagree with that. FORTH is perfectly usable, but its not widely employed. I can understand why JavaScript is attractive. Honestly though, I think JavaScript is a terrible language to learn with, and its sad that using something so complex prevents the student from understanding the tool.

I dont' know what it is about Javascript, but so many feel compelled to tell Slashdot about their latest programs. Is this new and interesting? No, plenty of languages are able to do the same thing (VMs and debuggers for C written in C, whoohoo!). Is Javascript so complicated that doing these features are a major news item?

Or is this just a replay of the Usenet days when people would post their newest program?

I think its like other posters have said, the attraction is that you need nothing more than a browser and a text editor to get started with it, and you can see some fairly flashy results quite quickly. You could get flashy results with something like say COLOR FORTH too, but you would have to acquire the software and its not as easy to find an abundance of documentation.

Yep! I taught my 10 year old niece x86 assembly first. Once she got the hang of some loops, character I.O., and some basic math I started her on FORTH. Immediately after grasping the power of higher level code over machine instructions she was hounding me about "But how does the code turn into the machine code?!" I helped her build a simple toy calculator language / interpretor / and compiler at age 11 then, and by 12 she had her very own FORTH implementation. Thankfully the knowledge took root before she noticed boys and geeking out with her uncle became uncool; Now she's 14 and knows enough to teach herself anything -- She uses JS/HTML5 and C to impress her friends with little games and such. FORTH is a good stepping stone. I prefer to start with the basics though. My nephew was a bit older when he got interested so we went the LISP route after ASM. Have you seen the complexity of some of the games they master? Kids can be so damn smart when you don't baby them.

I've also successfully used Java VM bytecode as a good intro to computing, but its stack centric design doesn't do justice to the underlying hardware. Android's Davlik's register architecture is similar to my own VM designs, and I find it a joy to manually op-code for, so perhaps I'll give a FORTH implementation on Android bytecode a shot as a teaching aid next time now that you can run Android on your desktop, and kids are very interested in mobiles. I've played around a bit with Go since it's a new-ish language and hasn't yet got the feature creep of C++, but in terms of teaching at the application / debugger level I still prefer C. Indirection (pointers) is such a powerful and fundamental concept it eclipses the references other languages have, and both C and ASM get right down to business. JavaScript is good as a case study in how not to design a language (it was never meant to be used the way we do, the clue is in its name). It's useful because it's available, not due to any merit of the language itself -- otherwise ASM.js wouldn't need to exist.

Most people wrongly think ill of ASM coding as a teaching tool. However, starting out in any higher level language doesn't even begin to dispel the mystical black box of computing like assembly code does. I self learned on BASIC and suffered from that brain damage far longer than I should have. I wouldn't start someone on JavaScript for the same reason.

I started her on FORTH. Immediately after grasping the power of higher level code over machine instructions she was hounding me about "But how does the code turn into the machine code?!" I helped her build a simple toy calculator language / interpretor / and compiler

At first I thought "Cool story, bro..." and then I saw...

I've also successfully used Java VM bytecode as a good intro to computing, but its stack centric design doesn't do justice to the underlying hardware

So then I was all like "Not familiar with FORTH, are you?"

But I kept on going and then I read...

I self learned on BASIC and suffered from that brain damage far longer than I should have. I wouldn't start someone on JavaScript for the same reason.

And now I know that you're just laughably incompetent. So I'm back to my first thought...

Indeed, learning assembly language is a real good start. I got my first real understanding of computers by learning PACE machine code. My uncle gave me an S-100 based typesetting workstation he scavenged parts for. I learned by reading the PACE manual (helpfully supplied) and learning about how a computer bootstraps, how the disk drive worked, and most important how the CPU actually works at a low level. I never did get that machine to do a whole lot, but 6 months of wrestling with machine language will rea

It looks like a skeleton project. I can't get it to do anything, and looking through the code it all looks like skeleton and boiler plate code.

Presumably the guy will use generators to support break points. The problem here is that generators don't allow yielding across function invocations. That is, in A -> B -> C, C cannot yield directly to A; only B can yield to A. To get C to yield to A you need to add a trampoline in-between, to bubble the yield up. Generators are a half measure in 2014--ideally

I already did exactly what you said:) read the full article and look at the source code. I insert a yield before every statement and have a machine that controls the call stack. Also the debugger is feature complete;)