Download Presentation Techniques for more Expressive Programs

Presentation Techniques for
more Expressive Programs
Andrew Eisenberg
PhD Oral Defense
University of British Columbia
Software Practices Lab
Brett is a programmer
I need the mean of a
bunch of integers
2
The program Brett intends to write
1
size ( x)
size( x ) 1
 xi
i 0
3
The program in Java
public double mean(List<Integer> x) {
int sum = 0;
for (int i : x) {
sum += i;
}
return sum / x.size();
}
1
size ( x)
size( x ) 1
 xi
i 0
4
Ducky is a programmer
What does
this
mean?
public double mean(List<Integer> x) {
int sum = 0;
for (int i : x) {
sum += i;
}
return sum / x.size();
}
1
size ( x)
size( x ) 1
 xi
i 0
5
Another Program
1
size ( x)
size( x ) 1
 xi
i 0
6
Another Program
What does
this
mean?
Perceived Meaning
1
size ( x)
Intended Meaning
size( x ) 1
 xi
i 0
7
Expressive programs
1
size ( x)
size( x ) 1
 xi
i 0
public double mean(List<Integer> x) {
int sum = 0;
for (int i : x) {
sum += i;
}
return sum / x.size();
}
An expressive program is one where its
perceived meaning reliably aligns with its
intended meaning.
8
Expressiveness
• Many things affect a program’s
expressiveness
– language features
– abstraction techniques
– naming conventions
…and…
– presentation
9
Using presentation for more
expressive programs
• Need a different kind of editor
• Is this feasible?
• Architecture?
• Capabilities?
• Kinds of programs?
10
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.
11
Argument structure
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
12
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
13
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
14
ETMOP
@Getter("get")
@Setter("set")
private int x;
Presentation@Getter("get")
Extensions @Setter("set")
private int x;
public int getX() { return x; }
public void setX(int x) { this.x = x; }
@Previous
@Previous
private int y;
private int y;
public int getY() { return y; }
public void setY(int y) { this.y = y; }
Edit time Metaobject protocol
(ETMOP) editor
provides editing semantics
Compile time Metobject protocol
(CTMOP)
provides execution semantics
15
Equation Editing
16
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
17
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){}
18
Architecture enables Presentation
techniques
Example:
19
Parse & Apply metadata
Program
AST +
Metadata
@Getter("get")
@Getter("get")
private int x;
@Previous
private int Getter
x;
field x:
private int y;
@Previous
Metadata:
get
private int y;
@Getter(“get”)
private
int
x
private
int
y
field y:
@Previous
Metadata is shared between field declarations
20
Logical Layout
Program
@Getter("get")
private int x;
@Previous
private int y;
AST +
Logical
Metadata
Layout
field x:
Getter
Metadata:
get
@Getter(“get”)
int
x
private
int
y
field y:
@Getter(“get”)
row
private
column
row
private
int
x;
row
private
int
y;
L
i
n
e
Getter:
get
21
Physical Layout
Program
AST +
Logical
Physical
Metadata
Layout
Layout
row
@Getter("get")
private int x;
@Previous
private int y;
field x:
Getter
Metadata:
get
@Getter(“get”)
private
int
x
field y:
@Getter(“get”)
private
int
column
row
private
int
x;
row
private
int
y;
L
i
n
e
Getter:
get
y
22
Source ↔ Presentation
Program
AST +
Logical
Physical
Metadata
Layout
Layout
row
@Getter("get")
private int x;
@Previous
private int y;
field x:
Getter
Metadata:
get
@Getter(“get”)
private
int
x
field y:
@Getter(“get”)
private
int
column
row
private
int
x;
row
private
int
y;
L
i
n
e
Getter:
get
y
• “get” gets shunted around
• allows spatial arrangement
• (other presentation techniques as well)
23
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
24
Establish editor & language properties
• Abstraction in computer programs
– Polymorphism
– Inheritance
– Functional abstraction
…
– Graphical enhancements
Example: Defining webservices
25
Webservices are verbose
public class HelloService {
version="1.0" encoding="utf-8"?> <definitions
public <?xml
String
sayHello(String username) {
xmlns="http://schemas.xmlsoap.org/wsdl/"
xmlns:tns="http://example.org/wsm/10/2004/SimpleES"
xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
return
"Hello "+username+"!!!";
targetNamespace="http://example.org/wsm/10/2004/SimpleES"
}
xmlns:xsd="http://www.w3.org/2001/XMLSchema"> <types> <xsd:schema
targetNamespace="http://example.org/wsm/10/2004/SimpleES"> <xsd:element
name="sayHello"> <xsd:complexType> <xsd:sequence> <xsd:element name="username"
type="xsd:string" minOccurs="0"/> </xsd:sequence> </xsd:complexType> </xsd:element>
<xsd:element name="greetings"> <xsd:complexType> <xsd:sequence> <xsd:element
name="greetings" type="xsd:string" minOccurs="0"/> </xsd:sequence> </xsd:complexType>
</xsd:element> <xsd:element name="sayHelloDocument"> <xsd:complexType> <xsd:sequence>
<xsd:element name="username" type="xsd:string" minOccurs="0"/> </xsd:sequence>
</xsd:complexType> </xsd:element> </xsd:schema> </types> <message name="sayHello">
<part name="username" element="tns:sayHello"/> </message> <message name="greetings">
<part name="username" element="tns:greetings"/> </message> <message
name="sayHelloDocument"> <part name="username" element="tns:sayHelloDocument"/>
</message> <portType name="SimpleExampleService"> <operation name="sayHello"> <input
message="tns:sayHello"/> <output message="tns:greetings"/> </operation> <operation
name="sayHelloDocument"> <input message="tns:sayHelloDocument"/> </operation>
</portType> <binding name="SimpleExampleServiceSoapHttp"
type="tns:SimpleExampleService"> <soap:binding
transport="http://schemas.xmlsoap.org/soap/http" style="rpc"/> <operation
name="sayHello"> <soap:operation soapAction="urn:sayHello" style="rpc"/> <input>
<soap:body use="literal" namespace="http://example.org/wsm/10/2004/SimpleES"/>
</input> <output> <soap:body use="literal"
namespace="http://example.org/wsm/10/2004/SimpleES"/> </output> </operation>
<operation name="sayHelloDocument"> <soap:operation soapAction="urn:sayHelloDocument"
style="document"/> <input> <soap:body use="literal"/> </input> </operation>
</binding> <service name="SimpleExampleWebService"> <port
name="SimpleExampleServiceSoapHttp" binding="tns:SimpleExampleServiceSoapHttp">
<soap:address /> </port> </service> </definitions>
public String sayHelloDocument(String username) {
System.out.println(username+" said hello!!!");
}
}
• RPC over internet
• Implementation (Java)
• WSDL service descriptor (XML)
26
Java annotations as abstraction
mechanism
@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+"!!!";
}
• JSR 181
– specification
– defines Webservices as annotations in Java
code
– pre-processor
converts
WSDL
Webservice
concern
is tangledtowith
Java concern
Presentation techniques provide alternative
@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!!!");
}
abstraction mechanism
}
28
Graphical Abstraction
29
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
30
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
31
Ideas are expressed
What is the perceived meaning of this program?
32
Perceived meaning
This is likely to be a
This is a Java class…
Java class that
I see icons that indicate
implements a
a Webservice
webservice.
33
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
34
More expressive
Recall:
An expressive program is one in which the
perceived meaning reliably aligns with
the intended meaning.
35
Intended meaning
This is a program about
Java class that
implements a
Webservice
Intended and Perceived
meanings align 
More expressive
37
Alternative Presentation
This is a program about
Java class that
implements a
Webservice
(Mockup)
38
Alternative Perceived I Meaning
can see the
This is a program about
Java class that
This
Butlooks
how like
is it a
structure of the
implemented?
webservice
Webservice
implements a
Webservice
Intended and Perceived
meanings do not align 
Less expressive
39
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
41
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
42
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]
43
Related Work
• Editor architectures
– Traditional (Emacs, vi)
– Soft structure (Eclipse, Visual Studio,
NetBeans)
• Language extension mechanisms
44
Soft-structure editors
Bijection
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;
}
Surjection
}
45
Composable Presentation editors
Non-Surjection
@Getter("get")
private int x;
@Previous
private int y;
Can copy, rearrange, remove elements
46
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]
47
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
48
Thank you!
5. More Expressive
When aligned with intended meaning
4. Higher Level ideas
Express
3. Various Editor and
language properties
Establish
2. Presentation Techniques
Enables
1. Architecture (is feasible)
49
Extra Material
50
Temporal Referencing
Sum of constants must be 100
51
Life cycles in jEdit
52
Services in jEdit
53
HandlesMessage in jEdit
54
Quasiquote in Java
55
Graphics establish scoping
• Finite automaton
56
Architecture
Controllers
Event Handlers
Program
Program +
Metadata
(Model)
Display
Serialize
Logical
Layout
(Model)
Render
Physical
Layout
(View)
57
Embedded CAL Architecture
58
Embedded CAL
Embed CAL in Java using editor technology
CAL
• Lazy functional language
• Statically typed
• Haskell-like semantics
• Java byte-code
59
Embedded CAL
60
Embedded CAL (expanded)
61
62