Code Bubbles: Difference between revisions
Caseorganic (talk | contribs) No edit summary |
Caseorganic (talk | contribs) No edit summary |
||
| Line 11: | Line 11: | ||
Published twice in 2010. "Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance," CHI 2010, Atlanta, pages 2503 to 2512.<ref name="chi" /> And "Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments," ICSE 2010, Cape Town.<ref name="icse">[https://dl.acm.org/doi/10.1145/1806799.1806866 Code bubbles: rethinking the user interface paradigm of integrated development environments], ICSE '10 Proceedings.</ref> A research demonstration appeared at ICSE 2010 volume 2, pages 293 to 296.<ref name="ss">[https://www.semanticscholar.org/paper/A-research-demonstration-of-code-bubbles-Bragdon-Reiss/47d33d2ab327e33764e7859075306e21bb3d3695 A research demonstration of code bubbles], Semantic Scholar.</ref> | Published twice in 2010. "Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance," CHI 2010, Atlanta, pages 2503 to 2512.<ref name="chi" /> And "Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments," ICSE 2010, Cape Town.<ref name="icse">[https://dl.acm.org/doi/10.1145/1806799.1806866 Code bubbles: rethinking the user interface paradigm of integrated development environments], ICSE '10 Proceedings.</ref> A research demonstration appeared at ICSE 2010 volume 2, pages 293 to 296.<ref name="ss">[https://www.semanticscholar.org/paper/A-research-demonstration-of-code-bubbles-Bragdon-Reiss/47d33d2ab327e33764e7859075306e21bb3d3695 A research demonstration of code bubbles], Semantic Scholar.</ref> | ||
=== | === Core Problem === | ||
Today's integrated development environments are hampered by their dependence on files and file-based editing.<ref name="icse" /> | |||
The file is a storage unit that became a display unit. Code that belongs together conceptually, a function and the three functions it calls, is stored in whatever files the language and the project structure put it in, and the editor shows one file at a time. Understanding a call chain therefore requires moving back and forth between locations, and each move discards the previous view. | The file is a storage unit that became a display unit. Code that belongs together conceptually, a function and the three functions it calls, is stored in whatever files the language and the project structure put it in, and the editor shows one file at a time. Understanding a call chain therefore requires moving back and forth between locations, and each move discards the previous view. | ||
The papers cite supporting studies | The papers cite supporting studies: how Java developers actually use Eclipse, how effectively developers investigate source code, and path exploration during code navigation.<ref name="brown" /> | ||
=== The interface === | === The interface === | ||
| Line 23: | Line 22: | ||
A bubble holds a single fragment, typically a function, and is editable in place. Bubbles sit on a continuous two-dimensional surface rather than in windows. | A bubble holds a single fragment, typically a function, and is editable in place. Bubbles sit on a continuous two-dimensional surface rather than in windows. | ||
A bubble is opened via a pop-up search box; opening the definition of something inside a bubble creates another bubble beside it, and related bubbles are automatically grouped; a large working set can include a bubble stack of references; an overview appears in the panning bar; and hovering gives a preview.<ref name="brown" /> | |||
A tiling assistant prevents fragments from overlapping, and code reflows automatically to fit the bubble. | |||
=== Precedents === | === Precedents === | ||
Working with program fragments rather than files was explored in Reiss's own Desert environment, and appears in IBM's VisualAge and CMU's Sheets hypercode editor, all loosely based on non-file-based languages such as Xerox's Smalltalk and Lisp.<ref name="brown" /> | |||
Their claim is that none of those systems provided either a tiling assistant to avoid fragment overlap or a continuous desktop, and that these omissions, together with choices such as not reflowing code automatically, limited their usability.<ref name="brown" /> | Their claim is that none of those systems provided either a tiling assistant to avoid fragment overlap or a continuous desktop, and that these omissions, together with choices such as not reflowing code automatically, limited their usability.<ref name="brown" /> | ||
| Line 41: | Line 40: | ||
=== Afterwards === | === Afterwards === | ||
Microsoft built | Microsoft built code bubbles into a shipped product. Debugger Canvas, reported at ICSE 2012 by Robert DeLine, Bragdon, Kael Rowan, Jens Jacobsen, and Reiss, documented industrial experience with the code bubbles approach.<ref name="dblp">[https://dblp.org/pid/r/StevenPReiss.html Steven P. Reiss publication list], dblp.</ref> It shipped as a Visual Studio 2010 Ultimate Power Tool and was later discontinued. | ||
Reiss continued the work at Brown, publishing on plugging in and into code bubbles in 2012, integrating S6 code search with it in 2013, and demonstrating visualisations of code bubbles the same year.<ref name="dblp" /> | Reiss continued the work at Brown, publishing on plugging in and into code bubbles in 2012, integrating S6 code search with it in 2013, and demonstrating visualisations of code bubbles the same year.<ref name="dblp" /> | ||
=== Relevance === | === Relevance === | ||
Most software presents information in the units the storage layer uses, and expects the person to reassemble their own unit by navigating. Each navigation costs the working memory the person had accumulated. | |||
Why did this become the default despite measured improvements and enthusiastic evaluations? The answer is the same one [[Minority Report|Underkoffler]] gave about g-speak: an interface paradigm that requires everyone to relearn how they work faces a switching cost. | |||
=== Related Reading === | === Related Reading === | ||
* [[ | * [[Doug Engelbart]] | ||
* [[Mother of All Demos]] | * [[Mother of All Demos]] | ||
* [[User experience design]] | * [[User experience design]] | ||
Revision as of 09:41, 26 August 2026
Overview
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. Code Bubbles proposes a user interface metaphor for code understanding and maintenance based on collections of lightweight, editable fragments called bubbles, which form concurrently visible working sets.[1]
The essential goal is to make it easier for developers to see many fragments of code, or other information, at once without having to navigate back and forth. Each fragment is shown in a bubble.[2]
Authorship
Developed at Brown University by Andrew Bragdon, Robert Zeleznik, Steven P. Reiss, Suman Karumuri, William Cheung, Joshua Kaplan, Christopher Coleman, and Ferdi Adeputra, with Joseph J. LaViola Jr.[3]
Published twice in 2010. "Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance," CHI 2010, Atlanta, pages 2503 to 2512.[1] And "Code Bubbles: Rethinking the User Interface Paradigm of Integrated Development Environments," ICSE 2010, Cape Town.[4] A research demonstration appeared at ICSE 2010 volume 2, pages 293 to 296.[5]
Core Problem
Today's integrated development environments are hampered by their dependence on files and file-based editing.[4]
The file is a storage unit that became a display unit. Code that belongs together conceptually, a function and the three functions it calls, is stored in whatever files the language and the project structure put it in, and the editor shows one file at a time. Understanding a call chain therefore requires moving back and forth between locations, and each move discards the previous view.
The papers cite supporting studies: how Java developers actually use Eclipse, how effectively developers investigate source code, and path exploration during code navigation.[3]
The interface
A bubble holds a single fragment, typically a function, and is editable in place. Bubbles sit on a continuous two-dimensional surface rather than in windows.
A bubble is opened via a pop-up search box; opening the definition of something inside a bubble creates another bubble beside it, and related bubbles are automatically grouped; a large working set can include a bubble stack of references; an overview appears in the panning bar; and hovering gives a preview.[3]
A tiling assistant prevents fragments from overlapping, and code reflows automatically to fit the bubble.
Precedents
Working with program fragments rather than files was explored in Reiss's own Desert environment, and appears in IBM's VisualAge and CMU's Sheets hypercode editor, all loosely based on non-file-based languages such as Xerox's Smalltalk and Lisp.[3]
Their claim is that none of those systems provided either a tiling assistant to avoid fragment overlap or a continuous desktop, and that these omissions, together with choices such as not reflowing code automatically, limited their usability.[3]
Results
The CHI paper reports that bubbles significantly improved code understanding time while reducing navigation interactions compared with a widely used IDE, across two controlled tasks.[6]
The ICSE quantitative evaluation found developers could expect to view a sizeable number of functions concurrently with relatively few UI operations, and a qualitative evaluation with 23 professional developers reported a high level of excitement, interest, and perceived benefit.[6]
Afterwards
Microsoft built code bubbles into a shipped product. Debugger Canvas, reported at ICSE 2012 by Robert DeLine, Bragdon, Kael Rowan, Jens Jacobsen, and Reiss, documented industrial experience with the code bubbles approach.[7] It shipped as a Visual Studio 2010 Ultimate Power Tool and was later discontinued.
Reiss continued the work at Brown, publishing on plugging in and into code bubbles in 2012, integrating S6 code search with it in 2013, and demonstrating visualisations of code bubbles the same year.[7]
Relevance
Most software presents information in the units the storage layer uses, and expects the person to reassemble their own unit by navigating. Each navigation costs the working memory the person had accumulated.
Why did this become the default despite measured improvements and enthusiastic evaluations? The answer is the same one Underkoffler gave about g-speak: an interface paradigm that requires everyone to relearn how they work faces a switching cost.
Related Reading
- Doug Engelbart
- Mother of All Demos
- User experience design
- The Design of Everyday Things
- Designing Interfaces: Patterns for Effective Interaction Design
- Frictional Surfaces
- Information Anxiety 2
- Envisioning Information
- The Visual Display of Quantitative Information
- Everything Is Miscellaneous: The Power of the New Digital Disorder
- Minority Report
- Mirror Worlds: or the Day Software Puts the Universe in a Shoebox...How It Will Happen and What It Will Mean
- Computer Lib
- Architectural Intelligence
- Equipotential Space: Freedom in Architecture
External Links
- Code Bubbles project site, Brown University
- CHI 2010 paper, full text PDF
References
- ↑ 1.0 1.1 Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance, CHI '10 Proceedings.
- ↑ Code Bubbles, Brown University.
- ↑ 3.0 3.1 3.2 3.3 3.4 Code Bubbles: A Working Set-based Interface for Code Understanding and Maintenance, Brown CS.
- ↑ 4.0 4.1 Code bubbles: rethinking the user interface paradigm of integrated development environments, ICSE '10 Proceedings.
- ↑ A research demonstration of code bubbles, Semantic Scholar.
- ↑ 6.0 6.1 Code bubbles: rethinking the user interface paradigm, Semantic Scholar.
- ↑ 7.0 7.1 Steven P. Reiss publication list, dblp.
