mobl presentation @ IHomer

1,566 views

Published on

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,566
On SlideShare
0
From Embeds
0
Number of Embeds
205
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

mobl presentation @ IHomer

  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. productivity
  6. 6. Reqs 10101
  7. 7. Reqs asm 10101
  8. 8. ’70-’80Reqs C/C++ asm 10101
  9. 9. ’90-’10 ’70-’80Reqs 3rd gen C/C++ asm 10101 Java/C#
  10. 10. ’90-’10 ’70-’80Reqs DSLs 3rd gen C/C++ asm 10101 Java/C#
  11. 11. MoDSE
  12. 12. Objective-C Java J2ME/C++HTML/Javascript Java .NET
  13. 13. Webkit browser Webkit browser J2ME/C++ Webkit browser Webkit browser .NET
  14. 14. WebDatabases
  15. 15. WebDatabasesLocation information (GPS)
  16. 16. WebDatabasesLocation information (GPS) Canvas
  17. 17. WebDatabasesLocation information (GPS) Canvas Multi-touch
  18. 18. WebDatabasesLocation information (GPS) Offline support Canvas Multi-touch
  19. 19. WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Multi-touch
  20. 20. WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  21. 21. AudioWebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
  22. 22. Address book
  23. 23. Address book Camera
  24. 24. Address book Camera Compass
  25. 25. Address book Camera Compass File IO
  26. 26. Address book Camera Compass File IONotifications
  27. 27. annotated HTML
  28. 28. annotated imperative HTML Javascript
  29. 29. typed declarativeintegrated concise
  30. 30. mobl program
  31. 31. user interface styling data modelingapplication logic web services
  32. 32. user interface
  33. 33. demo
  34. 34. ui syntaxscreen name(farg*) : ReturnType? { screenelem*}control name(farg*) { screenelem*}
  35. 35. control callsvariable declarations control structures inline HTML script blocks
  36. 36. control callsbutton("Click me")
  37. 37. control callsbutton("Click me")button("Click me", { alert("Click!");})
  38. 38. control callsbutton("Click me")button("Click me", { alert("Click!");})button("Click me", onclick={ alert("Click!");})
  39. 39. control calls with body group() { item() { "Item 1" } item() { "Item 2" } }
  40. 40. control calls with body group { item { "Item 1" } item { "Item 2" } }
  41. 41. variable declarationsvar b = true
  42. 42. variable declarationsvar b = truevar b : Bool = true
  43. 43. variable declarationsvar b = truevar b : Bool = truevar newTask = Task()
  44. 44. variable declarationsvar b = truevar b : Bool = truevar newTask = Task()var newTask : Task = Task()
  45. 45. whenvar b = truecheckBox(b)when(b) { label("Yep")} else { label("Nope")}
  46. 46. listvar nums = [1, 2, 3]group { list(n in nums) { item { label(n) } }}
  47. 47. inline HTML<img src="img/icon.png"/>
  48. 48. inline HTML <img src="img/icon.png"/><div class=selected ? selectedStyle : notSelectedStyle> ...</div>
  49. 49. script blocks avoid if possiblevar n = -1script { n = Math.sqrt(9);}
  50. 50. higher-order controls
  51. 51. controls taking controls as arguments confused yet?
  52. 52. demo
  53. 53. styling
  54. 54. style bigAndBlue { color: blue; font-size: 40px;}
  55. 55. Stylestyle bigAndBlue { color: blue; font-size: 40px;}
  56. 56. control block(style : Style) { ...}block(bigAndBlueStyle) { label("I am big and blue!");}
  57. 57. style $baseColor = rgb(100, 100, 100)style myStyle { color: rgb($baseColor.r+10, $baseColor.g+50, $baseColor.b~20); font-size: 20px;}
  58. 58. style mixin borderRadiusMixin($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}
  59. 59. style mixin borderRadiusMixin($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius;}style myStyle { color: $baseColor; borderRadiusMixin(10px);}
  60. 60. demo
  61. 61. data modeling & query
  62. 62. entity Task { name : String (searchable) done : Bool tags : Collection<Tag> (inverse: tasks)}entity Tag { name : String (searchable) tasks : Collection<Task> (inverse: tags)}
  63. 63. var newTask = Task(name="New task");newTask.done = false;add(newTask);
  64. 64. var doneTasks = Task.all()
  65. 65. Collection<Task>var doneTasks = Task.all()
  66. 66. Collection<Task>var doneTasks = Task.all() .filter("done", "=", true) .order("date", false) .limit(10);
  67. 67. Collection<Task>var tagDoneTasks = tag.tasks .filter("done", "=", true) .order("date", false) .limit(10);
  68. 68. Collection<Task>var doneTasks = Task.all()
  69. 69. Collection<Task>var doneTasks = Task.all() where done == true order by date desc limit 10;
  70. 70. Collection<Task>var tagDoneTasks = tag.tasks where done == true order by date desc limit 10;
  71. 71. Collection<Task>var searchTasks = Task.search("task") where done == true limit 10;
  72. 72. screen root() { header("Tasks") group { list(t in Task.all() order by date desc) { item { label(t.name) } } }}
  73. 73. application logic
  74. 74. logic in uilabel("Total tasks: " + Task.all().count())
  75. 75. logic in uilabel("Total tasks: " + Task.all().count())button("Click me", onclick={ alert("You clicked me!");})
  76. 76. var n = 7;var n2 = Math.round(n/2);if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
  77. 77. type inferencevar n = 7;var n2 = Math.round(n/2);if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
  78. 78. var done = 0;foreach(t in Task.all()) { if(t.done) { done = done + 1; }}
  79. 79. var done = 0;foreach(t in Task.all()) { if(t.done) { done = done + 1; }}var done = (Task.all() where done == true) .count();
  80. 80. function sqr(n : Num) : Num { return n * n;}
  81. 81. demo: todo list
  82. 82. web service access
  83. 83. service SomeService { resource tasks() : JSON { uri = "/tasks" } resource search(query : String) : JSON { uri = "/search?q=" + escape(query) }}
  84. 84. service Twitter { resource trends() : JSON { uri = "http://api.twitter.com/1/trends.json" encoding = "jsonp" } resource search(query : String) : JSON { uri = "http://search.twitter.com/search.json?q=" + escape(query) encoding = "jsonp" }}
  85. 85. 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"} ... ]}
  86. 86. type Trend { name : String url : String}function trendsMapper(json : JSON) : [Trend] { return json.trends;}
  87. 87. resource trends() : JSON { uri = "http://api.twitter.com/1/trends.json" encoding = "jsonp" mapper = trendsMapper}
  88. 88. screen root() { var trends = Twitter.trends() header("Twitter trends") group { list(topic in trends) { item { label(topic.name) } } }}
  89. 89. demo: twitter trends
  90. 90. user interface styling data modelingapplication logic web services
  91. 91. the glass ceiling
  92. 92. language smalllibrary large (and extensible)
  93. 93. how?- built-in types- built-in controls
  94. 94. how?- built-in types- built-in controls+ native interface+ sufficiently low-level primitives+ abstraction mechanisms (screens, controls, functions, types)
  95. 95. native interfaceexternal type String : Object { length : Num sync function charAt(index : Num) : String sync function charCodeAt(index : Num) : Num ...}external control html(h : String)external screen bla() : voidexternal function log(o : Object) : void
  96. 96. low-level primitivescontrol image(url : String, onclick : Callback = null) { <img src=url onclick=onclick/>}
  97. 97. low-level primitivescontrol slideupBlock() { div@<div onclick={ div.slideUp(); }> elements() </div>}...slideupBlock { label("Click me to slide up")}
  98. 98. low-level primitives control slideupBlock() {JQuery div@<div onclick={ div.slideUp(); }> elements() </div> } ... slideupBlock { label("Click me to slide up") }
  99. 99. mobl::test
  100. 100. deployment
  101. 101. deploymentpure client-side
  102. 102. code concatenation
  103. 103. code concatenationdead-code elimination
  104. 104. code concatenationdead-code elimination code minification
  105. 105. state of the public release: jan 6, 2011
  106. 106. state of the public release: jan 6, 2011 11 releases
  107. 107. state of the public release: jan 6, 2011 11 releases 1000+ visitors/day
  108. 108. state of the public release: jan 6, 2011 11 releases 1000+ visitors/dayfirst external commits are in
  109. 109. futureerror handlingdata evolutiondocumentation libraries
  110. 110. http://www.mobl-lang.orghttp://twitter.com/mobllanghttp://twitter.com/zef

×