Software Language Design & Engineering: Mobl & Spoofax

Software LanguageDesign & Engineering Eelco Visser http://eelcovisser.org Microsoft Research, Redmond October 20, 2011

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

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

Domain-Speciﬁc 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 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

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

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

Two Talks Declaratively Programming the Mobile Web with MoblThe Spoofax Language Workbench

Declaratively Programmingthe Mobile Web with Mobl* Zef Hemel Eelco Visser http://zef.me http://eelcovisser.org * To appear: SPLASH/OOPSLA, October 2011, Portland

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

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.

typed declarative http://www.mobl-lang.orgintegrated 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))) } }}

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

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

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

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 Detailscreen root() { header("Tasks") masterDetail( Task.all() order by due desc, taskItem, taskDetail)}control taskItem(t : Task) { checkBox(t.done, label=t.name)}control taskDetail(t : Task) { textField(t.name) datePicker(t.due)}

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

Adaptive Layout

applications

Mobl Applications

GR8 Conference Program

mPodder

Kenhttp://itsneh.com/ken/

Mobl Summary❖ Linguistic integration ★ data model, user interface, styling, application logic❖ Domain abstractions ★ reduce accidental complexity, platform details❖ User-deﬁned abstractions ★ data binding ★ reactive programming ★ reusable controls❖ Model-View ★ automate the controller

Mobl IDE: Static Cross-Concern Consistency Checking Constructed on Spoofax Language Workbench

The Spoofax Language Workbench* Rules for Declarative Speciﬁcation of Languages and IDEs Lennart Kats Eelco Visser http://www.lclnet.nl http://eelcovisser.org * OOPSLA 2010

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

Language Deﬁnitions for CompilersSyntax deﬁnition★ concrete syntax★ abstract syntaxStatic semantics★ error checking★ name resolution★ type analysisModel-to-model transformation★ express constructs in core languageCode generation★ translate core language models to implementation

Editor Services for Modern IDEsSyntactic Editor Services★ syntax checking★ bracket matching★ syntax highlighting★ code folding★ outline viewSemantic Editor Services★ error checking★ reference resolving★ hover help★ code completion★ refactoring

Syntax Deﬁnition with SDF

Declarative Syntax Deﬁnitionlexical syntax [a-zA-Z_$][a-zA-Z0-9_]* -> IDcontext-free syntax STRING -> LimitedSetExp {cons("String")} NUMBER -> LimitedSetExp {cons("Num")} LimitedSetExp -> Exp QId -> LimitedExp {cons("Var")} "(" Exp ")" -> LimitedExp {cons("Brackets")} Exp BoolMethodId Exp -> Exp {cons("BinMethodCall"), left} Exp CompareMethodId Exp -> Exp {cons("BinMethodCall"), left} Exp TermOperatorMethodId Exp -> Exp {cons("BinMethodCall"), left} Exp OperatorMethodId Exp -> Exp {cons("BinMethodCall"), left}character-level grammars: integration of lexical and context-free syntax

An Interactive Language Workbenchdevelop and use language in same environment

Debugging Ambiguities

Declarative Disambiguationcontext-free priorities Exp "." ID -> LimitedExp> Exp "." ID "(" {NamedExp ","}* ")" -> LimitedExp> Exp TermOperatorMethodId Exp -> Exp> Exp OperatorMethodId Exp -> Exp> Exp CompareMethodId Exp -> Exp> Exp BoolMethodId Exp -> Exp> "!" Exp -> Exp> Exp "?" Exp ":" Exp -> Exp> LimitedExp Filter+ -> Exp

Parsing after Disambiguation

Natural and Flexible Error Recovery*permissive grammar + backtracking + region discovery [*OOPSLA & SLE 2009]

Transformation with Stratego

Syntactic Normalization and Desugaringrules normalize : FunctionNoReturnType(manno*, name, farg*, stat*) -> Function(manno*, name, farg*, SimpleType(QId("mobl", "void")), stat*) normalize : IfNoElse(e, block) -> If(e, block, Block([])) desugar : ForInferred(lvalue, e, elem*) -> For(lvalue, t, e, elem*) where GenericType(_, [t]) := <type-of> e

CPS Transformcps-lift-exprs : [Return(e)|stats] -> <concat>[stats2, [Return(e2)|<cps-lift-expressions> stats]] where not(<is-sync> e) with {| Exp : stats2 := <cps-lift-expression> e ; e2 := <Exp> |}

Type Analysiseq-type-of : String(_) -> SimpleType(QId("mobl", "String"))eq-type-of : FieldAccess(e, x) -> t where Property(_, _, t, _) := <lookup-property> (<type-of> e, x)

Type Checkingconstraint-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) origin tracking

Semantic Editor Serviceseditor-analyze: (ast, path, project-path) -> (ast2, errors, warnings, notes) with // ...editor-complete-proposal : SimpleType(COMPLETION(_)) -> proposals where all-types := <get-all-types>; proposals := <map(type-name-to-proposal); flatten-list> all-typeseditor-hover: (t@SimpleType(_), position, ast, path, project-path) -> <get-doc> <lookup-type> t2 where t2 := <lookup-node> (position, ast)editor-resolve: (t@SimpleType(qid), position, ast, path, project-path) -> target where target := <ensure-origin(lookup-type|qid)> t

Editor Services Bindingsmodule MoBL-Buildersimports MoBL-Builders.generatedbuilders provider : include/mobl.jar observer : editor-analyze on save : generate-artifacts builder : "Show ATerm" = generate-aterm (openeditor) (realtime) (meta) builder : "Format code" = format-code (openeditor) (realtime) builder : "Desugar" = editor-desugar (openeditor) (realtime) (meta) Connect transformations to IDE

Integrated Language Deﬁnition Testing*Includes testing of the editor services [* OOPSLA 2011]

Software Language Design & Engineering Linguistic abstraction: capture software knowledge in domain-speciﬁc languages http://spoofax.orgseparation of concerns + linguistic integration http://mobl-lang.org cross concern consistency checking http://webdsl.org early detection of 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

behind the scenes

synchronous programmingvar results = Task.all().list();for(var i = 0; i < results.length; i++) { alert(results[i].name);}

render page timequery database and process results ...

render page time query databasebrowser freeze and process results ...

render page send query time ...process query result ...

asynchronous programmingTask.all.list(function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } });...

Task.all().list(function(results) { alert("Hello, ");}); breaks sequentialalert("world!"); execution assumption

Task.all().list(function(results) { // make changes ... persistence.flush(function() { alert("Changes saved!"); });});

continuation-passing style transformation

Software Language Design & Engineering: Mobl & Spoofax

by Eelco Visser on Oct 22, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 302

Statistics

Software Language Design & Engineering: Mobl & Spoofax — Presentation Transcript