Visualizing Code to Fail Faster

blog
1

In What You Can't See You Can't Get I mentioned in passing how frustrated I was that the state of the art in code editors and IDE has advanced so little since 2003. A number of commenters pointed out the amazing Bret Victor talk Inventing on Principle. I hadn't seen this, but thanks for mentioning it, because I definitely should have. Maybe you haven't seen it either?

This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2012/03/visualizing-code-to-fail-faster.html
2

I watched Bret’s talk when it was mentioned in the comments of your last article. It was truly inspiring.

Of course, this isn’t a new idea. His demos are just particularly well done. In 3d programming it’s common to find examples with built-in control panels and sliders so that a game designer can actually fine tune parameters and see the results in real-time.

The ability to instantly view your results is awesome. It’s something I’ve done a few times now in some of my own tools. I built regexhero.net so that everything happens in real-time to drastically speed up the process of writing regular expressions. Regex Hero certainly wasn’t the first to do this. There are several regex testers that at least have the instant highlighting capability.

I also built 060calculator.com to work without a “calculate” button. I realized adding a button to the UI is completely unnecessary when it’s so inexpensive to perform the calculation on the fly. It’s a simple idea but many of the tools we use everyday are still lacking.

3

I’m a high school physics teacher who teaches my students to build simulations of physical situations in Python using the VPython module that allows them to create fully visual simulations of a soccer ball flying through the air with a drag force for instance, with a tiny amount of code. When I saw this video, I instantly thought it would be tremendously helpful for students who are getting started in computer science, and really wish that we could make a simple IDE for beginning students with this functionality.

4

VB.Net still has the old background compiler, so you still get notified about errors as you type. It’s one of the reasons why I still like working in VB.Net over C#. VB.Net isn’t a popular as C#, but it has almost all the same functionality, and personally, the background compiler makes it a joy to work in. I don’t know why MS hasn’t implemented similar functionality in C# yet.

5

“But I can’t shake the feeling that we could we fail even faster if we optimized our…”

That sums up the real question of so many challenges that people are facing today. How can we fail faster, and better? Not just in programming, but in life in general. We really need to embrace this idea of failure more, it is such an important concept of life. It is not something to be shunned or ignored, but recognized and cherished for what it produces.

7

clang_complete for VIM provides excellent real-time compile checking and clang also has a wonderful static analyzer. It’s a godsend for C, C++, and Objective-C development.

8

I too was amazed by that video. But then I started thinking… (I’m sure I’m just not smart enough but…)

How would the techniques shown in the video work in the real world? Showing a sort of a 5 integers is easy. How about showing the visualization of

sortTriangles(
const array points,
const array triangle_indices,
array out_sorted_triangle_indices) {
}

How would the system even have a clue that every 3 values in indices references 3 points and that those points are triangles and need to be graphed?

I think if you try to apply similar ideas to your own code you’ll soon see very few functions lend themselves to easy visualization.

Now maybe this is like TDD and somehow if we had visualization we’d design our code better to be visualize-able. Or maybe it’s just not has easy as he made it look.

To pick more nits. The graphic editing in the video. I know of almost no art made like that. In fact art programs have existed that were more algorithmic like Intellidraw (mid 90s) that failed miserably. Artists don’t want to code, they want Illustrator. The number of people that want to code up dynamic images is arguably pretty small.

But, even assuming there was a place for that visualization so many things were glossed over. As someone who’s had to provide sliders for artists, to even display a slider generally requires meta data about the range of the slider. Should it go from 0.0 to 1.0 in 0.01 increments? Or maybe it needs to go from 1000 to 100000? If I let it go to 0 will I get a divide by zero error in my code? Will a negative number break my code? If one slider is “number of leaves per branch” and another is “number of branches” and the users slides the first to 10000 and the second also to 10000 one of 2 things will likely happen. Either the system will run out of memory OR the system will go so slow that trying it set them back to reasonable values will take minutes.

Of course maybe some super smart guy will figure out the generic solutions for these types of problems. On the other hand, maybe it’s really not as easy a problem as it was made to look.

9

I’m working on a fork of a great project by gabriel florit called water:
http://enjalot.com/tributary/2165875/sinwaves.js

his original is here:
http://gabrielflor.it/water

It only addresses one sliver of the concepts that Bret talks about, but it’s a start towards making those discoveries sharable.

10

Inspiring.

In the linked article, the last section is about perspective: it could be interesting that, in physics, the very same concepts is called “phase state”, a n-dimensional space where each point represent a particular state of the system (http://en.wikipedia.org/wiki/Phase_space), where n is the number of variables involved in the system.

Once you have mapped your system in this space, you can also use math tools to analyze the state transitions, mapping state transitions as vectors between two points of the phase space, and identify “clusters”, group of related states that are “near”. You can also analyize the “entropy” of your system, i.e. find “stable” and “unstable” states.

Very, very interesting stuff.

11

In some ways we’ve actually regressed from my ancient Visual Basic 6.0 days, when you’d get dynamically notified about errors as you typed

Eclipse compiles in the background & shows errors as you type - when I use Visual Studio for a project, this is the feature I miss the most!

12

HN comments: http://news.ycombinator.com/item?id=3773626

13

Resharper (visual studio plug-in) shows errors as you type…every other ide does too btw. Visual Studio is embarassing compared to other IDEs quite honestly.

14

Thanks for the light.

Visualisation is so useful and can be particularly helpful when built into frameworks or generic transaction processors.

The trick is to build them, so that they know when to get out of the way.

Mike

15

Cool demos, sure. Very nice tech. Now, did anyone notice the point of the talk?

16

My two favorites are the Delphi IDE and NetBeans. I feel sorry for the design team at work as they are stuck in Dreamweaver.

17

IDEs for gaming industry have this problem for years. We program art. I suggest Unity3D (www.unity3d.com), because they have exactly this kind of realtime programming solution.

18

The problem is that most of your projects are going to be an original creation, so that no simulator for it will exist. The only way to get one would be to make it… except that would take exponentially longer than just dealing with the problem. It only becomes feasible if you are going to repeat a very similar simulation many times.

19

Jeffrey, that’s what I was thinking as well. You’ll notice that the real-time simulation for each of Bret’s demos are different and highly optimized for the task at hand. It’d be difficult to create a general-purpose IDE with all of this built-in. Maybe a good starting point would be a series of pre-configured simulators with certain behaviors which you can use to test your code.

20

I had this idea the other day, maybe someone else has to. I thought, if we have such great source control providers such as Git/Hg, why can’t an IDE be a time travel device?

Don’t you think we spend a lot of effort trying to understand a codebase? Someone new on a team. A contributor to a big OSS project. Anything involving a piece of code. How was it built? What came first? What came later?

I thought, if someone made an IDE that tracked everything that happened or took “snapshots” and coupled that with a VCS, you could literally time travel through your codebase. Fast forward, play, rewind, scrub, whatever. Someone new to the project? They’ll play it from the beginning, seeing what classes you made, how you structured everything.

Furthermore, I remember seeing a proof of concept where you coded by linking off of existing snippets, like bubbles. It was some IDE concept, it was pretty neat. If you tied something like that to this time travel concept, you’d be able to semantically see links between code (which means you can visualize it).

I don’t think it would be incredibly difficult to do this as a standalone app built on top of a VCS. Point it at a repository which has all its history, and you can “watch” it with a playback interface. Of course, it depends on how frequent the commits and whatever, which is why an IDE or something would be way better.

I think there are many things we could be doing to our IDEs that would make them more like interactive, social applications. Someone else working on the same file you are? See what they’re doing next to you in the editor, chat with them. See where your team is in the codebase, what branch, what they’re doing, etc.

It seems like IDEs go out of their way to discourage communication; instead we’re forced to communicate via email, IM, or TFS work items, outside the codebase unless we comment which different people do differently. Why shouldn’t a “codebase” be where all that happens, with annotations, discussions, and a social context?

Overall, I think there needs to be a radical change in how we think about coding… but maybe I’m just insane. What would an IDE look like if there were no “files”? We’ve been thinking in files for a long, long time; maybe that’s not the best way to write or think about a program. Sure, the output can be files (for the web, distribution, etc)… but maybe that’s not how you write it.

21

I thought, if someone made an IDE that tracked everything that happened or took “snapshots” and coupled that with a VCS, you could literally time travel through your codebase.

Indeed, I believe that is what http://www.storytellersoftware.com/ is attempting to do?