Eelco Visserhttp://eelcovisser.org

Linguistic Abstraction for the Web

Mountain ViewJune 8, 2011

Messages

Linguistic abstraction as software engineering tool

Web languages can be improved

bridging the gap between problem domain and solution domain

Software Engineering

ProblemDomain Machine

HLLs reduce gap

High-Level Languages

ProblemDomain HLL Machine

"A programming language is low level when its programs require attention to the irrelevant." Alan J. Perlis (1982)

domain-specific languages support more specialization

Domain-Specific Languages

ProblemDomain HLL MachineDSL

Software Language Design & Engineering

enable software engineers to effectively design, implement, and apply domain-specific

software languages

Research: Software Language Engineering

Automatically derive efficient, scalable, incremental compiler +

usable IDE from high-level,

declarative language definition

creating full featured IDEs for domain-specific languages

The Spoofax Language Workbench

Research: Software Language Design

Systematically design domain-

specific software languages with optimal tradeoff between expressivity,

completeness, portability, coverage, and maintainability

Software Language Design Case Studies

Mobl: client-side stateful web applications

WebDSL: server-side restful web applications

http://webdsl.org

Eelco Visser, Danny Groenewegen, et al.

browser server database

web app

Web Programming

code runs on server, browser, and database

browser server database

Java

Web Programming

SQLHTML, JS, CSS

Concerns in Web Programming

❖ Persistent data

★ data integrity

★ search

❖ User interface

★ data validation

★ styling, layout

★ navigation

★ actions

❖ Access control

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

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

When Seam Fails

Welcome #{user.name} Welcome #{user.nam}

When Rails Fails

@post = Post.new(params[:post])

@post = Post.new(params[:get])

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.

Separation of Concerns + Linguistic Integration

WebDSL Example

Model-View Pattern

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())}

Model

Automatic Persistence

Data Model

DB Schema

EntityClasses

WebDSLObject

JavaObject

DB Records

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; }}

View

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) { ... }

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

Template 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]" } } }

Page Definition

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!)

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" } } } }

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)) } }

View Composition

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> }

Native Interface

short demo: consistency checking

Integrated Development Environment

WebDSL Languages

Data Model

Logic

Templates (UI, Email, Service)

Access Control

Data Validation

Search

Collaborative Filtering

http://www.mobl-lang.org

Zef Hemel

Native Applications not Portable

Divergence in Mobile Platforms

Objective-C Java J2ME/C++

HTML/Javascript Java .NET

Convergence in Mobile Platform

Webkit browser

Webkit browser

Webkit browser

Webkit browser

The Universal Userinterface Engine

Mobile Web Architecture

Rich Applications

WebDatabases

Location information (GPS)

Canvas

Multi-touch

Offline support

Full-screen support

Accelerator support

Audio

Native Applications

Address book

Camera

Compass

File IO

Notifications

MVC, No Integration, No Abstraction, Accidental Complexity

Software Engineering with JavaScript

annotated HTML imperative Javascript

declarativetyped

integrated concise

Web Application with Touch

Portable Applications

Mobl Architecture

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()}

Task Manager

HTML5 Data Persistence

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)}

statically typed: catch errors early

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)); } }}

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) } } }}

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) } } }}

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) } } }}

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) } } }}

screen addTask() { var t = Task() header("Add") { button("Done", onclick={ add(t); screen return; }) } textField(t.name) datePicker(t.due)}

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) } } }}

Navigation

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)}

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")}

increase coverage: developers can create abstractions

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() } }}

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)}

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)}

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)}

Adaptive Layout

static cross-concern consistency checking

Mobl IDE

why do we need both?

Discussion

WebDSL vs Mobl

crucial difference: navigation models

http://researchr.org/search/publication/mobl+spoofax+webdsl

Linguistic Abstraction for the Web

http://spoofax.org

http://mobl-lang.org

http://webdsl.org

http://researchr.org

http://eelcovisser.org

separation of concerns + linguistic integration

cross concern consistency checking

early detection failures

Linguistic abstraction:capture software knowledge in

domain-specific languages

Language workbench: DSL design and implementation with less effort than

traditional language engineering