A whiteboard for Saros To develop a whiteboard functionality for distributed pair programming, iterative by prototypes Michael Jurke Institut für Informatik Fu Berlin 25. Februar 2010
Overview I. Goals II. Prototyping III. Possible whiteboard requirements IV. Drawing in Java and Eclipse V. Requirements for a distributed whiteboard VI. Test-driven development VII.Concept and timetable (abstract) To develop a whiteboard for DPP, iterative by prototypes 2
Goals Experiences with prototyping Develop a working whiteboard Determine its requirements By end user feedback Compare and synchronize with scientific literature If possible complete unittests How does test-driven development apply in this scope To develop a whiteboard for DPP, iterative by prototypes 3
Prototyping Creating of incomplete software (parts) to allow users to evaluate proposals to show developers the needs Maybe only by GUIs Keyword UX-Design (User-experience Design) Proprietary programmes like irise, Axure, VisualPrototyper Literature: The Mythical Man-Month: Essays on Software Engineering, Fred Brooks Iteratively extending them by user feedback To develop a whiteboard for DPP, iterative by prototypes 4
Prototyping Very up to date some argue it should be used all the time very effective for on-line systems, especially transaction processing Most beneficial for programmes having a lot of human-computer interactions fits for developing a whiteboard To develop a whiteboard for DPP, iterative by prototypes 5
Prototyping steps source: English wikipedia 1. Identify basic requirement desired in- and output 2. Develop Initial Prototype if possible only user interface 3. Review Customers examine prototype, feedback on additions and changes 4. Revise and Enhance the Prototype improve specification and implementation after changes, repeat step 3 and 4 To develop a whiteboard for DPP, iterative by prototypes 6
Prototyping types (selection) Throwaway prototyping developing of usually discarded snippets quick feedback by users user-testable interfaces Evolutionary prototyping robust prototype in a structured manner continuously refined flexible, working basis until the final product Explorative prototyping estimate of certain solutions determine whether specifications and ideas are suitable To develop a whiteboard for DPP, iterative by prototypes 7
Prototyping in the context of Saros The whiteboard depends on Saros No Throwaway prototyping It is quite probable that only students will test we may not get a balanced feedback An evolutionary and explorative approach to estimate some pre-defined possible requirements for a DPP whiteboard to find new real ones by testing students To develop a whiteboard for DPP, iterative by prototypes 8
Prototyping in the context of Saros It is quite probable that only students will test to boost the amount and diversity of testing participant we might decouple Saros from Eclipse (optional) distribute it as RCP or standalone Jabber client Advantage: A lot of testers for Saros session, network, chat and whiteboard Disadvantage: Most prototype users won't be programmers To develop a whiteboard for DPP, iterative by prototypes 9
Get possible DPP whiteboard requirements Overview existing whiteboards and their features why does DPP need a whiteboard and why might someone not be very likely to use one (like me) which features would help a dream DPP whiteboard To develop a whiteboard for DPP, iterative by prototypes 10
State of the art Existing distributed whiteboards There are thousands steam, Adobe Connect Pro, MBONE, Inkscape, XPairtise, Drawboard, Groupboard, Edraw Mind Map To develop a whiteboard for DPP, iterative by prototypes 11
What do they offer? pencil: always usually standard shapes like line, rectangle and circle others selection (Adobe Connect Pro, steam, Inkscape) text half transparent text marker (Adobe) Mind Maps (Edraw Mind Map and others) connectors (Inkscape) desktop-like drawable home area (steam) Screen shots, export (i.e. to JPEG or SVG) To develop a whiteboard for DPP, iterative by prototypes 12
Existing distributed whiteboards Problem: why not use an existing on? apart of Saros-integration Better question: what advantages has a whiteboard specialized on distributed programming? To develop a whiteboard for DPP, iterative by prototypes 13
Why does DPP need a whiteboard? Giving overviews graphically Explaining abstract ideas Informality What designers need are computerized tools that allow them to sketch rough design ideas quickly Landay, J.A., Myers, B.A. Interactive Sketching for the Early Stages of User Interface Design (1995) Abstract and formal methods do not always fit to improve communication may make it difficult to communicate with end users ideas are faster to sketch than to specify formally To develop a whiteboard for DPP, iterative by prototypes 14
Why might a programmer not like to use a whiteboard? Difficult to draw a pencil with the mouse Most users do not have a pen pad It may be clumsy to modify, extend or scale It may take to long to draw what you want to express Classes, inheritance, concurrency drawn by pencil and rectangles The drawn sketches may not be used again Hardly for documentation: good looking sketches are time intensive Not for code generation (related work, see [traetteberg, 2002]) the area is quickly used off To develop a whiteboard for DPP, iterative by prototypes 15
Basic requirements whiteboard for programming Standard tools and shapes It may be clumsy to modify and extend selecting, modifying and removing of element The drawn sketches may not be used again Save and reload (requirements to be verified by the explorative prototyping) To develop a whiteboard for DPP, iterative by prototypes 16
Basic requirements whiteboard for programming Difficult to draw a pencil with the mouse and It may take to long to draw connectors and templates for commonly used UML-like shapes (optional) the area is quickly used of various pages, zooming (optional) (requirements to be verified by the explorative prototyping) To develop a whiteboard for DPP, iterative by prototypes 17
Dream whiteboard A dream DPP whiteboard for me would be able to: recognize patterns (like E-Chalk) have a possibility to introduce semantic, i.e. Domain Specific Language enable layouting be able to generate elements by drag and drop (i.e. UML-like class shapes from package explorer) be personalisable and extendible More an UML and Model-Drive-Architecture helper, however, it leads us to GEF and GMF To develop a whiteboard for DPP, iterative by prototypes 18
Drawing (and modelling) in Java and Eclipse Overview GEF and GMF Pixel based SVG (batik, SVG Salamander) To develop a whiteboard for DPP, iterative by prototypes 19
Graphical Editing Framework helper Framework to edit models graphically based on Draw2d SWT based Java2D compliant offers infrastructure to deal with shapes (figures) strict MVC infrastructure layouts and coordinate system edit policies and commands To develop a whiteboard for DPP, iterative by prototypes 20
Graphical Modelling Framework based on GEF and EMFs Ecore (Eclipse Modeling Framework) may automatically generate graphical editors and DSLs by XML-mappings has in my experience a too specialized scope To develop a whiteboard for DPP, iterative by prototypes 21
GEF and GMF Both focus more on formal model editing To improve developing they require quite a big scope of usage (a real graphical editor) and quite some knowledge No option for Saros' whiteboard especially as it should improve communication by informal sketches To develop a whiteboard for DPP, iterative by prototypes 22
Pixel based Like XPairtise's whiteboard or the SWT paint example Disadvantages: No selection, moving, modifying of elements difficult to synchronize sending of whole repaint regions? sync. execution on the server (might have a heavy delay) To develop a whiteboard for DPP, iterative by prototypes 23
Scalable Vector Graphics open XML standard for 2D vector graphics under w3c development since 1999 supports vector- and raster graphics as well as text gouping, styling, modifying and composing of elements animations, JavaScript and CSS renderable and dynamical modifyable in Java by Batik SVG Salamander extendible (i.e. introducing new tags, namespaces etc.) To develop a whiteboard for DPP, iterative by prototypes 24
Best SVG 1.1 implementation after Opera generate XML by drawing maybe not used in our case display an XML handle selection by SVG listeners Swing based need to use an embedded Frame for eclipse after writing some test snippets it works fine for me within eclipse To develop a whiteboard for DPP, iterative by prototypes 25
Requirements 2 What requirements may be given by distributed drawing? same picture for every peer fast drawing informing if any other user is drawing blocking of elements that are in modification (i.e. text edit) (not complete yet) To develop a whiteboard for DPP, iterative by prototypes 26
Requirements 2 distributed whiteboard usage of SVG would be an advantage text-based smaller amount of transferred data easier to synchronize standard conform... there are several SVG + XMPP approaches to study about in this thesis, however, not yet standardised http://xmpp.org/extensions/inbox/whiteboard2.html could we make our whiteboard compatible with TransVerse? (XMPP+SVG whiteboard, initiators of proposal above) To develop a whiteboard for DPP, iterative by prototypes 27
Test-driven development 1) A test case is written to define desired improvement 2) Run all tests and the new one will fail if not, the feature is already implemented or the test case is wrong! Note: I do not distinguish to test-first approach as only recently they may be seen as different approaches. Test-first is said to be more likely part of extreme programming To develop a whiteboard for DPP, iterative by prototypes 28
Test-driven Development 3) Write the code to make the test work don't write more than necessary would result in lack of test cases 4) Rerun the tests should pass now 5) Refactor the code and repeat all steps To develop a whiteboard for DPP, iterative by prototypes 29
Test-diven development Not (yet) interesting for this work in the beginning Not very suitable for user interfaces because full success or failure is required a lot of non testable functionalities (i.e. flicker) Note: Writing snippets, I spend almost all my time on this or when depending on external libraries a lot of mock objects are needed or when working distributed In this cases it might be an interesting study for experienced test-driven developers To develop a whiteboard for DPP, iterative by prototypes 30
Test-diven development continued Not very suitable as Saros is not implemented test-driven test coverage gaps lead to false confidence the test cases won't help to localise problems there fits better for programming in groups or pairs (best agile programming) However, in the latter state of this work when receiving iteratively new requirements it might be interesting to apply TDD on a new (separated) part of the whiteboard how test-driven development does apply in the conditions mentioned above (optional) To develop a whiteboard for DPP, iterative by prototypes 31
Concept and timetable (abstract) March 1 st three weeks extending snippet to first prototype Tools (pencil and common shapes) and Toolbar Saros integration reading about SVG+XMPP 4 th and 5 th week consolidate class structure writing test cases and bug search How to find test users find appropriate lectures for Saros exercises; ask professors/tutors ask for volunteers using studi-replies@math.fu-berlin.de To develop a whiteboard for DPP, iterative by prototypes 32
Concept and timetable April 1 st week if necesary, finishing left over work creating questionnaires and exercises rest of April with semester start some students should be using Saros helping installing and using Saros getting feedback and evaluate questionnaires searching and comparing literature further planning, maybe TDD To develop a whiteboard for DPP, iterative by prototypes 33
Concept and timetable Mai continue iterative prototyping and refining if there is time to implement and evaluate optional requirements extract a standalone Saros version (optional) or at least finding out necessary steps reading, reading, reading June start writing thesis Note: tight calculation, but there is a month left at the end To develop a whiteboard for DPP, iterative by prototypes 34
Questions and comments To develop a whiteboard for DPP, iterative by prototypes 35
Viele Dank! To develop a whiteboard for DPP, iterative by prototypes 36
Sources english and german wikipedia google search (especially for whiteboards and distributed whiteboards) www.w3c.org www.w3.org/graphics/svg/ www.eclipse.org/gef/ www.eclipse.org/gmf/ Thesis: Model-based User Interface Design, Traetteberg, Norwegian University of Science and Technology, 2002 Work on TDD by Bettina Selig http://www.inf.fu-berlin.de/inst/ag-se/teaching/s-agile- 2004/ausarbeitungen/Bettina_Selig_TDD-Ausarbeitung.pdf http://xmpp.org/extensions/inbox/whiteboard2.html http://xmlgraphics.apache.org/batik/ https://svgsalamander.dev.java.net/ various whiteboard sites and whiteboard examples To develop a whiteboard for DPP, iterative by prototypes 37