Topic 8: (Last two papers) Presented by Brad Myers 05-773A4: Computer Science Perspectives in HCI, (CS Mini), Spring, 2017 © 2017 - Brad Myers

Garnet © 2017 - Brad Myers

Garnet GARNET stands for Generating an Amalgam of Real-time, Novel Editors and Toolkits © 2017 - Brad Myers

Garnet project 1987 until about 1994 Large-scale (for the time) toolkit to help programmers create user interfaces faster and easier Lisp programming language Macintosh and X-windows Generated lots of research results and papers (9 papers). In 1994, DARPA made us redo it in C++, which we called "Amulet"  © 2017 - Brad Myers

Garnet system Available by “anonymous FTP” – pre-web Now a sourceforge project (before GIThub) http://garnetlisp.sourceforge.net/ All papers: http://www.cs.cmu.edu/afs/cs/project/garnet/www/papers.html Apparently still some users! © 2017 - Brad Myers

This paper Myers, B.A.; Giuse, D.A.; Dannenberg, R.B.; Zanden, B.V.; Kosbie, D.S.; Pervin, E.; Mickish, A.; Marchal, P., "Garnet: comprehensive support for graphical, highly interactive user interfaces," IEEE Computer , vol.23, no.11, pp.71-85, Nov. 1990. Overview of the project while still in progress © 2017 - Brad Myers

Garnet Architecture © 2017 - Brad Myers

Innovations in Garnet: New ways of doing object-oriented programming New ways to have graphical objects (output) with a new way to handle automatic refresh New ways to handle input (covered in topic 4) New kinds of "constraints," which are ways to declare properties are related, and have the system maintain that. New kinds of higher-level tools, to help non-programmers handle more of the user interface design. See the video (9:30) © 2017 - Brad Myers

Discussion questions What is a good way to evaluate a programming tool? Target application that was built with various toolkits The implementation was smaller in Garnet. Solid enough to have people use Garnet, and provided evidence that it was widely downloaded and used. But this was hard to do, and required that we have a staff programmer to do support. What systems are you aware of that use aspects of what Garnet provided? A key goal of Garnet's "higher-level tools" was to provide capabilities like one finds today in resource editors, Balsamiq, Axure, etc. What additional capabilities would it be good for those kinds of tools to support, for example that Garnet's tools demonstrated was possible? © 2017 - Brad Myers

InterState © 2017 - Brad Myers

Paper Stephen’s PhD thesis work Stephen Oney, Brad A. Myers, and Joel Brandt, "InterState: A Language and Environment for Expressing Interface Behavior", UIST'14, October 5-8, 2014, Honolulu, Hawaii. pp. 263-272.  ACM DL, local pdf, video, project Page. (Cited by 5) Stephen’s PhD thesis work Original goal: make it easier for non-programmers to create interactive behaviors. Combine two programming models that were easier to understand: State transition models (STM) Spreadsheets. Constraints (formulas in spreadsheets) express relationships that must hold STMs control when the constraints apply and don't apply. Became a more sophisticated programming model, and we gave up the goal of making it easy enough for non-programmers to use © 2017 - Brad Myers

Comparison: JavaScript flow of control var isDragLocked = false, mm_listener = function(mm_event) { draggable.attr({ x: mm_ev.x, y: mm_ev.y }); }, mu_listener = function(mu_event) { removeEventListener("mousemove", mm_listener); removeEventListener("mouseup", mu_listener); }; draggable.mousedown(function(md_ev) { draggable.attr({ x: md_ev.x, y: md_ev.y }); addEventListener("mousemove", mm_listener); addEventListener("mouseup", mu_listener); }).dblclick(function(md_event) { if(isDragLocked) { removeEventListener("mousemove", mm_listener); } else { addEventListener ("mousemove", mm_listener); } isDragLocked = !isDragLocked; }); …then after they drag and double click again to end the drag lock that control flow looks like this

Examples © 2017 - Brad Myers

Innovations A new model for representing programs A novel visual representation of that model An extension of the idea of object-oriented inheritance that supports behavior reuse, not just method and values. A live editor that provides new ways to edit code and data while the code is running. A novel input mechanism that provides a new way to deal with multi-touch and gestures (not described in the current paper). The evaluation involved comparing InterState to programming in JavaScript, and the InterState users were significantly faster. See the video (3:36) © 2017 - Brad Myers

Discussion Questions Did you find the combination of constraints and STMs compelling? Easy to understand? What parts were most complicated? There is usually a trade off between the power of a tool (what can be done with it) and the learnability. This is clearly evidenced in this work. Are there ways to increase the learnability of InterState while retaining the power? Can you think of situations (in other tools) in which both the learnability and power can be improved together (where there isn't a tradeoff)? © 2017 - Brad Myers