Software Language Design & Engineering

Software LanguageDesign & Engineering Eelco Visser http://eelcovisser.org Zürich, May 12, 2011

Software EngineeringProblem MachineDomain bridging the gap between problem domain and solution domain

High-Level LanguagesProblem HLL MachineDomain HLLs reduce gap

Domain-Speciﬁc LanguagesProblem DSL HLL MachineDomain domain-speciﬁc languages support more specialization

Domain-Speciﬁc Languages Even Higher- Level LanguagesProblem DSL HLL MachineDomain domain-speciﬁc languages support more specialization

Software Language Design & Engineeringenable software engineers toeffectively design, implement, and apply domain-speciﬁc software languages

Research: Software Language Design Systematically design domain- speciﬁc software languages with optimal tradeoff between expressivity,completeness, portability, coverage, and maintainability

Expressivity vs Coverageexpressivity: fewer irrelevant details => concisenesscoverage: which portion of domain can we express

Software Language Design Case Studies Mobl: client-side stateful web applicationsWebDSL: server-side restful web applications

http://www.mobl-lang.orgZef Hemel

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

Convergence in Mobile PlatformWebkit browser Webkit browserWebkit browser Webkit browser

The Universal Userinterface Engine

Mobile Web Architecture

Rich Applications Audio WebDatabases Full-screen supportLocation information (GPS) Ofﬂine support Canvas Accelerator support Multi-touch

Native Applications Address book Camera Compass File IO Notiﬁcations

Software Engineering with JavaScriptannotated HTML imperative Javascript MVC, No Integration, No Abstraction, Accidental Complexity

typed declarativeintegrated concise

Web Application with Touch

Portable Applications

Mobl Architecture

tipcalculator.moblapplication tipcalculatorimport mobl::ui::genericscreen 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()}

Model-View Pattern

Task Manager

Data Modelentity 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

Logicentity 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

Reactive User Interfacesscreen 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) } } }}

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

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

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

Continuationsscreen 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: Tabcontrol 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")}

Tab Set: Higher-Order Controlcontrol 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

User Interface Idiom: Master Detailcontrol 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 Controlcontrol 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)}

Mobl Applications

GR8 Conference Program

mPodder

Kenhttp://itsneh.com/ken/

Mobl IDEstatic cross-concern consistency checking

Research: Software Language Engineering Automatically derive efﬁcient,scalable, incremental compiler + usable IDE from high-level, declarativelanguage deﬁnition

The Spoofax Language Workbenchcreating full featured IDEs for domain-speciﬁc languages

The Spoofax Language Workbenchan IDE for developing languages and their IDEs

The Spoofax Language Workbench Integrated Language Deﬁnition Testing

Syntax Deﬁnitionmodule MoBL-Dataimports Common MoBLexports context-free syntax MetaAnno* "entity" QId ":" Type "{" Property* "}" -> Definition {cons("Entity")} MetaAnno* "entity" QId "{" Property* "}" -> Definition {cons("EntityNoSuper")} MetaAnno* ID ":" Type "(" {Anno ","}* ")" -> Property {cons("Property")} MetaAnno* ID ":" Type -> Property {cons("PropertyNoAnnos")} ID -> Anno {cons("SimpleAnno")} "inverse" ":" ID -> Anno {cons("InverseAnno")} context-free syntax "@sync" UriPath -> MetaAnno {cons("SyncEntityAnno")}

Type Checkingrules constraint-error : t@SimpleType(_) -> (t, $[Type is not defined: [<pp-mobl-type> t]]) where not(<lookup-type> t) constraint-error : t@FieldAccess(e, x) -> (t, $[Property [x] not defined]) where <type-of> e where not(type-of)

Code Generationrules property-to-js(|ent) : Property(_, x, t@SimpleType(_), anno*) -> $[[x]: [sqlType]] where not(<is-entity-type> t) with sqlType := <sql-type> t ; if [_] := <filter(?SimpleAnno("searchable"))> anno* then rules ( SearchableProperties :+= (ent, x) ) end

Software Language Design & Engineering http://eelcovisser.orgLanguage Design as Engineering Discipline http://spoofax.org (More) Declarative Language Deﬁnition http://mobl-lang.org Static Analysis of Language Deﬁnitions http://webdsl.org Language Workbench in the Cloud http://researchr.orghttp://researchr.org/search/publication/mobl+spoofax+webdsl

Software Language Design & Engineering

by Eelco Visser on May 12, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 8

Statistics

Software Language Design & Engineering — Presentation Transcript