Forgot your password?
typodupeerror
GUI Java Programming User Journal

Code Bubbles — Rethinking the IDE's User Interface 198

Posted by timothy
from the don't-get-distracted-now dept.
kang327 writes "As Java developers we are used to the familiar file-based user interface that is used by all of the major IDEs. A team at Brown University has developed an IDE for Java called Code Bubbles that makes a fairly radical departure from current IDEs — it is based on fragments instead of files. The idea is that you can see many different pieces of code at once. Fragments can form groups, have automatic layout assistance, wrap long lines based on syntax, and exist in a virtual workspace that you can pan. A video shows reading and editing code, opening different kinds of info such as Javadocs, bug reports and notes, annotating and sharing workspaces, and debugging with bubbles. They report on several user studies that show the system increases performance for the tasks studied, and also that professional developers were enthusiastic about using it. There is also a Beta that you can sign up for."
This discussion has been archived. No new comments can be posted.

Code Bubbles — Rethinking the IDE's User Interface

Comments Filter:
  • by Anonymous Coward on Wednesday March 10, 2010 @02:57PM (#31429294)

    Welcome to the 1970s. Squeak [squeak.org] is one of the better implementations these days.

  • Deja vu (Score:2, Insightful)

    by ascari (1400977) on Wednesday March 10, 2010 @02:57PM (#31429300)
    It looks like those (incredibly crappy) multi window IDEs of ten years ago. The name is cute though.
  • by coolsnowmen (695297) on Wednesday March 10, 2010 @03:03PM (#31429350)

    I'm going to need a bigger screen.

  • Oh goodie (Score:4, Insightful)

    by aztektum (170569) on Wednesday March 10, 2010 @03:09PM (#31429422)

    More UI elements to click-n-drag

    As if having a couple dozen windows open and trying to organize them wasn't fun enough.

  • by Anonymous Coward on Wednesday March 10, 2010 @03:11PM (#31429450)

    Initially, the idea of "code bubbles" sounds intuitive -- isolated, self-contained, easily testable pieces of code, with well-defined inputs and outputs. Then you could build a complex program by stringing these bubbles together (in theory, anyway).

    Perhaps we could call such a pieces of code "functions" instead.

  • by ottothecow (600101) <ottothecow@gma[ ]com ['il.' in gap]> on Wednesday March 10, 2010 @03:12PM (#31429476) Homepage
    I like the idea at least as I understand it from the summary.

    Might just be more handy as a display mode than an entire paradigm but I can see how it would be nice if you could display functions together from different files.

    If you are working on one function that is in file3.c that has to interact with functions in file7.c and file3.c, why not be able to display them all as if they are in the same file (when they will eventually get compiled together anyways). The code already exists in most IDEs to collapse functions, so why not extend that to being able to mash up all the collapsed functions from every file. Then you can display the ones you want to see as if they were all in the same file.

    Keeping stuff in separate files and including them is a good organization technique and helps with multiple people working on a project (and you can substitute different files for different platforms, etc.) but I can see where this would be useful if instead of flipping between 5 open files, the IDE could display just the portions you need. Bonus points if the IDE can do this automatically in a semi intelligent manner--like show the collapsed version of functions that might be relevant based on some criteria and then allow you to expand them if you like.

  • by l3v1 (787564) on Wednesday March 10, 2010 @03:17PM (#31429530)
    isolated, self-contained, easily testable pieces of code

    And I'd add small and short to that list. There's no way this bubble concept would be useable with code fragments longer than a few lines, and even those need to be short since wrapping would destroy the usability of the whole thing. Also, in the sample video, when they had to scroll the screen because of the many bubbles, well, there it became a lost cause for me. Realistically, from code dealing with more than helloworlds that I've seen and written, this thing would be a real dealbreaker. I can't think how so much fragmentation can help you in the long run. Having self-contained small pieces of code that do one thing - that is useful -, I'd say those are hard to find. Managing tens of thousands of lines of code this way, I'd go crazy very quickly.
  • by Galestar (1473827) on Wednesday March 10, 2010 @03:22PM (#31429590)

    Then TFS mentions something as banal as "wrapping long lines of code"....and my bubble bursts.

    What's wrong with that? Manually wrapping long lines of code is only done to prevent having to scroll horizontally while reading the code. These days, the number of characters that can fit in the code window can differ significantly between devs. I use a 28" widescreen at 1900x1200 - I can fit a hell of a lot more characters in my code window than can a dev with 19" non-wide with w/e low resolution he decides to use. With manual wrapping, if I write the code, he has to scroll. If he writes the code, I do not get to take advantage of my added screen real-estate. As long as the automatic wrapping has a half-decent indentation style, I would love to see this in any IDE.

  • by Chemisor (97276) on Wednesday March 10, 2010 @03:30PM (#31429698)

    Any UI design that forces me to use the mouse is automatically a failure. Any method of information display that uses only a small fraction of the available display space to display tiny windows and forces me to resize them or scroll them is also automatically a failure. A method that combines both, must then be a gigantic failure.

  • by phantomfive (622387) on Wednesday March 10, 2010 @03:33PM (#31429746) Journal
    It is a good start of an idea. The problem with coding is that the logical structure isn't really related to the visual structure of code on a page. Logically, with code, you have a bunch of bubbles with lines connecting them together in various ways. You can't really see this structure visually, if you want to see how things are linked together you have to read the code and figure out what calls what (or use one of the various search mechanisms, but that still boils down to reading). So the idea of being able to see the links between different parts of your code is a good one. A good portion of my comments are dedicated to helping future programmers understand the overall structure of my code, so being able to visualize it will make that much easier.

    You can always automatically generate a UML map, but the problem is a UML map doesn't show which links are more important, and which groupings of code are most important. This is something you have to use comments for. If this tool could somehow do that, and could be saved in a format that could be shared with other programmers, it would be very useful. Otherwise it is not too much more efficient than the techniques I've developed for dealing with regular text files.

    A similar situation is this: when I first learned to use emacs, I thought auto-indent was the most amazing thing ever. It solved one of the major problems of my coding life, indentation (obviously I was not a very experienced programmer at the time). Emacs made it easy to re-indent a section if I forgot the brace on my 'for' loop. When I read a review by a guy who didn't like emacs for totally different reasons, I couldn't understand why he was ignoring the obvious greatnesses of auto-indent. Now I realize that actually he had developed technique for dealing with indentation, so it really wasn't a problem to him like it was to me. That is how new tools often are.
  • by roman_mir (125474) on Wednesday March 10, 2010 @03:35PM (#31429770) Homepage Journal

    opening methods side by side? I just wish I had 200" wide screen, or maybe I don't. 'Bubbles do not overlap but push each other out of the way' - they expand. Have you seen what a map like that looks like? How about 5meters x 5 meters of space that you would need to debug a business or a system level problem? Oh yeah, you just 'pan over'. So how the hell is that different from opening separate files? I know how, opened files are obvious but something you need to move around virtual screen is not immediately obvious. Where was that file that was open? Oh yeah, 35" up and 23" left. But of-course, you can zoom the screen in and out, all you have to do is remember what all those minuscule pictures have in them there and then 'you can continue working'. You have 'miniature maps' of the entire workspace. God, how many times I had to work with tools that did this, it was never any help. The 'miniature map' is a terrible idea for text boxes, it's not apparent, like a file list, what's in any of those text boxes.

    Bubbles expand as you type into them and push other bubbles out of the way. Sounds wonderful, the entire screen is jumping around as you type.

    The developer's screen in the video looks like a mess and a mess at very high resolution. Minority report interface style mess.

    Code 'group information is persisted automatically'. Some XML meta files are created. When working in a team, do you check these into source control? What happens when files that used to be in your 'bubble' are changed/renamed/removed by other coders in the project?

    Tasks are grouped by date? Revisiting sets of bubbles by their dates, hmmm. Doesn't sound right. Will you remember to revisit some bubble set a week from now? How many bubble sets will you create in that time? Will you remember all these bubbles?

    It's a nightmare, colorful, messy, visually heavy nightmare. This will probably sell well as a 'new coding paradigm' to CTOs and such.

    I liked two features: 1. searching for path between functions. They promise to find the shortest path (hope they don't have to find the shortest path between functions for some projects I had to witness) and display alternative paths as well. 2. having output from 2 separate debug sessions opened at the same time. I would give that a try but most likely this will not cause any real improvement, I already manage to work without that by remembering the previous debug output or sometimes, when it's too big copying it into a file.

    Looks like a solution in search for a problem that has maybe one feature that is worth looking into. Good work.

  • by MagikSlinger (259969) on Wednesday March 10, 2010 @03:42PM (#31429878) Homepage Journal
    Speak for yourself. Some of us like the mouse and window for code editing.
  • by sirius_bbr (562544) on Wednesday March 10, 2010 @03:44PM (#31429924)

    I think this kind of IDE would be very usefull during code-maintenance, especially when the code you maintain is written by you (which is often the case).

    When developing new code, the bubble-concept could be too confusing, because it seems to hide the overall structure of the code.
    But during maintenance, when hunting bugs, I often don't want to see the whole picture (and hence the whole complexity), but am much more interested in smaller sections of a program, and the relations between them. The bubble concept would really help.

  • by stoanhart (876182) on Wednesday March 10, 2010 @03:54PM (#31430034)
    What a closed-minded and overly general statement!

    I certainly agree that often a keyboard-only approach and minimal screen "wastage" is great - I am an emacs fan after all. However, there are always exceptions and if we don't explore new ideas we won't find better ways of doing things. How can you call it an automatic giant failure when you haven't even tried it yet.

    Your complaint about not using all available screen space for what you want to see doesn't even make sense in this context! Why would you want a single bubble/code fragment to take up the entire screen? That's contrary to the point! The idea here is to be able to quickly trace a complex program by seeing only the code that represents the function being called at any point, rather than the whole irrelevant file. And while there should surely be a keyboard method to navigate the bubbles (arrow keys would work marvelously here), a mouse is an excellent way to navigate a large 2D surface.
  • by hey! (33014) on Wednesday March 10, 2010 @04:38PM (#31430604) Homepage Journal

    From the operating system's standpoint, a file is the atomic unit of document management.

    From a computer language standpoint, a file is an atomic unit of parsing.

    From a programming standpoint, both these concepts have utility, but neither is particularly fundamental.

    That's one of the things that makes literate programming possible.

    That said, I'm not exactly thrilled by the bubble concept. It's one more place to store vague ideas and associations that will be incomprehensible a few weeks later. It's not bad like the attempts at "graphical programming" languages twenty years ago or so, but I don't see that its really better than code folding, or even as good. What a programmer has to do is to express himself clearly. Anything which helps that is good. Anything that doesn't is meh.

    Also, I can't see using the system shown on a laptop. It might be usable on a 24" monitor, but not a 15".

  • by Coryoth (254751) on Wednesday March 10, 2010 @05:48PM (#31431482) Homepage Journal

    It's all about the context switches. When you're typing along productively, then have to stop to get the mouse, find the pointer on the screen, get it to where you want it, perform whatever action, then pop back to the keyboard to continue, you've had to bounce your attention across several distinct actions. That just isn't productive.

    I think that really depends on what sort of coding you're doing. Now I have no idea what your work is like, but I find that the amount of time I spend continuously pounding out code on the keyboard is pretty limited -- I spend far more time reading code then writing, and far more time thinking than reading -- so context switches are pretty cheap, especially when you can grab the mouse and move it to where you need while reading or thinking. But as I say, that's one type of coding; I have seen code that has people just pound away at the keyboard without having to stop and read or think about what they're writing. That may well be your situation. It is not the case for everyone.

  • by Unoti (731964) on Wednesday March 10, 2010 @08:13PM (#31432922) Journal
    You're right. But 1920x1080, with 2 or 3 monitors isn't unreasonably expensive to get. And it's getting cheaper with each passing month. I've got my main monitor at 1980x1080, plus 2 monitors on the sides of that slightly smaller. It's cost effective and reasonable to get multiple monitors. It's harder to use the screen real estate effectively than it is to get the real estate.
  • by Haeleth (414428) on Wednesday March 10, 2010 @08:14PM (#31432930) Journal

    In most programming languages this unit of code containing multiple classes is called a "file". I suppose it might be useful to have a Java preprocessor stage that was able to split up a multi-class file before feeding it to the compiler, to get round the strange "one class per file" limitation that Java's designers have seen fit to lumber us with, but I don't quite see why we'd need a whole new IDE and new terminology for something so simple.

No hardware designer should be allowed to produce any piece of hardware until three software guys have signed off for it. -- Andy Tanenbaum

Working...