Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Software Language Design & Engineering

1,380 views

Published on

Slides for a talk at Faculty Summit 2011 at Google Zurich about software language design and engineering, with mobl as big example.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Software Language Design & Engineering

  1. 1. Software LanguageDesign & Engineering Eelco Visser http://eelcovisser.org Zürich, May 12, 2011
  2. 2. Software EngineeringProblem MachineDomain bridging the gap between problem domain and solution domain
  3. 3. High-Level LanguagesProblem HLL MachineDomain HLLs reduce gap
  4. 4. Domain-Specific LanguagesProblem DSL HLL MachineDomain domain-specific languages support more specialization
  5. 5. Domain-Specific Languages Even Higher- Level LanguagesProblem DSL HLL MachineDomain domain-specific languages support more specialization
  6. 6. Software Language Design & Engineeringenable software engineers toeffectively design, implement, and apply domain-specific software languages
  7. 7. Research: Software Language Design Systematically design domain- specific software languages with optimal tradeoff between expressivity,completeness, portability, coverage, and maintainability
  8. 8. Expressivity vs Coverageexpressivity: fewer irrelevant details => concisenesscoverage: which portion of domain can we express
  9. 9. Software Language Design Case Studies Mobl: client-side stateful web applicationsWebDSL: server-side restful web applications
  10. 10. http://www.mobl-lang.orgZef Hemel
  11. 11. Divergence in Mobile Platforms Objective-C Java J2ME/C++HTML/Javascript Java .NET Native Applications not Portable
  12. 12. Convergence in Mobile PlatformWebkit browser Webkit browserWebkit browser Webkit browser
  13. 13. The Universal Userinterface Engine
  14. 14. Mobile Web Architecture
  15. 15. Rich Applications Audio WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  16. 16. Native Applications Address book Camera Compass File IO Notifications
  17. 17. Software Engineering with JavaScriptannotated HTML imperative Javascript MVC, No Integration, No Abstraction, Accidental Complexity
  18. 18. typed declarativeintegrated concise
  19. 19. Web Application with Touch
  20. 20. Portable Applications
  21. 21. Mobl Architecture
  22. 22. 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()}
  23. 23. Model-View Pattern
  24. 24. Task Manager
  25. 25. 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
  26. 26. 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
  27. 27. 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) } } }}
  28. 28. 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) } } }}
  29. 29. 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) } } }}
  30. 30. 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)} } } }}
  31. 31. 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) } } }}
  32. 32. 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)}
  33. 33. 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")}
  34. 34. 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
  35. 35. 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)}
  36. 36. 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)}
  37. 37. 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)}
  38. 38. Mobl Applications
  39. 39. GR8 Conference Program
  40. 40. mPodder
  41. 41. Kenhttp://itsneh.com/ken/
  42. 42. Mobl IDEstatic cross-concern consistency checking
  43. 43. Research: Software Language Engineering Automatically derive efficient,scalable, incremental compiler + usable IDE from high-level, declarativelanguage definition
  44. 44. The Spoofax Language Workbenchcreating full featured IDEs for domain-specific languages
  45. 45. The Spoofax Language Workbenchan IDE for developing languages and their IDEs
  46. 46. The Spoofax Language Workbench Integrated Language Definition Testing
  47. 47. Syntax Definitionmodule 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")}
  48. 48. 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)
  49. 49. 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
  50. 50. Software Language Design & Engineering http://eelcovisser.orgLanguage Design as Engineering Discipline http://spoofax.org (More) Declarative Language Definition http://mobl-lang.org Static Analysis of Language Definitions http://webdsl.org Language Workbench in the Cloud http://researchr.orghttp://researchr.org/search/publication/mobl+spoofax+webdsl

×