Slides used in TechTalk at Google Mountain View on June 8, 2011

1. Linguistic Abstraction for the Web
Eelco Visser
http://eelcovisser.org
Mountain View
June 8, 2011

2. Messages
Linguistic abstraction as software engineering tool
Web languages can be improved

3. Software Engineering
Problem
Machine
Domain
bridging the gap between problem domain and solution domain

4. High-Level Languages
Problem
HLL Machine
Domain
"A programming language is low level when its programs
require attention to the irrelevant." Alan J. Perlis (1982)
HLLs reduce gap

5. Domain-Specific Languages
Problem
DSL HLL Machine
Domain
domain-specific languages support more specialization

6. Software Language Design & Engineering
enable software engineers to
effectively design, implement,
and apply domain-specific
software languages

7. Research: Software Language Engineering
Automatically derive efficient,
scalable, incremental compiler +
usable IDE from high-level,
declarativelanguage
definition

8. The Spoofax Language Workbench
creating full featured IDEs for domain-specific languages

9. Research: Software Language Design
Systematically design domain-
specific software
languages with optimal
tradeoff between expressivity,
completeness, portability, coverage, and
maintainability

10. Software Language Design Case Studies
Mobl: client-side stateful web applications
WebDSL: server-side restful web applications

11. http://webdsl.org
Eelco Visser, Danny Groenewegen, et al.

12. Web Programming
browser server database
web app

13. Web Programming
browser server database
HTML,
Java SQL
JS, CSS
code runs on server, browser, and database

14. Concerns in Web Programming
❖ Persistent data
★ data integrity
★ search
❖ User interface
★ data validation
★ styling, layout
★ navigation
★ actions
❖ Access control

15. Separation of Concerns in Web Programming
Example
❖ Data modeling
★ Java classes with JPA annotations
❖ User interface
★ Java ServerFaces XML templates
★ Seam Java classes
❖ Access control
★ Acegi configuration/annotation

16. Problems in Web Programming
❖ Lack of integration
★ no cross language/concern consistency checking
★ leads to late (detection of) failures
❖ Low-level encoding
★ leads to boilerplate code

17. When Seam Fails
Welcome #{user.name} Welcome #{user.nam}

18. When Rails Fails
@post = Post.new(params[:get])
@post = Post.new(params[:post])

19. Late Failures in Web Applications
Zef Hemel, Danny M. Groenewegen, Lennart C. L. Kats, Eelco Visser.
Static consistency checking of web applications with WebDSL. Journal of
Symbolic Computation, 46(2):150-182, 2011.

20. Separation of Concerns
+ Linguistic Integration

21. WebDSL Example

22. Model-View Pattern

23. Model

24. Model
entity Blog {
key :: String (id)
title :: String (name)
posts -> Set<Post> (inverse=Post.blog)
}
entity Post {
key :: String (id)
title :: String (name, searchable)
content :: WikiText (searchable)
blog -> Blog
created :: DateTime (default=now())
modified :: DateTime (default=now())
}

25. Automatic Persistence
Data Entity DB
Model Classes Schema
WebDSL Java DB
Object Object Records

26. Logic
entity Blog {
key :: String (id)
title :: String (name)
posts -> Set<Post> (inverse=Post.blog)
function recentPosts(index: Int, n: Int): List<Post> {
var i := max(1,index) - 1;
return [p | p: Post in posts
order by p.created desc limit n offset i*n].list();
}
function newPost(): Post {
var p := Post{ title := "No Title" blog := this };
p.key := p.id.toString();
return p;
}
}

27. View

28. Page Definition
define page blog(b: Blog, index: Int) {
main(b){
for(p: Post in b.recentPosts(index,5)) { showPost(p) }
}
}
define showPost(p: Post) { ... }
define page post(p: Post) { ... }

29. Template Definition
define page blog(b: Blog, index: Int) { ... }
define showPost(p: Post) {
section{
header{ navigate post(p) { output(p.title) } }
par{ output(p.content) }
par{ output(p.created.format("MMMM d, yyyy")) }
}
}
define page post(p: Post) { ... }
Navigate = Deferred Page Call

30. Page Definition
define page blog(b: Blog, index: Int) { ... }
define showPost(p: Post) { ... }
define page post(p: Post) {
main(p.blog){
showPost(p)
navigate editpost(p) { "[Edit]" }
}
}

31. Forms & Data Binding
define page post(p: Post) { ... }
define page editpost(p: Post) {
action save() {
return post(p); }
main(p.blog){
form{
formEntry("Title"){
input(p.title) }
formEntry("Content") {
input(p.content) }
formEntry("Posted") {
input(p.created) }
submit save() { "Save" }
}
}
}
(Look Ma, No Controller!)

32. Type-Directed Input
define page post(p: Post) { ... }
define page editpost(p: Post) {
action save() {
return post(p); }
main(p.blog){
form{
formEntry("Title"){
input(p.title) }
formEntry("Content") {
input(p.content) }
formEntry("Posted") {
input(p.created) }
submit save() { "Save" }
}
}
}

33. View Composition
define sidebar(b: Blog) {
list{
listitem{ navigate blog(b,1) { "Home" } }
listitem{
submitlink action{ return editpost(b.newPost()); } {
"[New Post]" } }
}
section{
header{"Recent Posts"}
output(b.recentPosts(1,10))
}
}

34. Native Interface
define main(b: Blog) {
includeCSS("style.css")
<div id="outercontainer">
<div id="container">
<div id="sidebar">sidebar(b)</div>
<div id="contents">elements</div>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
}

35. Integrated Development Environment
short demo: consistency checking

36. WebDSL Languages
Data Model
Logic
Templates
(UI, Email, Service)
Access Control
Data Validation
Search
Collaborative Filtering

37. http://www.mobl-lang.org
Zef Hemel

38. Divergence in Mobile Platforms
Objective-C Java J2ME/C++
HTML/Javascript Java .NET
Native Applications not Portable

39. Convergence in Mobile Platform
Webkit browser Webkit browser
Webkit browser Webkit browser

40. The Universal Userinterface Engine

41. Mobile Web Architecture

42. Rich Applications
Audio
WebDatabases
Full-screen support
Location information (GPS)
Offline support
Canvas
Accelerator support
Multi-touch

43. Native Applications
Address book
Camera
Compass
File IO
Notifications

44. Software Engineering with JavaScript
annotated HTML imperative Javascript
MVC, No Integration, No Abstraction, Accidental Complexity

45. typed declarative
integrated concise

46. Web Application with Touch

47. Portable Applications

48. Mobl Architecture

49. tipcalculator.mobl
application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 20
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(Math.round(amount * (1 + percentage/100))) }
}
nl()
}

50. Task Manager

51. Data Model
entity Task {
name : String (searchable)
done : Bool
due : DateTime
category : Category (inverse: tasks)
tags : Collection<Tag> (inverse: tasks)
}
entity Category {
name : String
tasks : Collection<Task> (inverse: category)
}
entity Tag {
name : String
tasks : Collection<Task> (inverse: tags)
}
HTML5 Data Persistence

52. Logic
entity Task {
name : String (searchable)
done : Bool
due : DateTime
category : Category (inverse: tasks)
tags : Collection<Tag> (inverse: tasks)
function postpone(days : Num) {
this.due = DateTime.create(
this.due.getFullYear(),
this.due.getMonth(),
this.due.getDate() + days);
}
function import(user : String, pw : String) {
var tasksJSON = httpRequest("/export?user="+ user + "&pw=" + pw);
foreach(t in tasksJSON) {
add(Task.fromSelectJSON(t));
}
}
}
statically typed: catch errors early

53. Reactive User Interfaces
screen root() {
var phrase = ""
header("Tasks") {
button("Add", onclick={ addTask(); })
}
searchBox(phrase)
group {
list(t in Task.search(phrase) limit 20){
item {
checkBox(t.done, label=t.name)
}
}
}
}

54. Reactive User Interfaces
screen root() {
var phrase = ""
header("Tasks") {
button("Add", onclick={ addTask(); })
}
searchBox(phrase)
group {
list(t in Task.search(phrase) limit 20){
item {
checkBox(t.done, label=t.name)
}
}
}
}

55. Navigation
screen root() {
var phrase = ""
header("Tasks") {
button("Add", onclick={ addTask(); })
}
searchBox(phrase)
group {
list(t in Task.search(phrase) limit 20){
item {
checkBox(t.done, label=t.name)
}
}
}
}

56. Navigation
screen root() { {
addTask()
var phrase = ""
t = Task()
header("Add") {
header("Tasks") {
button("Done", onclick={
button("Add", onclick={ addTask(); })
} add(t);
searchBox(phrase)
screen return;
group {
})
} list(t in Task.search(phrase) limit 20){
textField(t.name)
item {
datePicker(t.due)
checkBox(t.done, label=t.name)
} }
}
}
}

57. Navigation
screen root() {
var phrase = ""
header("Tasks") {
button("Add", onclick={ addTask(); })
}
searchBox(phrase)
group {
list(t in Task.search(phrase) limit 20){
item {
checkBox(t.done, label=t.name)
}
}
}
}

58. Continuations
screen root() {
button("Ask", onclick={
alert("Hello " + prompt("First name") + " "
+ prompt("Last name"));
})
}
screen prompt(question : String) : String {
var answer = ""
header(question) {
button("Done", onclick={
screen return answer;
})
}
textField(answer)
}

59. User Interface Idiom: Tab
control tab1() {
header("Tab 1")
label("This is tab 1")
}
control tab2() {
header("Tab 2")
label("This is tab 2")
}
screen root() {
tabSet([("One", tab1), ("Two", tab2)],
defaultTab="One")
}

60. Tab Set: Higher-Order Control
control tabSet(tabs : [(String,Control)], activeTab : String) {
list((tabName, tabControl) in tabs) {
block(onclick={ activeTab = tabName; },
style=activeTab==tabName ?
activeTabButton : inactiveTabButton) {
label(tabName)
}
}
list((tabName, tabControl) in tabs) {
block(activeTab==tabName ? visibleTab : invisibleTab) {
tabControl()
}
}
}
increase coverage: developers can create abstractions

61. User Interface Idiom: Master Detail
control taskItem(t : Task) {
checkBox(t.done, label=t.name)
}
control taskDetail(t : Task) {
textField(t.name)
datePicker(t.due)
}
screen root() {
header("Tasks")
masterDetail(Task.all() order by due desc,
taskItem, taskDetail)
}

62. User Interface Idiom: Master Detail
control taskItem(t : Task) {
checkBox(t.done, label=t.name)
}
control taskDetail(t : Task) {
textField(t.name)
datePicker(t.due)
}
screen root() {
header("Tasks")
masterDetail(Task.all() order by due desc,
taskItem, taskDetail)
}

63. Master Detail: Higher-Order Control
control masterDetail(items : Collection<?>, masterItem : Control1<?>,
detail : Control1<?>) {
group {
list(it in items) {
item(onclick={ detailScreen(it,detail); }) {
masterItem(it)
}
}
}
}
screen detailScreen(it : ?, detail : Control1<?>) {
header("Detail") { backButton() }
detail(it)
}

64. Adaptive Layout

65. Mobl IDE
static cross-concern consistency checking

66. Discussion
WebDSL vs Mobl
crucial difference: navigation models
why do we need both?

67. Linguistic Abstraction for the Web
Linguistic abstraction:
capture software knowledge in
domain-specific languages http://spoofax.org
separation of concerns + linguistic integration http://mobl-lang.org
cross concern consistency checking http://webdsl.org
early detection failures http://researchr.org
Language workbench: DSL design and http://eelcovisser.org
implementation with less effort than
traditional language engineering
http://researchr.org/search/publication/mobl+spoofax+webdsl