1. University of British Columbia Software Practices Lab Presentation Techniques for more Expressive Programs Andrew Eisenberg PhD Oral Defense

2. 2 Brett is a programmer I need the mean of a bunch of integers

3. 3 The program Brett intends to write

4. 4 The program in Java public double mean(List x) { int sum = 0; for (int i : x) { sum += i; } return sum / x.size(); }

5. 5 Ducky is a programmer public double mean(List x) { int sum = 0; for (int i : x) { sum += i; } return sum / x.size(); } What does this mean?

6. 6 Another Program

7. 7 What does this mean? Intended Meaning Perceived Meaning

8. 8 Expressive programs An expressive program is one where its perceived meaning reliably aligns with its intended meaning. public double mean(List x) { int sum = 0; for (int i : x) { sum += i; } return sum / x.size(); }

9. 9 Expressiveness Many things affect a program’s expressiveness –language features –abstraction techniques –naming conventions …and… – presentation

10. 10 Using presentation for more expressive programs Need a different kind of editor Is this feasible? Architecture? Capabilities? Kinds of programs?

11. 11 Thesis statement Program editors that can present programs using a non-surjective relationship to the concrete syntax enable a set of presentation techniques that are natural alternatives to existing language design, editor design, and programming best-practices techniques. Careful use of these presentation techniques appears to lead to more expressive programs.

12. 12 Argument structure 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

13. 13 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

14. 14 Architecture is Feasible Composable Presentation Editor Architecture Two implementations –ETMOP (Edit time metaobject protocol) Open, extensible editor Presentation extensions –Embedded CAL Closed, domain specific editor Embeds a small language in a host language Developed at Business Objects Now part of CAL open source distribution

15. 15 ETMOP @Getter("get") @Setter("set") private int x; @Previous private int y; Edit time Metaobject protocol (ETMOP) editor provides editing semantics Compile time Metobject protocol (CTMOP) provides execution semantics @Getter("get") @Setter("set") private int x; public int getX() { return x; } public void setX(int x) { this.x = x; } @Previous private int y; public int getY() { return y; } public void setY(int y) { this.y = y; } Presentation Extensions

16. 16 Equation Editing

17. 17 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

18. 18 Presentation Techniques Spatial arrangement Textual manipulation Temporal referencing Graphical enhancements Constrained editing public @After(value="changes(p)") void changesAdvice(Point p){ Screen.logDistanceFromOrigin(p); } @Pointcut("this(p) && execution(void Point.set*(int))") void changes(Point p){}

19. 19 Architecture enables Presentation techniques Example:

20. 20 Parse & Apply metadata @Getter("get") private int x; @Previous private int y; Program AST + Metadata Metadata is shared between field declarations @Getter("get") private int x; @Previous private int y;

21. 21 Logical Layout Program AST + Metadata Logical Layout @Getter("get") private int x; @Previous private int y;

22. 22 Physical Layout Program AST + Metadata Logical Layout @Getter("get") private int x; @Previous private int y; Physical Layout

23. 23 Source ↔ Presentation Program AST + Metadata Logical Layout @Getter("get") private int x; @Previous private int y; Physical Layout “ get ” gets shunted around allows spatial arrangement (other presentation techniques as well)

24. 24 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

25. 25 Establish editor & language properties Abstraction in computer programs –Polymorphism –Inheritance –Functional abstraction … – Graphical enhancements Example: Defining webservices

26. 26 Webservices are verbose public class HelloService { public String sayHello(String username) { return "Hello "+username+"!!!"; } public String sayHelloDocument(String username) { System.out.println(username+" said hello!!!"); } RPC over internet Implementation (Java) WSDL service descriptor (XML)

27. 27

28. 28 Java annotations as abstraction mechanism JSR 181 –specification –defines Webservices as annotations in Java code –pre-processor converts to WSDL @WebService( name="HelloWebService", targetNamespace= "http://example.org/wsm/10/2004/SimpleExampleService") @SOAPBinding(style=SOAPBinding.Style.RPC, use=SOAPBinding.Use.LITERAL) public class HelloService { @WebMethod(action="urn:sayHello") @WebResult(name="greetings") public String sayHello( @WebParam(name="username") String username) { return "Hello "+username+"!!!"; } @WebMethod(action="urn:sayHelloDocument") @OneWay @SOAPBinding(style=SOAPBinding.Style.DOCUMENT, use=SOAPBinding.Use.LITERAL) public String sayHelloDocument( @WebParam(name="username") String username) { System.out.println(username+" said hello!!!"); } Webservice concern is tangled with Java concern Presentation techniques provide alternative abstraction mechanism

29. 29 Graphical Abstraction

30. 30 Abstraction: Metadata vs. Graphical @WebService(name=“HelloWebService", targetNamespace= "http://example.org/wsm/10/2004/SimpleExamp leService") @SOAPBinding(style=SOAPBinding.Style.RPC, use=SOAPBinding.Use.LITERAL) public class HelloService { @WebMethod(action="urn:sayHello") @WebResult(name="greetings") public String sayHello( @WebParam(name="username") String username) { return "Hello "+username+"!!!"; } @WebMethod(action="urn:sayHelloDocument") @OneWay @SOAPBinding(style= SOAPBinding.Style.DOCUMENT, use=SOAPBinding.Use.LITERAL) public String sayHelloDocument( @WebParam(name="username") String username) { System.out.println(username + " said hello!!!"); } Metadata: all text Graphical: Java implementation is clear icons emphasize structure stored form is text

31. 31 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

32. 32 Ideas are expressed What is the perceived meaning of this program?

33. 33 This is a Java class… I see icons that indicate a Webservice Perceived meaning This is likely to be a Java class that implements a webservice.

34. 34 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning

35. 35 More expressive Recall: An expressive program is one in which the perceived meaning reliably aligns with the intended meaning.

36. 36 @WebService(name=“HelloWebService", targetNamespace= "http://example.org/wsm/10/2004/SimpleExamp leService") @SOAPBinding(style=SOAPBinding.Style.RPC, use=SOAPBinding.Use.LITERAL) public class HelloService { @WebMethod(action="urn:sayHello") @WebResult(name="greetings") public String sayHello( @WebParam(name="username") String username) { return "Hello "+username+"!!!"; } @WebMethod(action="urn:sayHelloDocument") @OneWay @SOAPBinding(style= SOAPBinding.Style.DOCUMENT, use=SOAPBinding.Use.LITERAL) public String sayHelloDocument( @WebParam(name="username") String username) { System.out.println(username + " said hello!!!"); } Intended meaning This is a Java class that implements a Webservice Intended and Perceived meanings align a bit I can see webservice annotations, but it is hard to read the Java implementation

37. 37 Intended meaning Intended and Perceived meanings align  More expressive This is a program about Java class that implements a Webservice

38. 38 Alternative Presentation (Mockup) This is a program about Java class that implements a Webservice

39. 39 Intended and Perceived meanings do not align  Alternative Perceived Meaning This looks like a webservice Less expressive I can see the structure of the Webservice But how is it implemented? This is a program about Java class that implements a Webservice

40. 40 Perceived meaning Intended and Perceived meanings do not align  This is likely to be a Java class that implements a webservice. X Less expressive

41. 41 Summary of claims Editors that enable a set of presentation techniques are feasible to implement. –Architecture & two implementations These presentation techniques are alternatives to standard programming language and editor techniques. –Graphical abstraction Proper use of these techniques make programs more expressive. –Presenting webservices

42. 42 Open Questions Are these presentations useful? –feasibility of implementing editors –properties of programs –user study Definition of expressiveness –qualitative, not quantitative –does not allow absolute analysis –can be used comparatively

43. 43 Related Work Editor architectures –Traditional (Emacs, vi) –Hard structure Cornell Program Synthesizer [Teitelbaum 81] Interlisp-D [Barstow 81] –Soft structure (Eclipse, Visual Studio, NetBeans) –Display-oriented DrScheme [Findler 97] MPS [Dmitriev 04] Domain Workbench [Simonyi 06] Smalltalk [Goldberg 83] Expressiveness through language extension –Syntax Macros [Leavenworth 66] –Attribute grammars [Kennedy 76] –Syntactic stylesheets [Edwards 05] –Metaobject protocols [Kiczales 91] Expressiveness through Multi-lingual programming –Embedding syntax [Bravenboer 04] –Common runtime environments [Meijer 00] –Pipelines [Garlan 93] –Service-oriented architecture [Newcomer 04]

44. 44 Related Work Editor architectures –Traditional (Emacs, vi) –Soft structure (Eclipse, Visual Studio, NetBeans) Language extension mechanisms

45. 45 Soft-structure editors Bijection Surjection package ca.ubc.ships; public class Ship { private int x; private int y; public int getX() { return x; } public int getY() { return y; } public void setX(int x) { this.x = x; } public void setY(int y) { this.y = y; }

46. 46 Composable Presentation editors Can copy, rearrange, remove elements Non-Surjection @Getter("get") private int x; @Previous private int y;

47. 47 Related Work Editor architectures –Traditional (Emacs, vi) –Soft structure (Eclipse, Visual Studio, NetBeans) –Display-driven DrScheme [Findler 97] MPS [Dmitriev 04] Domain Workbench [Simonyi 06] Language extension mechanisms –Syntax Macros [Leavenworth 66] –Syntactic Stylesheets [Edwards 05]

48. 48 Contributions Composable presentation editor architecture Set of presentation techniques Qualitative framework for evaluating expressiveness of programs Analysis of how presentation techniques compare to other kinds of techniques ETMOP-CTMOP –open, extensible editor & semantic processor –set of examples Embedded CAL –closed, domain specific editor

49. 49 1. Architecture (is feasible) 2. Presentation Techniques 3. Various Editor and language properties 4. Higher Level ideas 5. More Expressive Enables Establish Express When aligned with intended meaning Thank you!

50. 50 Extra Material

51. 51 Temporal Referencing Sum of constants must be 100

52. 52 Life cycles in jEdit

53. 53 Services in jEdit

54. 54 HandlesMessage in jEdit

55. 55 Quasiquote in Java

56. 56 Graphics establish scoping Finite automaton

57. 57 Architecture

58. 58 Embedded CAL Architecture

59. 59 Embedded CAL Embed CAL in Java using editor technology CAL Lazy functional language Statically typed Haskell-like semantics Java byte-code

60. 60 Embedded CAL

61. 61 Embedded CAL (expanded)

62. 62