Code Bubbles — Rethinking the IDE's User Interface
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."
Welcome to the 1970s. Squeak is one of the better implementations these days.
It looks like those (incredibly crappy) multi window IDEs of ten years ago. The name is cute though.
Then TFS mentions something as banal as "wrapping long lines of code"....and my bubble bursts.
An old-timer with old-timey ideas.
I'm going to need a bigger screen.
It looks like the Smalltalk GUI to me.
I think this would be a cool tool for evaluating how an application is executed, as well as visualizing call sites and application traversal.
But I think it would be a major pain in the ass for most development purposes.
Mod me down, my New Earth Global Warmingist friends!
Small pieces that do one thing, but that thing well, they interact with other pieces in a standardized way... I know I have seen this before. Let me awk my brain. I am greppping through my memory.
sed -e 's/Chuck Norris/Rajnikant/g' joke > fact
More UI elements to click-n-drag
As if having a couple dozen windows open and trying to organize them wasn't fun enough.
No sig for you!!
The demo made this look pretty nice for tracing functionality through multiple classes/method calls. It annoys me that most IDEs make it harder to view code side by side than Emacs did 15 years ago. That said, it appears that you either need a really huge monitor, or be comfortable reading really small text, for this system to work they way they demonstrate.
I've recently been using Mylyn to give me a focussed view on the code I'm working on. I love the way it automatically adds things to the context as I click around.
Then of course there's the rather gorgeous "Run unit tests in context" to give me feedback on the things I've been tinkering with.
Developers spend significant time reading and navigating code fragments spread across multiple locations. The file-based nature of contemporary IDEs makes it prohibitively difficult to create and maintain a simultaneous view of such fragments. We propose a novel user interface metaphor for code understanding and maintanence based on collections of lightweight, editable fragments called bubbles, which form concurrently visible working sets.
I agree with Developers spending time reading and navigating code fragments but isn't that part of the job ? I think its called debugging ,locating problem, identifying it in the code and fixing it, if it takes navigating or standing on his head he will do it.
-- It is the mark of an educated mind to be able to entertain a thought without accepting it. -- Aristotle
Well, it'd give me a business case for a few of those huge 2560x1600 monitors I've been hankering for. More seriously, F3 and ctrl-shift-G are very commonly hammered buttons in my usage of Eclipse, so maintaining context as you flow through might well aid productivity.
This looks nice as a way of exploring, debugging, and documenting code especially. I like how you can save layouts by date. But I feel like I would want to step back into eclipse to do the writing. I would be nice if they made a way to integrate with other IDEs.
meep
I think it's brilliant. I don't care if somebody did it somewhere else before and deserves all the credit--that's beside the point. I would definitely like to use an IDE like this.
It would probably encourage more refactoring and smaller function sizes. The windowed IDE puts a bias on keeping code all together in one place, because of the small-but-present difficulty in switching to other files.
Thank you for the ho hum rip off of a poorly written story about Eddie Murphy killing a hooker...
and my hopes have been fulfilled.
M-C-x fuck-up-my-screen
It must have been something you assimilated. . . .
I know I know, but I cant help but laugh at the person video explaining code bubbles....Its just ssssooo sssuper fantastic! I like the idea tho. Its very interesting.. Though I have no plans on learning a new IDE.
you know you can fry stuff putting things into things that dont like the things you put into it...
I do mostly maintenance programming (by choice .. I'm good at fixing code I know nothing about, I like it, it keeps from from being pigeonholed, and there is a lot less competition). So I spend a lot of time hopping around code I know nothing about. I also spend a lot of time 'going backwards' through programs, since sometimes all I have is an error message and it's easier than trying to start at Main. This type of interface would be very beneficial in my type of work.
.. what would happen to those bubbles if some braces got out of alignment. You would have to have pure code scrolling to be able to fix something like that.
Even writing code from scratch, I rarely program 'top down', but group methods in the file based on some vague grouping concept, like all setters/getters together, methods that are called somewhere around methods that are calling them. It's really not necessary for me to 'know' where in the file they are, as long as I can get to them, open, do whatever, then close them.
I think that as long as I can open a 'bubble' and have complete access to all my code via scrolling, this would work fine. I would only need to open bubbles as I need to then.
Besides
I rarely read replies, it's my opinion and if you thought about your opinion a little more, I'm OK with that.
says a guy who can't even write a double-linked list in Z80 assembly.
Based only on the video, this looks like it could be very useful for students working with smaller Java assignments. The interface looks intuitive, and seems to be designed for people who like to visualize the flow of their code. The debugger also looks more intuitive than many of the ones I've seen. However, I shudder to think how messy the interface could get if you were working with a large project.
There is something to be said about knowing the structure of your codebase. I already see intellisense users jumping around and editing code from locations they have no idea about, this will be even worse. It really pays off to understand the file/directory/package structure of your codebase, as opposed to jumping to unknown locations, making an edit and bailing out. Intellisense/ctags are great when they extend your knowledge of the codebase, but they shouldn't be a substitute for having some amount of awareness.
This reminds me of an idea I had some time ago, which might be an application for something like that (I've not read the article yet, so maybe they;re doing something different; but this might be interesting anyway :)
When refactoring code, it's not atypical to move whole snippets of code around. Reviewing the results of such a change (i.e., doing a diff between the versions) is usually nightmarish, since every diff tool I've ever seen is inherently line- or block-of-lines-oriented, and cannot recognize the simple (for a human) case of "I moved this function above that other function".
If the diff tool (and/or the related version control tool?) could be sufficiently language-aware, it might be able to recognize certain semantic units (functions, scope blocks, etc), and try to keep track of them. If this could be done, a diff output could actually be much more meaningful than what we get these days.
See the Smalltalk browser:
http://onsmalltalk.com/on-the-smalltalk-browser
Now if only Java had Smalltalk's blocks.
And Smalltalk's more descriptive message passing syntax of "Foo x: 10 y: 20". instead of "new Foo(10, 20);"
And Smalltalk's extendable control syntax...
And Smalltalk's "doesNotUnderstand" concept for proxying.
And Smalltalk's become: method.
And Smalltalk's ability to rethrow exceptions...
And Smalltalk's multi-generational garbage collector...
And so on...
One step at a time...
If only the ParcPlace suits had not been so greedy when Sun wanted to use Smalltalk in set top devices, and instead Sun turned to a Frankenstein "Plan B".
http://fargoagile.com/joomla/content/view/15/26/
"When I became V.P. of Development at ParcPlace-Digitalk in 1996, Bill Lyons (then CEO) told me the same story about Sun and VW. According to Bill, at some point in the early '90's when Adele was still CEO, Sun approached ParcPlace for a license to use VW (probably ObjectWorks at the time) in some set top box project they were working on. Sun wanted to use a commercially viable OO language with a proven track record. At the time ParcPlace was licensing Smalltalk for >$100 a copy. Given the volume that Sun was quoting, PP gave Sun a firm quote on the order of $100/copy. Sun was willing to pay at most $9-10/copy for the Smalltalk licenses. Sun was not willing to go higher and PP was unwilling to go lower, so nothing ever happened and Sun went its own way with its own internally developed language (Oak...Java). The initial development of Oak might well have predated the discussions between Sun and PP, but it was PP's unwillingness to go lower on the price of Smalltalk that gave Oak its green light within Sun (according to Bill anyway). Bill went on to lament that had PP played its cards right, Smalltalk would have been the language used by Sun and the language that would have ruled the Internet. Obviously, you can take that with a grain of salt. I don't know if Bill's story to me was true (he certainly seemed to think it was), but it might be confirmable by Adele. If it is true, it is merely another sad story of what might have been and how close Smalltalk might have come to universal acceptance."
How much people forget...
Of course, fifteen years later, Java is not that bad... Most of the bugs are out. There are some good libraries. There is a better garbage collector... And so on...
A 21st century issue: the irony of technologies of abundance in the hands of those still thinking in terms of scarcity.
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.
But, does it have a good text editor?
I figured out just recently that the first goal of any true Java developer is to write an abstraction layer/framework to abstract previous abstraction layers/frameworks written before them.
Now, this week, I learn the 2nd goal. Write a way cool looking but really very complex development environment to help you muddle one's way through the myriad of abstraction layers already written.
All of this just to help overcome the basics such as overloading operators.
In all seriousness, this seems to show too little information with too much space in between. My screen real estate is vary valuable. Not to be wasted with pretty colored borders and arrows and such.
-joe
-- Many men would appreciate a woman's mind more if they could fondle it
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.
You can't handle the truth.
What, do you mean that your new-fanged IDE does not allow you to split a single window, forcing you to have multiple windows and having to switch between them using your mouse?
And, as someone pointed out above, it sounds suspiciously like what Smalltalk and Lisp developers had back in 80s... :)
Paul B.
I do everything in vim and regularly split the window so I can view functions in different files. I can adjust the size of the splits and quickly cycle through them all from the comfort of my keyboard. I have search at my fingertips, and the ability to set a mark and immediately return to it. I'm going to assume that emacs does all of this too.
It seems like the only thing this adds is an explicit notion of fragments, which I work with implicitly on a daily basis, all without having to reinvent how my code is organized.
The tools should let you work with whatever paradigm you wish, not dictate it to you.
The narrator sounds like Strong Sad.
oh, and forgot to mention. This: searching for path between functions. - I could use that but never as it is shown in that interface, by drawing lines between methods in boxes. Never. However, give me a search like dialog, where I can specify one and other methods, and show me all the connections between the methods and we are talking something useful.
You can't handle the truth.
Wanted:
Java developer with 40 years experience in Code Bubbling concepts.
5 years experience with the Code Bubble IDE.
When Fascism comes to America, it will call itself Anti-Fascism, and tell you to give up your guns.
I was *jokingly* asking if this is the case in my previous post (http://developers.slashdot.org/comments.pl?sid=1578224&cid=31429828), but you seem to confirm this. Wow, stunned...
Paul B.
I think this idea might work best with a functional language like Haskell. But I can't imagine this being good for Java or any other object oriented language.
Still the best/fastest way to code.
... I just haven't figured out the shortcut to open this view yet.
I'm not so keen on my IDE being reliant on all those static code analysis tools to determine your code's structure. For the most part they find all your methods just fine, but so many times they fall short, especially when you are not using Java.
This sounds an awful lot like what VisualAge had in the late 90s. That mutated into Eclipse of course.
Dunx
Converting caffeine into code since 1982
But... I don't want to wrap lines. :(
Actually I would like this as extension to an existing ide (Eclipse, Intellij) just another way of code navigation and structure detection which can be used optionally, I would never enforce the users to use that.
Thats also why the smalltalk editors sucked compared to any modern IDE, they enforce the 3 way view instead of giving the user the option to use this view.
And they want their UI back.
I'm not really loving the interface but the idea of using snippets needs to be expanded to include code others have written and tagged with meta data. I don't know how many times I've had to disturb others simply to ask "have you ever written code to do x?". It would be nice if I could search code snippets using meta data added by the developer or maybe from the code itself using reflection. Sure would be handy. Right now it's fairly clunky, search google, send emails, ask around. Then find that code and incorporate it using cut/paste.
From what I see, it looks pretty good for working with an already existing project. It would help if they talked about starting a project from scratch using this IDE. Either way looks like something worth trying out. To all the people who say this looks like a terrible idea, I think that's rather subjective; It looks like a matter of taste (emacs vs. vi, eclipse vs. netbeans). I think it would help from a maintenance perspective (fixing bugs) or even if you're adding stuff to an existing codebase. I'd like to try this out anyway.
Vivin Suresh Paliath
http://vivin.net
I like
Interestingly, I believe that the current "classic" IDE is not much more than an extension of VT -based editors... extended more and more to support GUI's, naturally, but still limited displays. This code snippet editing is not new, either... many IDEs support viewing code at the method level. What's new with this... it really takes good advantage of very large resolution displays. I code at 1900x1200 resolution, now, and really have to finagle the display to make efficient use of it while editing a code file. Worse, it's a much more active thought process to split the display over multiple separate documents. I could easily imagine code bubbles becoming the wave of the future as displays grow beyond 1900x1200 res.
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".
Post may contain irony: discontinue use if experiencing mood swings, nausea or elevated blood pressure.
Correct me if I'm wrong, but how is this different than multiple editors and multiple cli tools running in different shells? Oh, and I need a bigger screen for this? Won't the screen size needed for this make coding harder on, oh gee I don't know, laptops maybe and netbooks for sure. Nice try.
Too bad that you have to have an unused partition on your drive to use this thing.
--
No files for you!
I tried to read the summary page to see what Mylyn was, but couldn't get halfway through it as my focus was constantly pulled away by that piece-of-shit zero-value-added twitter feed they have on the screen. What the fuck is wrong with web developers these days that they would think this is a good idea?
I once read somewhere: "In Java, you enhance the IDE. In Python, you enhance the language."
That is so true.
Call me a fundamentalist, but the last thing I want from an IDE is to further obscure the way code relates to files. When programming, I want to know what I am doing. I want to know how the project is structured, I want to know how I can do things _without_ the software that I happen to be using at the moment. That way, I can switch software at some point, and/or automate things.
That said, I am all for innovation, and I'm also all for innovation in IDEs. I'm curious to see how this goes.
Please correct me if I got my facts wrong.
This sounds very much like http://en.wikipedia.org/wiki/Literate_programming/, as introduced by Knuth.
I looked at using Tangle and Weave for C development a long time ago, but found that it was a pretty difficult paradigm to get used to.
FYI, TeX and Metafont were both written using Tangle and Weave. Pretty impressive to read the source code, which had both code and documentation intermixed. It was a novel way (as in innovative, and as in a book :-) )to develop a complex application; I believe that Knuth even stated that creating TeX and MetaFONT were made much easier by using Literate Programming...
I absolutely see where this would be useful but it's just another concept that can alleviate some of the burdens of certain parts of our (?) work. For coding, all out, no-holds-barred, i-need-to-get-this-out-of-head coding you need something that is structured around packages and classes/interfaces. Whether you have to create it yourself or you started with UML (you fancy person you) or a whiteboard doesn't matter. You want to write the code, test cases and move on. I am a believer in making mistakes and correcting them rather than overanalyzing at the beginning and that has worked well in all sorts of environments, whether it has been carrier grade telecom stuff or enterprise widget work. Doesn't matter. Get an initial design, hammer in the functionality and iterate. However, in that type of scenario Code Bubbles doesn't really help. Where it does help is in debugging and documenting, I can certainly see how this would be enormously useful in that situation. The problem is that you don't normally shift between IDEs that way. Some do, I don't and even though I don't necessarily kill the people working for me if they do it, it adds a lot of maintenance overhead to deal with dual project structures.
Anyway, if this ever gets into IntelliJ I'll be happy clam I think.
I've had a wonderful time, but this wasn't it -- Groucho Marx
Beware the IDEs of March
I eat only the real part of complex carbohydrates.
I don't argue the possible merits of the approach - it is just not something that is NEW. The only thing I am worried about is return to nasty blob files with code intermixed with binary objects etc. Or some extensive incomprehensible bulk XML Document model to wrap entire projects' code into a single file.
Call me old fashioned - but files work well. Extremely well. Besides - most IDE add a lot of navigation and eye candy by intelligently parsing code, linking objects together etc, so I simply doubt that this is really "a radical departure". These concepts will simply be incorporated into existing IDEs, without sacrificing the file base concept.
Check out the Leo outliner/editor for an example of a working, useful, not-particularly-language-specific(but Python-centric) system in this vein:
http://personalpages.tds.net/~edream/front.html
Leo is based around nodes in an outline. You can mark up your files with nodes, or have Leo inject the node information automatically with some fairly reliable heuristics. Once you have nodes, you can move them around, nest them, generate clone views, etc.... I find it extremely useful for refactoring or piecing together bits of an architecture I don't understand. It can be a little fiddly to create the nodes, but everything is scriptable and it plays reasonably well with regular code editors.
The general recommendations were that each smalltalk method should be a few lines at most. Everything small, easy to understand and self contained. That doesn't mean the program couldn't be arbitrarily complex, but it did mean that unit testing was almost redundant as you could test each small functional part in-situ.
Unfortunately, it also meant that you couldn't really show your program to anyone until you were 95% done as it requires a bottom up approach to development. I loved it - if I could get the new C# / .NET stuff into a bubble browsed environment with a little "Do It" popup that used to appear in Smalltalk ("Do It" used to execute whatever you had selected) then I'd be quite a bit more productive. Most smalltalk programmers got used to including a comment in their method that had an example (with arguments if necessary) that you could "do it" and see the results.
One of the cheapest ways to improve programmer productivity is to get more screen area. Currently you can get 2 large LCD screens for less than $500. And there is your screen space. It works in Windows or Linux (Ubuntu certainly does a decent job), with Eclipse.
And if you haven't already done this for yourself and all your developers you are wasting time and money. You do need a passable graphics card or two, but nothing too exotic - code development is not graphics intensive like gaming.
And next - four screens!! Your desk starts getting a bit crowded, though.
How about three though? That split in the middle is mildly irritating.
"Cats like plain crisps"
Actually, as I watched the video, the one thing I kept thinking was how nice it would be to use my current (1920x1200) screen efficiently for programming.
The typical Microsoft/Eclipse/whatever GUI today is horribly wasteful: vast areas are wasted on window dressing, toolbars, menus, scrollbars, title bars, line number margins, breakpoint margins, bookmark margins... I'm lucky if more than 1/2 of the pixels on my screen are actually showing me code at any given time, and the moment you mention compiling or debugging anything you're lucky if it's over 1/3 of the pixels.
Moreover, as others have noted, typical code formatting conventions today are wasteful as well. Any arbitrary limit on line width belongs in another century, and IME just results in developers who have a good reason to write a relatively long line messing around with awkward formatting hacks or truncating identifiers in order to obey the letter of the law. Equally, there is no point having lines that average perhaps half that length filling all 1920 pixels of my widescreen monitor's width.
There were plenty of ideas in the presentation that I thought had potential, though many of them have been tried by others before as well. Of all of those ideas, the one thing I wish every IDE would do tomorrow is let me open lots of smaller windows as I navigate my code, organise the windows automatically, and hide all the other clutter unless I actually want it. The Code Bubbles IDE seems to do a decent job of that.
If you disagree, post your argument. (-1, Overrated) isn't your personal censorship tool for views you don't like.
I'm still at 80x25, you insensitive clod!
I can't see how this would work with polymorphism. Since you often can't know what type an object is until runtime, how do you decide what "bubble" to open?
I could see this being useful for Model-View-Controller type applications (dunno whether that's used in Java).
It would be cool to use your screen real estate to automatically open the view and model belonging to the controller you're coding.
No kitty, this is my pot pie!
Mine was mashing up the way that Visual Studio and SQL Management Studio work so that instead of viewing a whole source file in one go you'd have individual functions (etc) in individual windows. If you unmaximised the code window/tab in my mockup i'm not THAT far off:
http://cyclomedia.co.uk/blog/media/VisualStudioIDEConcept.png
If you don't risk failure you don't risk success.
You shouldn't need to look at the internals of a function/method in another module whilst editing code that calls that function. It encourages sloppy thinking. Just use the API. And if you really do need to see the implementation, opening up another tab in Eclipse is not exactly hard.
I Love this. I wish I had this interface for Dreamweaver. This is essentially how I write and debug code.
www.ArionsHome.com
Most humans are better at organizing items on a 2d flat surface than I think you realize. Vfx compositors have built their complex code like this for 20 years. I've always wondered why this sort of thing never caught on in programming. Maybe it's a left brain/ right brain thing.
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.
What about, having a magnifying glass like mouse pointer when the screen is zoomed out, so what ever bubble you point at, the text can get read very well?
Also a plus for such a IDE is, that it would prevent my coworkers from writing a 300-line-method and don't agree that they need to refactor it.
And, your complains remind me in another coworker, who wrote java code with vi until 3 years ago ...
The typical Microsoft/Eclipse/whatever GUI today is horribly wasteful: vast areas are wasted on window dressing, toolbars, menus, scrollbars...
I get around that by not using an IDE except to debug Java I've written. In vim each source file, build error log, or document is separated by one character whether they're arranged side by side or vertically and there's no scroll bar or mouse needed. For compiled languages the debugger gets one window with a couple pixels around it plus a scroll bar with watch expression display together with source.
If an emacs user taunted me about running my debuggers in a separate window I might be tempted to get the Conque plugin.
Any arbitrary limit on line width belongs in another century, and IME just results in developers who have a good reason to write a relatively long line messing around with awkward formatting hacks or truncating identifiers in order to obey the letter of the law.
While an arbitrary limit is bad, there's a point at which running into a limit generally means that indentation levels are getting too deep because function granularity is too coarse. You months or years later, your co-workers, and successors will all be happier if you fix the problem instead of trying to squeeze things into the 'letter of the law'. With name spaces and APIs having POSIX-length identifiers 80 characters is appropriate. 120 characters works for longer things.
A one-page function length limit with occasional exceptions is also a fine idea.
Now can I get a plugin for Xcode? Great idea!
Save Pangaea!! Stop Continental Drift!!