
Human-Centric Tools for Navigating Code [pdf] - azhenley
http://web.eecs.utk.edu/~azh/pubs/Henley2018bDissertation.pdf
======
azhenley
Author here. This is my dissertation that I completed back in July. I'm happy
to answer questions!

~~~
azhenley
To summarize the dissertation a bit:

Developers spend a lot of time and effort navigating code. I designed three
tools for code editors to help with this: (1) Patchworks for navigating among
your already opened code documents, (2) Yestercode for viewing previous
versions of a code document, and (3) Wandercode for exploring code based on
structural relationships. These tool designs were influenced by several
empirical studies that I collaborated on regarding _how_ developers seek
information in code.

For each tool I evaluated them with a lab study (two for Patchworks) to
measure their affect on things like task time, task success, cognitive load,
developers' opinions of the tool, and qualitative observations of how people
used them.

In the future I would really like to release them to the public as VS Code or
Atom plugins.

~~~
besulzbach
Thanks a lot for providing this summary.

------
schaefer
I really love this research work - especially patchworks.

I think there is a huge amount of progress to be made when contemplating code
from the "read and comprehend" use case rather than the edit use case.

Personally, I've taken to using command line syntax highlighters to render
code to svg images, which I then open in a vector graphics program and mark up
using a pen tablet (wacom). It reminds me of the days of printing out on a
line printer and marking up with red pen offline. I just love it.

------
nik61
I haven't got time to read all this dissertation on an interesting topic at
the moment, but I was surprised to find that the relevant work of the other
great "Donald" (Knuth) is not mentioned. He called it 'literate programming'.
Here's a reference: [https://www-cs-
faculty.stanford.edu/~knuth/lp.html](https://www-cs-
faculty.stanford.edu/~knuth/lp.html)

~~~
WalterGR
I’ve known literate programming only as a way to structure programs.

What code navigation features are part of literate programming and would be
appropriate for inclusion in this dissertation?

~~~
nik61
As DK puts it himself: "The main idea is to treat a program as a piece of
literature, addressed to human beings rather than to a computer." I think code
navigation would naturally fall out from this approach.

~~~
jjoonathan
On the contrary, literate programming is heavily used in notebook environments
(ipython, RMarkdown, Mathematica, etc) and in practice, code structured this
way seems to implode once it gets above a few kloc. Narratives just don't seem
to do a good job of hierarchy / modularization / separation of responsiblity,
which is the key to programming in the large.

~~~
zimpenfish
> literate programming is heavily used in notebook environments (ipython,
> RMarkdown, Mathematica, etc)

Do any of those actually implement Literate Programming as DK intended? As in
"you can move the code around to wherever makes most sense for your
narrative"? As best I know, almost all "literate programming" today is just
the intermingling of code and text blocks (e.g. Docco et al) in the same order
the code would have to be anyway (i.e. there's no TANGLE, only WEAVE.)

------
vanderZwan
Wow, for an IxD guy like me this certainly looks like it deserves a closer
look! From a quick skim it seems like it hits the right balance of "objective"
evaluation methods, and sensible discussion and interpretation of the results
in a human-centric design context. Looking forward to follow the author's line
of thinking in more detail later.

Is that code extension already available somewhere?

~~~
azhenley
Sadly, Patchworks is not currently available. I implemented two versions: A C#
standalone editor for Java and C# that is difficult to build at this point and
a version built into the proprietary LabVIEW code editor.

If anyone would like to help with a VS Code or Atom plugin, let me know :)

------
sudofail
Here's a really nice video of the Patchworks Editor:
[https://www.youtube.com/watch?v=GwcxDZT3pXE](https://www.youtube.com/watch?v=GwcxDZT3pXE)

~~~
j1elo
That looks very useful! All the more reason to keep evangelizing about an
80-chars maximum line lengths in code. It bothers me how these programmers
that use their 4K / 16:9 monitors with a full-screen tab seem to think that
_obviously, everybody must be working like they do, right?_

~~~
vanderZwan
I mainly love it because it encourages refactoring

------
anacleto
This is great stuff. I wish I have found this back when we started to develop
[https://type12.com](https://type12.com) editor for pair-program interviews.

------
dylanmclark
The patch grid and ribbon in the Patchworks Editor this proposes are exactly
what I didn’t know I needed

~~~
vanderZwan
I think I'm already emulating that to some degree by tiling multiple windows
on multiple desktops and switching between them. So yeah, might as well have
the editor support it from the start.

The Wandercode interface on the other hand I can't find a quick replacement
for. From a quick skim it seems like it hits a good balance of making
navigation easier without putting so much information on the that it becomes
noise. Really would like to try that out!

~~~
azhenley
Tiling and window managers are exactly what inspired Patchworks!

It is possible that Wandercode may be released to the public in the near
future. It is an Atom plugin in working state, it just needs some fixing up on
how it generates the call graph to make the recommendations. Stay tuned!

~~~
alanbernstein
I'm particularly interested in trying out Wandercode. What's a good way for me
to follow its development?

Wandercode looks very similar to an idea I had for navigation while working on
a task that was 100% code review and comprehension. I wanted similar graph
displays for inheritance, and data flow through variables. I envisioned all of
this displayed together in a large window, basically with multiple DAGs
overlaid on each other in different colors. Now, seeing Wandercode, I imagine
a handful of small, "localized" displays, focused on a selected
function/class/variable. Any thoughts on that? Or are function calls more
interesting for you?

