Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chi2017

234 views

Published on

The presentation slide used in CHI 2017.

Published in: Software
  • Be the first to comment

Chi2017

  1. 1. 1 Micro-Versioning Tool to Support Experimentation in Exploratory Programming Hiroaki Mikami, Daisuke Sakamoto, Takeo Igarashi
  2. 2. Target Task Micro-Versioning 2 Version control operations during exploratory programming Programming with many experimentations [Johannes et.al., 1992] 1.Implement text field 2.Switch to dropdown list 3.Change background color 4.Revert to the text field Example
  3. 3. Literature Survey 3 We examined previous studies to clarify requirements Requirements for micro-versioning tools 1. Lightweight user interface [Vakilian et.al, 2012] 2. Provide visual cues [Mealy et.al, 2007] 3. History model generating meaningful candidates [Yoon et.al, 2014]
  4. 4. Version Control Systems (e.g. Ecliipse EGit) Current Methods (1/2) 4 ● Complex user interfaces ● Manual commit operations Inappropriate for micro-versioning
  5. 5. (Linear) Undo Tools [Yoon et.al, 2014] Current Methods (2/2) 5 ● Cannot undo old edits ● No visual cues Commenting-out [Yoon et.al, 2014] ● Need to remember separated commenting out area Cause mistakes x=10 x=20 x=30 // var x = 20; … elem.innerHTML = x + “”; Forget to uncomment out related change to 20 change to 30
  6. 6. Advantages ● No need to manually commit ● Can undo any edits Related Work:Supporing Selective Undo in a Code Editor[Yoon et.al, 2015] Purpose Solve limitations of undo tools 6 Methods ● Selective undo algorithm ● Edit history visualization
  7. 7. Related Work:Supporing Selective Undo in a Code Editor[Yoon et.al, 2015] Problems ● Complex user interfaces (e.g., separate dialog) ● Might generate meaningless text 7 x = 1.0 Aim to solve these problems x = 2.0 x = 1.0 x = 3.0 x = 2.03.0 Redo 2.0
  8. 8. The Proposed Micro-Versioning Tool 8
  9. 9. Our Tool:Lightweight User Interface 9 Interaction within the text editor (no dialog)
  10. 10. Our Tool:Visual Cues 10 Always visible indicators Edits outside the view
  11. 11. Previous History Model [Yoon et al, 2015] Selective undo algorithm 11 Advantage ● Can undo any edits Disadvantage ● Might generate meaningless text We extended this model to solve it
  12. 12. History Model:New Features 1. Grouping Separated Edits 1. Exclusive Edits 1. Regional Redo 1. Redo Propagation 12
  13. 13. History Model:Grouping Separated Edits 13 We use code executions as a delimiter. x = 1.0 x = 2.0 Insert x = 1.0, execute Replace 1.0 with 2.0, execute Text Edit GroupsUsers’ Action Insert x = 1.0 1.0 → 2.0
  14. 14. History Model:Exclusive Edits Example of The Original Model 14 x = 1.0 x = 2.0 Insert x = 1.0, execute Replace 1.0 with 2.0, execute Undo B Replace 1.0 with 3.0, execute Redo B (undo C) A. Insert x = 1.0 B. 1.0 → 2.0 C. 2.0 → 1.0 (Undo B) D. 1.0 → 3.0 E. Insert 2.0 The Original History Model x = 1.0 Time-series edits x = 3.0 x = 2.03.0 B and D should not coexist
  15. 15. History Model:Exclusive Edits Example of Our Model 15 x = 1.0 x = 2.0 Insert x = 1.0, execute Replace 1.0 with 2.0, execute Undo B Replace 1.0 with 3.0, execute Redo B A. Insert x = 1.0 B. 1.0 → 2.0 C. 1.0 → 3.0 Our History Model x = 1.0 x = 3.0 x = 2.0 B. 1.0 → 2.0 C. 1.0 → 3.0B. 1.0 → 2.0disable
  16. 16. Participants 5 students in our computer science department Experiment (2 parts) 1. Programming using our tool(about 1 hour) ● To evaluate our tool ● To collect feedbacks 1. Semi-structured interview about edit histories and versioning operations ● To evaluate our history model ● To compare it with the existing model Evaluation:Small-Scale User Study 16
  17. 17. 1.Evaluation of Our Tool (Procedure) 17 Pre-questionnaires Programming using our tool (about 1 hour) paint program used in the use study (implement thickness control) Post-questionnaires
  18. 18. Positive ● Agreed that our tool is easy to use. ● UI might be useful for othe applications ○ e.g., composing music Negative ● Sometimes ignored visual cues ○ undo tools or direct rewrite ● Cluttered visualization. 1.Evaluation of Our Tool (Result) 18
  19. 19. 2.Evaluation of Our Model (Procedure) 19 See an edit history See candidates Select appropriate ones Example of edit history Example of candidates Repeat for 4 histories
  20. 20. Candidates selected by participants were all different E.g., 2 participants:Fixing typo is not a part of an edit history. 3 participants:Fixing typo is a part of an edit history. Exsiting Model [Yoon et al.2015] Generate meaning candidates Generate also meaningless candidates Our Model Remove meaningless candidates Not exactly match the paticipants’ expectations 2.Evaluation of History Model (Result) 20
  21. 21. Discussion Positives ● Satisfied the three requirements ● Got feedback that our tool is easy to use Negatives ● Need more understandable visualization ● Need to improve the history model 21 Design tradeoff (UI should be simple) e.g., Use abstract syntax tree information Out tool is useful for micro-versioning
  22. 22. Summary 22 Prototype available at https://goo.gl/X2NTNe

×