Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Visual Storytelling
of Development Sessions
Roberto Minelli, Lorenzo Baracchi, Andrea Mocci, and Michele Lanza
REVEAL @ Fa...
IDE
IDE
Interaction
Data
Opening a code browser
Inspecting an object at run-time
Editing a method
Opening & closing a window
Popping up a refactori...
IDE
Interaction
Data
DFLOW
IDE
Interaction
Data Interaction
Data
How do developers
interact with the IDE
?
Catalog of Views
Development Activities
Catalog of Views
User Interface
Development Activities
Catalog of Views
User Interface
Development Activities
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y
m1 m2 m3
Catalog o...
User Interface
Development Activities
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y
m1 m2 m3
0
300
600...
User Interface
Development Activities
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y
m1 m2 m3
10:20 20:...
User Interface
Development Activities
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y
m1 m2 m3
10:20 20:...
Activity Forest
Navigation Inspection Understanding Edit
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y...
Activity Forest
Navigation Inspection Understanding Edit
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y...
Activity Timeline
0 10 20 30 40 50 55
duration
Navigation Inspection Understanding Edit
Cumulative Activity View
0
duration of understanding
300
600
1680
duration of editing
duration of inspection
duration of n...
User Interface (UI) View
10:20 20:12
3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
Open Activate Resize/move C...
User Interface (UI) View
Open Activate Resize/move Close Minimize / Expand
10:20 20:12
3:00 6:00 18:35 21:00 23:00 45:43 4...
User Interface (UI) View
Open Activate Resize/move Close Minimize / Expand
Main
10:20 20:12
3:00 6:00 18:35 21:00 23:00 45...
User Interface (UI) View
Open Activate Resize/move Close Minimize / Expand
Main
Short
10:20 20:12
3:00 6:00 18:35 21:00 23...
User Interface (UI) View
Open Activate Resize/move Close Minimize / Expand
Main
Short
Windows
Interactions
10:20 20:12
3:0...
User Interface (UI) View
Open Activate Resize/move Close Minimize / Expand
Main
Short
Windows
Interactions
Edit event
10:2...
Workspace View
Free area Few windows Chaos
User Interface
Development Activities
category Pill
Class Blue Class Red
foo bar baz
category X
Class Y
m1 m2 m3
10:20 20:...
Killing Bugs and Windows
time
Level of Chaos
Killing Bugs and Windows
Killing Bugs and Windows
Level of Chaos Increases
One Window Takes It All
One Window Takes It All
Navigation Inspection Understanding Edit
One Window Takes It All
One Window Takes It All
One Window Takes It All
IDE
Interaction
Data
DFLOW
IDE
Interaction
Data Interaction
Data
DFLOW
IDE
Interaction
Data Interaction
Data
DFLOW
IDE
Interaction
Data Interaction
Data
@robertominelli
Visual Storytelling of Development Sessions [ICSME2014]
Visual Storytelling of Development Sessions [ICSME2014]
Visual Storytelling of Development Sessions [ICSME2014]
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Blended Welding
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

0

Partager

Télécharger pour lire hors ligne

Visual Storytelling of Development Sessions [ICSME2014]

Télécharger pour lire hors ligne

Most development activities, like program understanding, source code navigation and editing, are supported by Integrated Development Environments (IDEs). They provide different tools and user interfaces (UI) to interact with the source code, such as browsers, debuggers, and inspectors. It is uncertain how and when programmers use different UI elements of an IDE and to what extent they appropriately support development.
Previously we developed DFLOW, a tool that seamlessly records and processes interaction data. Our long-term goal is to assess to what extent the UIs of IDEs support the workflow of developers and whether they can be improved. As a first step we present our approach to analyze development sessions in the form of visual storytelling. We illustrate our initial catalogue of visualizations through two development stories.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Visual Storytelling of Development Sessions [ICSME2014]

  1. 1. Visual Storytelling of Development Sessions Roberto Minelli, Lorenzo Baracchi, Andrea Mocci, and Michele Lanza REVEAL @ Faculty of Informatics, University of Lugano, Switzerland @robertominelli
  2. 2. IDE
  3. 3. IDE Interaction Data
  4. 4. Opening a code browser Inspecting an object at run-time Editing a method Opening & closing a window Popping up a refactoring menu Adding a class Removing a method Removing a class IDE Interaction Data
  5. 5. IDE Interaction Data
  6. 6. DFLOW IDE Interaction Data Interaction Data
  7. 7. How do developers interact with the IDE ?
  8. 8. Catalog of Views
  9. 9. Development Activities Catalog of Views
  10. 10. User Interface Development Activities Catalog of Views
  11. 11. User Interface Development Activities category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 Catalog of Views Structure
  12. 12. User Interface Development Activities category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 0 300 600 1680 900 1200 360 Catalog of Views 0 10 20 30 40 50 55 Structure Sequence and Impact of Activities
  13. 13. User Interface Development Activities category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33 0 300 600 1680 900 1200 360 Catalog of Views 0 10 20 30 40 50 55 Structure Sequence and Impact of Activities Development Flow across UIs
  14. 14. User Interface Development Activities category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33 0 300 600 1680 900 1200 360 Catalog of Views 0 10 20 30 40 50 55 Structure Sequence and Impact of Activities Development Flow across UIs IDE Evolution
  15. 15. Activity Forest Navigation Inspection Understanding Edit category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 Roots Packages Level 1 Classes Level 2 Methods
  16. 16. Activity Forest Navigation Inspection Understanding Edit category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 Roots Packages Level 1 Classes Level 2 Methods time Size of the change (edit-only) Duration
  17. 17. Activity Timeline 0 10 20 30 40 50 55 duration Navigation Inspection Understanding Edit
  18. 18. Cumulative Activity View 0 duration of understanding 300 600 1680 duration of editing duration of inspection duration of navigation 900 1200 360 Navigation Inspection Understanding Edit 5 10 15 20 25 30
  19. 19. User Interface (UI) View 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33 Open Activate Resize/move Close Minimize / Expand
  20. 20. User Interface (UI) View Open Activate Resize/move Close Minimize / Expand 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
  21. 21. User Interface (UI) View Open Activate Resize/move Close Minimize / Expand Main 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
  22. 22. User Interface (UI) View Open Activate Resize/move Close Minimize / Expand Main Short 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
  23. 23. User Interface (UI) View Open Activate Resize/move Close Minimize / Expand Main Short Windows Interactions 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
  24. 24. User Interface (UI) View Open Activate Resize/move Close Minimize / Expand Main Short Windows Interactions Edit event 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33
  25. 25. Workspace View Free area Few windows Chaos
  26. 26. User Interface Development Activities category Pill Class Blue Class Red foo bar baz category X Class Y m1 m2 m3 10:20 20:12 3:00 6:00 18:35 21:00 23:00 45:43 48:00 51:00 54:00 56:33 0 300 600 1680 900 1200 360 Catalog of Views 0 10 20 30 40 50 55 Structure Sequence and Impact of Activities Development Flow across UIs IDE Evolution
  27. 27. Killing Bugs and Windows time Level of Chaos
  28. 28. Killing Bugs and Windows
  29. 29. Killing Bugs and Windows Level of Chaos Increases
  30. 30. One Window Takes It All
  31. 31. One Window Takes It All Navigation Inspection Understanding Edit
  32. 32. One Window Takes It All
  33. 33. One Window Takes It All
  34. 34. One Window Takes It All
  35. 35. IDE Interaction Data
  36. 36. DFLOW IDE Interaction Data Interaction Data
  37. 37. DFLOW IDE Interaction Data Interaction Data
  38. 38. DFLOW IDE Interaction Data Interaction Data @robertominelli

Most development activities, like program understanding, source code navigation and editing, are supported by Integrated Development Environments (IDEs). They provide different tools and user interfaces (UI) to interact with the source code, such as browsers, debuggers, and inspectors. It is uncertain how and when programmers use different UI elements of an IDE and to what extent they appropriately support development. Previously we developed DFLOW, a tool that seamlessly records and processes interaction data. Our long-term goal is to assess to what extent the UIs of IDEs support the workflow of developers and whether they can be improved. As a first step we present our approach to analyze development sessions in the form of visual storytelling. We illustrate our initial catalogue of visualizations through two development stories.

Vues

Nombre de vues

301

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

4

Actions

Téléchargements

3

Partages

0

Commentaires

0

Mentions J'aime

0

×