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

       Eelco Visser
      http://eelcovisser.org




                             ...
Software Engineering




Problem
                                                         Machine
Domain




   bridging t...
High-Level Languages




Problem
                           HLL   Machine
Domain




             HLLs reduce gap
Domain-Specific Languages




Problem
                   DSL                 HLL               Machine
Domain




      dom...
Domain-Specific Languages

                Even Higher-
                   Level
                 Languages


Problem
     ...
Software Language Design & Engineering




enable software engineers to
effectively design, implement,
 and apply domain-s...
Research: Software Language Design


 Systematically design domain-
      specific software
  languages with optimal
   tra...
Expressivity vs Coverage




expressivity: fewer irrelevant details => conciseness
coverage: which portion of domain can w...
Software Language Design Case Studies



                                               Mobl: client-side stateful web app...
http://www.mobl-lang.org

Zef Hemel
Divergence in Mobile Platforms




 Objective-C            Java                  J2ME/C++




HTML/Javascript         Java...
Convergence in Mobile Platform




Webkit browser   Webkit browser




Webkit browser   Webkit browser
The Universal Userinterface Engine
Mobile Web Architecture
Rich Applications

                                 Audio
 WebDatabases
                  Full-screen support
Location inf...
Native Applications


            Address book
                Camera
               Compass
                 File IO
    ...
Software Engineering with JavaScript




annotated HTML                imperative Javascript

 MVC, No Integration, No Abs...
typed        declarative




integrated      concise
Web Application with Touch
Portable Applications
Mobl Architecture
tipcalculator.mobl


application tipcalculator

import mobl::ui::generic

screen root() {
  var amount = 20
  var percenta...
Model-View Pattern
Task Manager
Data Model

entity Task {
  name : String (searchable)
  done : Bool
  due : DateTime
  category : Category (inverse: task...
Logic
entity Task {
  name : String (searchable)
  done : Bool
  due : DateTime
  category : Category (inverse: tasks)
  t...
Reactive User Interfaces

screen root() {
  var phrase = ""
  header("Tasks") {
    button("Add", onclick={ addTask(); })
...
Reactive User Interfaces

screen root() {
  var phrase = ""
  header("Tasks") {
    button("Add", onclick={ addTask(); })
...
Navigation

screen root() {
  var phrase = ""
  header("Tasks") {
    button("Add", onclick={ addTask(); })
  }
  searchBo...
Navigation

screen root() { {
         addTask()
  var phrase = ""
       t = Task()
  header("Add") {
  header("Tasks") {...
Navigation

screen root() {
  var phrase = ""
  header("Tasks") {
    button("Add", onclick={ addTask(); })
  }
  searchBo...
Continuations

screen root() {
  button("Ask", onclick={
     alert("Hello " + prompt("First name") + " "
                ...
User Interface Idiom: Tab



control tab1() {
  header("Tab 1")
  label("This is tab 1")
}
control tab2() {
  header("Tab ...
Tab Set: Higher-Order Control


control tabSet(tabs : [(String,Control)], activeTab : String) {
  list((tabName, tabContro...
User Interface Idiom: Master Detail



control taskItem(t : Task) {
  checkBox(t.done, label=t.name)
}
control taskDetail(...
User Interface Idiom: Master Detail



control taskItem(t : Task) {
  checkBox(t.done, label=t.name)
}
control taskDetail(...
Master Detail: Higher-Order Control


control masterDetail(items : Collection<?>, masterItem : Control1<?>,
detail : Contr...
Mobl Applications
GR8 Conference Program
mPodder
Ken




http://itsneh.com/ken/
Mobl IDE




static cross-concern consistency checking
Research: Software Language Engineering



 Automatically derive efficient,
scalable, incremental compiler +
   usable IDE ...
The Spoofax Language Workbench




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




an IDE for developing languages and their IDEs
The Spoofax Language Workbench




  Integrated Language Definition Testing
Syntax Definition

module MoBL-Data

imports
  Common
  MoBL

exports
  context-free syntax
    MetaAnno* "entity" QId ":" ...
Type Checking



rules

  constraint-error :
    t@SimpleType(_) -> (t, $[Type is not defined: [<pp-mobl-type> t]])
    wh...
Code Generation



rules

  property-to-js(|ent) :
    Property(_, x, t@SimpleType(_), anno*) -> $['[x]': '[sqlType]']
   ...
Software Language Design & Engineering



                                            http://eelcovisser.org
Language Desi...
Upcoming SlideShare
Loading in …5
×

of

Software Language Design & Engineering Slide 1 Software Language Design & Engineering Slide 2 Software Language Design & Engineering Slide 3 Software Language Design & Engineering Slide 4 Software Language Design & Engineering Slide 5 Software Language Design & Engineering Slide 6 Software Language Design & Engineering Slide 7 Software Language Design & Engineering Slide 8 Software Language Design & Engineering Slide 9 Software Language Design & Engineering Slide 10 Software Language Design & Engineering Slide 11 Software Language Design & Engineering Slide 12 Software Language Design & Engineering Slide 13 Software Language Design & Engineering Slide 14 Software Language Design & Engineering Slide 15 Software Language Design & Engineering Slide 16 Software Language Design & Engineering Slide 17 Software Language Design & Engineering Slide 18 Software Language Design & Engineering Slide 19 Software Language Design & Engineering Slide 20 Software Language Design & Engineering Slide 21 Software Language Design & Engineering Slide 22 Software Language Design & Engineering Slide 23 Software Language Design & Engineering Slide 24 Software Language Design & Engineering Slide 25 Software Language Design & Engineering Slide 26 Software Language Design & Engineering Slide 27 Software Language Design & Engineering Slide 28 Software Language Design & Engineering Slide 29 Software Language Design & Engineering Slide 30 Software Language Design & Engineering Slide 31 Software Language Design & Engineering Slide 32 Software Language Design & Engineering Slide 33 Software Language Design & Engineering Slide 34 Software Language Design & Engineering Slide 35 Software Language Design & Engineering Slide 36 Software Language Design & Engineering Slide 37 Software Language Design & Engineering Slide 38 Software Language Design & Engineering Slide 39 Software Language Design & Engineering Slide 40 Software Language Design & Engineering Slide 41 Software Language Design & Engineering Slide 42 Software Language Design & Engineering Slide 43 Software Language Design & Engineering Slide 44 Software Language Design & Engineering Slide 45 Software Language Design & Engineering Slide 46 Software Language Design & Engineering Slide 47 Software Language Design & Engineering Slide 48 Software Language Design & Engineering Slide 49 Software Language Design & Engineering Slide 50
Upcoming SlideShare
Model-Driven Software Development - Pretty-Printing, Editor Services, Term Rewriting
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Software Language Design & Engineering

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Software Language Design & Engineering

  1. 1. Software Language Design & Engineering Eelco Visser http://eelcovisser.org Zürich, May 12, 2011
  2. 2. Software Engineering Problem Machine Domain bridging the gap between problem domain and solution domain
  3. 3. High-Level Languages Problem HLL Machine Domain HLLs reduce gap
  4. 4. Domain-Specific Languages Problem DSL HLL Machine Domain domain-specific languages support more specialization
  5. 5. Domain-Specific Languages Even Higher- Level Languages Problem DSL HLL Machine Domain domain-specific languages support more specialization
  6. 6. Software Language Design & Engineering enable software engineers to effectively 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 Coverage expressivity: fewer irrelevant details => conciseness coverage: which portion of domain can we express
  9. 9. Software Language Design Case Studies Mobl: client-side stateful web applications WebDSL: server-side restful web applications
  10. 10. http://www.mobl-lang.org Zef 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 Platform Webkit browser Webkit browser Webkit browser Webkit browser
  13. 13. The Universal Userinterface Engine
  14. 14. Mobile Web Architecture
  15. 15. Rich Applications Audio WebDatabases Full-screen support Location 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 JavaScript annotated HTML imperative Javascript MVC, No Integration, No Abstraction, Accidental Complexity
  18. 18. typed declarative integrated concise
  19. 19. Web Application with Touch
  20. 20. Portable Applications
  21. 21. Mobl Architecture
  22. 22. 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() }
  23. 23. Model-View Pattern
  24. 24. Task Manager
  25. 25. 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
  26. 26. 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
  27. 27. 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) } } } }
  28. 28. 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) } } } }
  29. 29. 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) } } } }
  30. 30. 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) } } } } }
  31. 31. 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) } } } }
  32. 32. 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) }
  33. 33. 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") }
  34. 34. 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
  35. 35. 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) }
  36. 36. 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) }
  37. 37. 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) }
  38. 38. Mobl Applications
  39. 39. GR8 Conference Program
  40. 40. mPodder
  41. 41. Ken http://itsneh.com/ken/
  42. 42. Mobl IDE static 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 Workbench creating full featured IDEs for domain-specific languages
  45. 45. The Spoofax Language Workbench an IDE for developing languages and their IDEs
  46. 46. The Spoofax Language Workbench Integrated Language Definition Testing
  47. 47. Syntax Definition module MoBL-Data imports Common MoBL exports 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 Checking rules 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 Generation rules 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.org Language 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.org http://researchr.org/search/publication/mobl+spoofax+webdsl

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

Views

Total views

1,531

On Slideshare

0

From embeds

0

Number of embeds

13

Actions

Downloads

19

Shares

0

Comments

0

Likes

0

×