Linguistic Abstraction for the Web             Eelco Visser            http://eelcovisser.org                             ...
MessagesLinguistic abstraction as software engineering tool         Web languages can be improved
Software EngineeringProblem                                                         MachineDomain   bridging the gap betwe...
High-Level LanguagesProblem                                                 HLL                     MachineDomain         ...
Domain-Specific LanguagesProblem                   DSL                 HLL               MachineDomain      domain-specific ...
Software Language Design & Engineeringenable software engineers toeffectively design, implement, and apply domain-specific ...
Research: Software Language Engineering Automatically derive efficient,scalable, incremental compiler +   usable IDE from h...
The Spoofax Language Workbenchcreating full featured IDEs for domain-specific languages
Research: Software Language Design Systematically design domain-      specific software  languages with optimal   tradeoff ...
Software Language Design Case Studies                                               Mobl: client-side stateful web applica...
http://webdsl.orgEelco Visser, Danny Groenewegen, et al.
Web Programmingbrowser        server       database              web app
Web Programmingbrowser                    server                      databaseHTML,                            Java       ...
Concerns in Web Programming❖ Persistent data  ★ data integrity  ★ search❖ User interface  ★ data validation  ★ styling, la...
Separation of Concerns in Web ProgrammingExample❖ Data modeling  ★ Java classes with JPA annotations❖ User interface  ★ Ja...
Problems in Web Programming❖ Lack of integration  ★ no cross language/concern consistency checking  ★ leads to late (detec...
When Seam FailsWelcome #{user.name}     Welcome #{user.nam}
When Rails Fails@post = Post.new(params[:get])                         @post = Post.new(params[:post])
Late Failures in Web Applications               Zef Hemel, Danny M. Groenewegen, Lennart C. L. Kats, Eelco Visser.        ...
Separation of Concerns+ Linguistic Integration
WebDSL Example
Model-View Pattern
Model
Modelentity Blog {  key   :: String (id)  title :: String (name)  posts -> Set<Post> (inverse=Post.blog)}entity Post {  ke...
Automatic PersistenceData           Entity              DBModel          Classes           SchemaWebDSL           Java    ...
Logicentity Blog {  key   :: String (id)  title :: String (name)  posts -> Set<Post> (inverse=Post.blog)    function recen...
View
Page Definitiondefine page blog(b: Blog, index: Int) {  main(b){    for(p: Post in b.recentPosts(index,5)) { showPost(p) } ...
Template Definitiondefine page blog(b: Blog, index: Int) { ... }define showPost(p: Post) {  section{    header{ navigate po...
Page Definitiondefine page blog(b: Blog, index: Int) { ... }define showPost(p: Post) { ... }define page post(p: Post) {  ma...
Forms & Data Bindingdefine page post(p: Post) { ... }define page editpost(p: Post) {  action save() {    return post(p); }...
Type-Directed Inputdefine page post(p: Post) { ... }define page editpost(p: Post) {  action save() {    return post(p); } ...
View Compositiondefine sidebar(b: Blog) {  list{    listitem{ navigate blog(b,1) { "Home" } }    listitem{      submitlink...
Native Interfacedefine main(b: Blog) {  includeCSS("style.css")  <div id="outercontainer">    <div id="container">      <d...
Integrated Development Environment     short demo: consistency checking
WebDSL Languages     Data Model          Logic      Templates     (UI, Email, Service)   Access Control   Data Validation ...
http://www.mobl-lang.orgZef Hemel
Divergence in Mobile Platforms Objective-C            Java                  J2ME/C++HTML/Javascript         Java          ...
Convergence in Mobile PlatformWebkit browser   Webkit browserWebkit browser   Webkit browser
The Universal Userinterface Engine
Mobile Web Architecture
Rich Applications                                      Audio    WebDatabases                              Full-screen supp...
Native Applications            Address book                Camera               Compass                 File IO           ...
Software Engineering with JavaScriptannotated HTML                imperative Javascript MVC, No Integration, No Abstractio...
typed        declarativeintegrated      concise
Web Application with Touch
Portable Applications
Mobl Architecture
tipcalculator.moblapplication tipcalculatorimport mobl::ui::genericscreen root() {  var amount = 20  var percentage = 10  ...
Task Manager
Data Modelentity Task {  name : String (searchable)  done : Bool  due : DateTime  category : Category (inverse: tasks)  ta...
Logicentity Task {  name : String (searchable)  done : Bool  due : DateTime  category : Category (inverse: tasks)  tags : ...
Reactive User Interfacesscreen root() {  var phrase = ""  header("Tasks") {    button("Add", onclick={ addTask(); })  }  s...
Reactive User Interfacesscreen root() {  var phrase = ""  header("Tasks") {    button("Add", onclick={ addTask(); })  }  s...
Navigationscreen root() {  var phrase = ""  header("Tasks") {    button("Add", onclick={ addTask(); })  }  searchBox(phras...
Navigationscreen root() { {         addTask()  var phrase = ""       t = Task()  header("Add") {  header("Tasks") {    but...
Navigationscreen root() {  var phrase = ""  header("Tasks") {    button("Add", onclick={ addTask(); })  }  searchBox(phras...
Continuationsscreen root() {  button("Ask", onclick={     alert("Hello " + prompt("First name") + " "                     ...
User Interface Idiom: Tabcontrol tab1() {  header("Tab 1")  label("This is tab 1")}control tab2() {  header("Tab 2")  labe...
Tab Set: Higher-Order Controlcontrol tabSet(tabs : [(String,Control)], activeTab : String) {  list((tabName, tabControl) i...
User Interface Idiom: Master Detailcontrol taskItem(t : Task) {  checkBox(t.done, label=t.name)}control taskDetail(t : Tas...
User Interface Idiom: Master Detailcontrol taskItem(t : Task) {  checkBox(t.done, label=t.name)}control taskDetail(t : Tas...
Master Detail: Higher-Order Controlcontrol masterDetail(items : Collection<?>, masterItem : Control1<?>,detail : Control1<...
Adaptive Layout
Mobl IDEstatic cross-concern consistency checking
DiscussionWebDSL vs Mobl crucial difference: navigation models       why do we need both?
Linguistic Abstraction for the Web           Linguistic abstraction:       capture software knowledge in         domain-sp...
Upcoming SlideShare
Loading in …5
×

Linguistic Abstraction for the Web

1,436 views

Published on

Slides used in TechTalk at Google Mountain View on June 8, 2011

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,436
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Linguistic Abstraction for the Web

  1. 1. Linguistic Abstraction for the Web Eelco Visser http://eelcovisser.org Mountain View June 8, 2011
  2. 2. MessagesLinguistic abstraction as software engineering tool Web languages can be improved
  3. 3. Software EngineeringProblem MachineDomain bridging the gap between problem domain and solution domain
  4. 4. 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
  5. 5. Domain-Specific 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 Engineering Automatically derive efficient,scalable, incremental compiler + usable IDE from high-level, declarativelanguage definition
  8. 8. The Spoofax Language Workbenchcreating full featured IDEs for domain-specific languages
  9. 9. Research: Software Language Design Systematically design domain- specific software languages with optimal tradeoff between expressivity,completeness, portability, coverage, and maintainability
  10. 10. Software Language Design Case Studies Mobl: client-side stateful web applicationsWebDSL: server-side restful web applications
  11. 11. http://webdsl.orgEelco Visser, Danny Groenewegen, et al.
  12. 12. Web Programmingbrowser server database web app
  13. 13. Web Programmingbrowser server databaseHTML, Java SQLJS, CSS code runs on server, browser, and database
  14. 14. Concerns in Web Programming❖ Persistent data ★ data integrity ★ search❖ User interface ★ data validation ★ styling, layout ★ navigation ★ actions❖ Access control
  15. 15. Separation of Concerns in Web ProgrammingExample❖ Data modeling ★ Java classes with JPA annotations❖ User interface ★ Java ServerFaces XML templates ★ Seam Java classes❖ Access control ★ Acegi configuration/annotation
  16. 16. 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
  17. 17. When Seam FailsWelcome #{user.name} Welcome #{user.nam}
  18. 18. When Rails Fails@post = Post.new(params[:get]) @post = Post.new(params[:post])
  19. 19. 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.
  20. 20. Separation of Concerns+ Linguistic Integration
  21. 21. WebDSL Example
  22. 22. Model-View Pattern
  23. 23. Model
  24. 24. Modelentity 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())}
  25. 25. Automatic PersistenceData Entity DBModel Classes SchemaWebDSL Java DBObject Object Records
  26. 26. Logicentity 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; }}
  27. 27. View
  28. 28. Page Definitiondefine 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) { ... }
  29. 29. Template Definitiondefine 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
  30. 30. Page Definitiondefine page blog(b: Blog, index: Int) { ... }define showPost(p: Post) { ... }define page post(p: Post) { main(p.blog){ showPost(p) navigate editpost(p) { "[Edit]" } }}
  31. 31. Forms & Data Bindingdefine 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!)
  32. 32. Type-Directed Inputdefine 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" } } }}
  33. 33. View Compositiondefine 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)) }}
  34. 34. Native Interfacedefine 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>}
  35. 35. Integrated Development Environment short demo: consistency checking
  36. 36. WebDSL Languages Data Model Logic Templates (UI, Email, Service) Access Control Data Validation SearchCollaborative Filtering
  37. 37. http://www.mobl-lang.orgZef Hemel
  38. 38. Divergence in Mobile Platforms Objective-C Java J2ME/C++HTML/Javascript Java .NET Native Applications not Portable
  39. 39. Convergence in Mobile PlatformWebkit browser Webkit browserWebkit browser Webkit browser
  40. 40. The Universal Userinterface Engine
  41. 41. Mobile Web Architecture
  42. 42. Rich Applications Audio WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  43. 43. Native Applications Address book Camera Compass File IO Notifications
  44. 44. Software Engineering with JavaScriptannotated HTML imperative Javascript MVC, No Integration, No Abstraction, Accidental Complexity
  45. 45. typed declarativeintegrated concise
  46. 46. Web Application with Touch
  47. 47. Portable Applications
  48. 48. Mobl Architecture
  49. 49. 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()}
  50. 50. Task Manager
  51. 51. 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
  52. 52. 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
  53. 53. 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) } } }}
  54. 54. 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) } } }}
  55. 55. 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) } } }}
  56. 56. 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)} } } }}
  57. 57. 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) } } }}
  58. 58. 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)}
  59. 59. 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")}
  60. 60. 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
  61. 61. 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)}
  62. 62. 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)}
  63. 63. 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)}
  64. 64. Adaptive Layout
  65. 65. Mobl IDEstatic cross-concern consistency checking
  66. 66. DiscussionWebDSL vs Mobl crucial difference: navigation models why do we need both?
  67. 67. Linguistic Abstraction for the Web Linguistic abstraction: capture software knowledge in domain-specific languages http://spoofax.orgseparation of concerns + linguistic integration http://mobl-lang.org cross concern consistency checking http://webdsl.org early detection 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

×