mobl - model-driven engineering lecture

2,926 views

Published on

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

No Downloads
Views
Total views
2,926
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
31
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

mobl - model-driven engineering lecture

  1. 1. http://www.mobl-lang.orgZef Hemel
  2. 2. 230,000 300,000
  3. 3. Objective-C Java J2ME/C++HTML/Javascript Java .NET
  4. 4. portability
  5. 5. Objective-C Java J2ME/C++HTML/Javascript Java .NET
  6. 6. Webkit browser Webkit browser J2ME/C++ Webkit browser Webkit browser .NET
  7. 7. WebDatabases
  8. 8. WebDatabasesLocation information (GPS)
  9. 9. WebDatabasesLocation information (GPS) Canvas
  10. 10. WebDatabasesLocation information (GPS) Canvas Multi-touch
  11. 11. WebDatabasesLocation information (GPS) Offline support Canvas Multi-touch
  12. 12. WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Multi-touch
  13. 13. WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  14. 14. Address book
  15. 15. Address book Camera
  16. 16. Address book Camera Compass
  17. 17. Address book Camera Compass File IO
  18. 18. Address book Camera Compass File IO Audio
  19. 19. Address book Camera Compass File IO AudioNotifications
  20. 20. mobl program
  21. 21. today1. language2. behind the scenes
  22. 22. language
  23. 23. user interface stylingdata modeling scriptingweb services
  24. 24. user interface
  25. 25. demo
  26. 26. ui syntaxscreen name(farg*) : ReturnType? { screenelem*}control name(farg*) { screenelem*}
  27. 27. screen root() { ...}
  28. 28. screen root() { ...}screen promptString(q : String) : String { ...}
  29. 29. screen root() { ...}screen promptString(q : String) : String { ...}control button(s : String, onclick : Callback = {}) { ...}
  30. 30. control callsvariable declarations control structures inline HTML script blocks
  31. 31. control callsbutton("Click me")
  32. 32. control callsbutton("Click me")button("Click me", { alert("Click!");})
  33. 33. control callsbutton("Click me")button("Click me", { alert("Click!");})button("Click me", onclick={ alert("Click!");})
  34. 34. control calls with body group() { item() { "Item 1" } item() { "Item 2" } }
  35. 35. control calls with body group { item { "Item 1" } item { "Item 2" } }
  36. 36. variable declarationsvar b = true
  37. 37. variable declarationsvar b = truevar b : Bool = true
  38. 38. variable declarationsvar b = truevar b : Bool = truevar newTask = Task()
  39. 39. variable declarationsvar b = truevar b : Bool = truevar newTask = Task()var newTask : Task = Task()
  40. 40. whenvar b = truecheckBox(b)when(b) { label("Yep")} else { label("Nope")}
  41. 41. listvar nums = [1, 2, 3]group { list(n in nums) { item { label(n) } }}
  42. 42. inline HTML<img src="img/icon.png"/>
  43. 43. inline HTML <img src="img/icon.png"/><div class=selected ? selectedStyle : notSelectedStyle> ...</div>
  44. 44. script blocks avoid if possiblevar n = -1script { n = Math.sqrt(9);}
  45. 45. higher-order controls
  46. 46. demo
  47. 47. styling
  48. 48. style bigAndBlue { color: blue; font-size: 40px;}
  49. 49. Stylestyle bigAndBlue { color: blue; font-size: 40px;}
  50. 50. control block(style : Style) { ...}block(bigAndBlueStyle) { label("I am big and blue!");}
  51. 51. style $baseColor = rgb(100, 100, 100)style myStyle { color: rgb($baseColor.r+10, $baseColor.g+50, $baseColor.b-20); font-size: 20px;}
  52. 52. style mixin borderRadiusMixin($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
  53. 53. style mixin borderRadiusMixin($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}style myStyle { color: $baseColor; borderRadiusMixin(10px);}
  54. 54. demo
  55. 55. data modeling & query
  56. 56. entity Task { name : String (searchable) done : Bool tags : Collection<Tag> (inverse: tasks)}entity Tag { name : String (searchable) tasks : Collection<Task> (inverse: tags)}
  57. 57. var newTask = Task(name="New task");newTask.done = false;add(newTask);
  58. 58. var doneTasks = Task.all()
  59. 59. Collection<Task>var doneTasks = Task.all()
  60. 60. Collection<Task>var doneTasks = Task.all() .filter("done", "=", true) .order("date", false) .limit(10);
  61. 61. Collection<Task>var tagDoneTasks = tag.tasks .filter("done", "=", true) .order("date", false) .limit(10);
  62. 62. Collection<Task>var doneTasks = Task.all()
  63. 63. Collection<Task>var doneTasks = Task.all() where done == true order by date desc limit 10;
  64. 64. Collection<Task>var tagDoneTasks = tag.tasks where done == true order by date desc limit 10;
  65. 65. Collection<Task>var searchTasks = Task.search("task") where done == true limit 10;
  66. 66. screen root() { header("Tasks") group { list(t in Task.all() order by date desc) { item { label(t.name) } } }}
  67. 67. scripting
  68. 68. script in uilabel("Total tasks: " + Task.all().count())
  69. 69. script in uilabel("Total tasks: " + Task.all().count())button("Click me", onclick={ alert("You clicked me!");})
  70. 70. var n = 7;var n2 = Math.round(n/2);if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
  71. 71. type inferencevar n = 7;var n2 = Math.round(n/2);if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
  72. 72. var done = 0;foreach(t in Task.all()) { if(t.done) { done = done + 1; }}
  73. 73. var done = 0;foreach(t in Task.all()) { if(t.done) { done = done + 1; }}var done = (Task.all() where done == true) .count();
  74. 74. function sqr(n : Num) : Num { return n * n;}
  75. 75. demo: todo list
  76. 76. web service access
  77. 77. service SomeService { resource tasks() : JSON { uri = "/tasks" } resource search(query : String) : JSON { uri = "/search?q=" + escape(query) }}
  78. 78. ajax same-source restrictionservice Twitter { resource trends() : JSON { uri = "/_proxy/api.twitter.com/1/trends.json" } resource search(query : String) : JSON { uri = "/_proxy/search.twitter.com/search.json?q=" + escape(query) }}
  79. 79. http://api.twitter.com/1/trends.json{"trends": [{"url":"http://search.twitter.com/search?q=...", "name":"#ihaveadream"}, {"url":"http://search.twitter.com/search?q=...", "name":"#mlkday"} ... ]}
  80. 80. type Trend { name : String url : String}function trendsMapper(json : JSON) : [Trend] { return json.trends;}
  81. 81. resource trends() : JSON { uri = "/_proxy/api.twitter.com/1/trends.json" mapper = trendsMapper}
  82. 82. screen root() { var trends = Twitter.trends() header("Twitter trends") group { list(topic in trends) { item { label(topic.name) } } }}
  83. 83. user interface stylingdata modeling scriptingweb services
  84. 84. limitationsslower than native no native UInot great for games
  85. 85. behind the scenes
  86. 86. goals portabilitycompleteness coverage
  87. 87. goals portability webcompleteness coverage
  88. 88. goals portability webcompleteness 100% code gen coverage
  89. 89. design bottom-up
  90. 90. roadmap1. design core abstractions + native interface
  91. 91. roadmap1. design core abstractions + native interface2. enable user land abstractions
  92. 92. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax
  93. 93. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  94. 94. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  95. 95. core abstraction:synchronous programming no more asynchronous spaghetti code
  96. 96. synchronous programmingvar results = Task.all().list();for(var i = 0; i < results.length; i++) { alert(results[i].name);}
  97. 97. render page timequery database and process results ...
  98. 98. render page time query databasebrowser freeze and process results ...
  99. 99. render page send query time ...process query result ...
  100. 100. asynchronous programmingTask.all.list(function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } });...
  101. 101. Task.all().list(function(results) { alert("Hello, ");});alert("world!");
  102. 102. Task.all().list(function(results) { alert("Hello, ");}); breaks sequentialalert("world!"); execution assumption
  103. 103. Task.all().list(function(results) { // make changes ... persistence.flush(function() { alert("Changes saved!"); });});
  104. 104. continuation-passing style transformation
  105. 105. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}
  106. 106. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
  107. 107. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
  108. 108. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
  109. 109. core abstraction: data bindingno more copying data from and to UI
  110. 110. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
  111. 111. var n = 8var n = ref(8);
  112. 112. var n = 8 var n = ref(8);Observable- set(value)- get()- addEventListener(eventType, callback)
  113. 113. label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
  114. 114. label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
  115. 115. label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
  116. 116. button("Inc", onclick={ n = n + 1; })var node = $("<button ...>");node.text("Inc");node.click(function() { n.set(n.get() + 1);});root.append(node);
  117. 117. button("Inc", onclick={ n = n + 1; })var node = $("<button ...>");node.text("Inc");node.click(function() { n.set(n.get() + 1);});root.append(node);
  118. 118. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
  119. 119. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
  120. 120. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
  121. 121. core abstraction:data modeling & query no more SQL
  122. 122. uses persistence.js http://persistencejs.org
  123. 123. entity Task { name : String (searchable) description : String (searchable) done : Bool date : DateTime}var Task = persistence.define(Task, { name: VARCHAR(255), description: VARCHAR(255), done: BOOL, date: DATE});Task.textIndex(description);Task.textIndex(name);
  124. 124. foreach(t in Task.all()) { alert(t.name); }Task.all().forEach(function(t) { alert(t.name);});
  125. 125. foreach(t in Task.all() where done == true) { alert(t.name); }Task.all().filter("done", "=", true).forEach(function(t) { alert(t.name);});
  126. 126. native interface
  127. 127. external entity MyEntityexternal type MyTypeexternal control contextMenu()external screen specialScreen()external sync function add(o : Object) : voidexternal style myStyle
  128. 128. external sync function add(o : Object) : void<javascript>__ns.add = function(o) { persistence.add(o);};</javascript>
  129. 129. load styles/default.cssload js/persistence.js
  130. 130. where do abstractions come from?
  131. 131. where do abstractions come from? domain
  132. 132. where do abstractions come from? domain experience
  133. 133. domain
  134. 134. screen domain
  135. 135. controlscreen domain
  136. 136. controlscreen entity domain
  137. 137. controlscreen entity domain event
  138. 138. controlscreen entity domain event web service
  139. 139. experience
  140. 140. other DSLs experience
  141. 141. other DSLs experience programming paradigms
  142. 142. other DSLs annoyances experience programming paradigms
  143. 143. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  144. 144. goal compiler smalllibrary large (and extensible)
  145. 145. how?- built-in types- built-in controls+ native interface+ sufficiently low-level primitives+ abstraction mechanisms (screens, controls, functions, types)
  146. 146. native interfaceexternal type Object { sync function toString() : String}external type String : Object { length : Num sync function charAt(index : Num) : String sync function charCodeAt(index : Num) : Num ...}external type Num : Object { }external type Bool : Object { }external type Dynamic : Object { }external type Style : String { }external type Array<T> { length : Num sync function get(n : Num) : T sync function push(item : T) : void sync function join(sep : String) : String ...}
  147. 147. low-level primitivescontrol image(url : String, onclick : Callback = null) { <img src=url onclick=onclick/>}
  148. 148. low-level primitivescontrol slideupBlock() { div@<div onclick={ div.slideUp(); }> elements() </div>}...slideupBlock { label("Click me to slide up")}
  149. 149. low-level primitives control slideupBlock() {JQuery div@<div onclick={ div.slideUp(); }> elements() </div> } ... slideupBlock { label("Click me to slide up") }
  150. 150. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  151. 151. var doneTasks = Task.all()
  152. 152. var doneTasks = Task.all() .filter("done", "=", true) .order("date", false) .limit(10);
  153. 153. var doneTasks = Task.all()
  154. 154. var doneTasks = Task.all() where done == true order by date desc limit 10;
  155. 155. roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  156. 156. load styles/default.css
  157. 157. div.header { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
  158. 158. issueout of sight, no checkingout of mind <div class="headerr"> </div>
  159. 159. little abstractiondiv.header { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
  160. 160. little abstractiondiv.header { mixins background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
  161. 161. 1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
  162. 162. http://www.mobl-lang.org

×