Deuce: Direct Manipulation Source Program Editor Bachelor’s Thesis Advisor: Ravi Chugh Winter 2017 Grace Lu The University of Chicago [email protected] 1 Introduction Abstract Sketch-n-Sketch (Resources #1, References [1] Commonly used text editors today often and [2]) is a direct manipulation programming require users to manipulate code in a lin- system written in Elm that automatically gener- ear fashion. These editors, such as Sub- ates code when interacting with the system. This lime and vim, provide limited features allows a user to generate a program with mini- for users to easily and quickly restructure mal text editing. Figure 1 depicts the interface of code. Users therefore manually edit code this system. The left side is the text editor or by adding and deleting text or copying code box; the right side is the output canvas. Us- and pasting lines to make changes. The ers are able to draw shapes including lines, rec- goal of Deuce as a direct manipulation tangles, ellipses, and polygons in the output can- text editor is to provide tools to help pro- vas. After drawing the shape, Sketch-n-Sketch grammers improve the readability and automatically generates the code that renders maintainability of code with minimal ef- these shapes, as seen in the code box. Sketch-n- fort, especially as code bases grow in Sketch supports programs written in a simple size. Such tools rely on being able to in- lisp-like programming language called Little teract with the program beyond simply (#3). Users are able to write Little programs in rewriting or reorganizing text. Deuce in- the code box that will generate shapes when the troduces new methods of interacting with program is run, or interact with the output can- the text through keyboard and mouse, in- vas to have code be automatically written. The cluding selection of text and drag-and- interface provides additional features in the out- drop of code elements. These direct ma- put canvas such as editing the size and color of nipulation text editing features are made shapes without needing to manipulate variables possible by the editor keeping track of through text editing in the code box. Users are information beyond just the text that able to invoke these features by clicking on se- makes up the program. This requires an lection zones and using sliders on the shapes. editor that is structure-aware. Deuce is Higher-level features include being able to set not a standalone text editor but rather a variables of shapes equal to each other (Make layer on top of text editors to make cer- Equal), such as making the x coordinate of the tain classes of editing and refactoring rectangle equal to the x coordinate of the line, or tasks easier to perform and less prone to creating a relation between multiple shapes, such errors. This layer gives users the option as one shape being half the width of another (Re- to switch back and forth between tradi- late). tional text editing and interactive pro- gram manipulation. Furthermore, this ed- itor is unique in that it focuses on provid- ing features for refactoring functional code, which lacks the rigid formatting of other programming paradigms. of menu buttons and configuration options, the DNDRefactoring editor provides the user with the ability to select drag sources and drop targets to easily interact with the text program. This drag-and-drop feature allows users to perform program transformations with a single move- ment as opposed to clicking through menu op- tions and selecting configurations. Therefore, users are able to directly interact with variables, expressions, statements, methods, and other ele- Figure 1. Sketch-n-Sketch interface. The left side ments in a program [4]. DNDRefactoring sup- depicts the code box in which users can view and ports two classes of refactorings—within the edit the text of Little programs. The right side Java editor or between the Package Explorer and depicts the output canvas in which users can Outline View. Editor refactorings with drag-and- draw and manipulate shapes, after which the drop include promoting local variable to field, system automatically generates or changes the extracting temp variable, introducing parameter, code that renders the shapes on the left. extracting method, and moving methods or members; refactorings between and within the The Sketch-n-Sketch text editor seen on the left Package Explorer and Outline View include side of the interface uses the Ace code editor moving methods, moving types to files or pack- (#4) written in JavaScript. Ace provides many ages, converting types, and extracting classes. built-in features such as line numbers and scroll- To test the performance of the DNDRefactoring ing. This editor provides the foundation for the tool, the researchers conducted user studies. In Deuce interactive layer. these user studies, the researchers timed how long it took participants to perform refactorings Deuce is a layer built on the text editor portion with and without the DNDRefactoring tool. Re- of Sketch-n-Sketch as an extension of Ace. Simi- sults shows the participants were able to perform lar to the direct manipulation program generator, almost all common refactorings faster in the Deuce aims to minimize time spent text editing DNDRefactoring editor than in the regular to create a more fluid experience when interact- Eclipse interface. In fact, refactorings were per- ing with the program text. This layer allows us- formed on average 3 times faster, showing drag- ers to interact with the text through mouse fea- and-drop to be a more efficient tool for code re- tures including selection and dragging in addi- structuring [4]. tion to traditional text editing. Therefore, Deuce 2.2 Barista is not considered a replacement for text editors but rather an extension. With these new interac- Similarly, Ko and Myers of Carnegie Mellon tion elements, users will be able to more easily University created a programming environment edit and refactor complex code. called Barista to overcome limitations of plain text editors. Barista provides data structures, al- 2 Related Work gorithms, and interactive techniques to augment traditional text editors [3]. These new tools and 2.1 DNDRefactoring interactions will improve usability and utility of Researchers at the University of Illinois at Urba- code editors to increase programmer productivi- na-Champaign created a tool called Drag-and- ty. This framework allows users to move back Drop Refactoring (DNDRefactoring) in the and forth between structured and unstructured Eclipse IDE (integrated development environ- versions of the code. Barista uses a model-view- ment) to support the restructuring of code controller architecture in which the model is an through mouse movements [4]. Their work ap- abstract syntax tree composed of structures and plies specifically to the Java programming lan- tokens, the view is a tree of interactive views, guage and focuses on common code restructur- and the controller is the event handlers. An ab- ing tasks seen in object-oriented programming. stract syntax tree representation of the code is While the Eclipse editor itself does provide re- created internally to be able to maintain the factoring tools, users often experience difficulty structure of a program and also provides a visual finding, invoking, and configuring the features to user interface to enable interactive editing fea- work as intended. To overcome the proliferation tures. With the abstract syntax tree, users of Barista are able to match delimiters and quickly 4.1 Item Identification see errors in code such as improper scoping of The first step in creating a direct manipulation variables since these are easily identifiable when text editor is indexing elements within the pro- the program structure is determined. For gram. This means attaching identifiers to expres- frontend features, the framework allows for rich sions, patterns, and target positions in the pro- annotation metadata to be displayed and pro- gram. This information is needed to be able to vides focused views on specific blocks of code. select elements and also move them around In addition, the environment supports a drag- within a program. Deuce therefore is a structure- type feature to help with movement of code aware editor. Plain text editors such as Ace do blocks. This feature is implemented with the not keep track of the structure of the program. keyboard, with users holding down a modifier key near statements or delimiters and using the Deuce keeps track of expressions, patterns, and arrow keys to select the target location. target positions when parsing through code. IDs 3 Deuce for these items are kept track of in the model. Furthermore, a dependence graph of variables in Deuce (#2) aims to accomplish many of the the code is created. This allows Deuce to keep same goals as DNDRefactoring and Barista in track of dependencies between parts of the pro- creating a more interactive program editor that gram to determine which transformations are provides refactoring features beyond normal valid and which are out of scope. This is similar plain text editing. These additional features that to the abstract syntax tree structure Barista cre- augment traditional text manipulation aim to ates. make refactoring easier and more reliable. 4.2 Item Selection: Initial Design Similar to Barista, the Deuce project is split into To enable the user to interact with the program two parts: the frontend user interface and the beyond text manipulation, a selection feature backend program transformations. The program was introduced into the Deuce editor. The first transformations rely on the user interface to be iteration involved the user being able to select an able to trigger backend changes to the code. Sec- item such as an expression, pattern, or target po- tion 4 describes the creation of the Deuce user sition based on the mouse position of the click, interface and the features it provides; Section 5 and then the item would be highlighted using details the program transformations that are Ace editor highlights as seen in Figure 2.