I’ve spent a lot of time talking about how to actually make it work, but the internals could be perfect and the project would be worthless without a viable way to visualize the information. In Bret and I’s original prototypes, everything is simply dumped to text next to the code. However, certain elements (such as loops) do not fit in a single line in this manner. As a result, they do not scale to some real scenarios, such as loops with iterations in the thousands.
As I’ve stated before, the primary goal is to end up with a plugin for Visual Studio and MonoDevelop that provides the Instant functionality. With that in mind, we need to start exploring what this might look like inside of an IDE. Even discounting the existing limitations, I didn’t feel that a fixed box of text next to an ever shifting block of code would really fit well inside the existing IDE experience. My jumping off point for a new visualization came easily, as both IDEs already support a feature that pins values of variables in the code window, but only while debugging:
So, with that in mind, I started to retrofit the prototype with a similar system. However, my favorite screen recording tool (Jing) wasn’t working on Windows 8 – a perfect excuse to procrastinate. Once I noticed Jing was updated finally for Windows 8, I started to work on polishing up the prototype to blog about. In that process, I noticed there’s a Visual Studio template for editor extensions. I’d been putting even looking at a plugin until the last minute because learning an IDE’s API would distract me from core problems I’d still not solved. But, now noticing the template, I finally said “how hard could it be?”
[kml_flashembed publishmethod="dynamic" fversion="8.0.0" movie="http://ermau.com/wp-content/uploads/2012/06/instant_vs12.swf" width="855" height="573" targetclass="flashmovie"]
Not as hard as I thought. As you can see, variable state changes display similar to “pin to source”. Furthermore, you can page through iterations of loops, showing you the state of variables in each iteration when they’re changed. You might also notice that the iteration seems to stop arbitrarily the first couple times I change it, this is due to some behavior attempting to prevent infinite loops (which I’ll get into in a future article).
The Good and the Bad
Now, getting back to the visualization, I consider the advantages over the static side-by-side text display to be that it:
- Scales to real code.
- Provides a familiar (from debugging) HUD-like view to what’s going on, instead of a separate window to mentally line up.
- Provides a lot of capabilities in expansion of the visualization.
There are, however, a number of issues I’d like to address with this. Firstly, the method of entering the “test code” is not ideal in the slightest for two primary reasons:
- A separate dialog adds a lot of friction to getting started.
- The test code is not adjustable.
The reason this prototype has a separate window for example entry instead of an inline box was simply that I couldn’t get VS to cooperate. As I learn more about the SDK, hopefully I’ll be able to overcome this. Once in an inline form, number 2 should cease to be an issue as well.
The second issue is that you lose a significant advantage as compared to the text display: the ability to look at two iterations side-by-side. Now, I cited this as one of the problems of the text display, but there’s no reason why we can’t do a constrained view. I’m imagining an expanding tip for variables inside of loops where you can display X number of iterations before and after the current iteration being viewed. So this is something we can relatively easily improve upon.
A third issue is that the return value is not displayed, which to be honest is simply because there’s two bugs related to it that I have not found time to fix just yet, but it’s important and will be there.
I mentioned one feature I’d like to add before, but there are so many more. For example, I’d like to add a display for conditionals that displays both what is being evaluated and the evaluations, something like:
[(2 < 5 || false) | (true || false) | true] if (x < 5 || isFoo)
There’s some other simple ones like showing values passed to other methods, and there’s ones I haven’t thought about much yet (but I know will be hard) like different threads. There’s lots that can be done to simply give the developer more clarity about what they’re writing is actually doing.. instantly.
What other kinds of information would you like to see while you’re coding?
Update: The source is now available.