mobl

3,147 views

Published on

mobl is a new language for the development of mobile applications using web technologies.

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
3,147
On SlideShare
0
From Embeds
0
Number of Embeds
347
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

mobl

  1. 1. mobl Zef Hemel
  2. 2. 50 million iPhones
  3. 3. 50 million 20 million iPhones iPod Touches
  4. 4. 50 million 20 million iPhones iPod Touches 100 million
  5. 5. 1.5 million G1
  6. 6. 1.5 million 1.2 million G1 Droid
  7. 7. 1.5 million 1.2 million G1 Droid 2013
  8. 8. application development
  9. 9. Objective-C
  10. 10. Objective-C Java
  11. 11. Objective-C Java J2ME/C++
  12. 12. Objective-C Java J2ME/C++ HTML/Javascript
  13. 13. Objective-C Java J2ME/C++ HTML/Javascript Java
  14. 14. Objective-C Android Java Blackberry Java J2ME HTML/JS
  15. 15. 3.3.1
  16. 16. 3.3.1 – Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).
  17. 17. 3.3.1 – Applications may only use Documented APIs in the manner prescribed by Apple and must not use or call any private APIs. Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited).
  18. 18. AppStore
  19. 19. cross-platform development arbitrary rejections language expressivity
  20. 20. mobl
  21. 21. Webkit
  22. 22. HTML
  23. 23. WebDatabases
  24. 24. WebDatabases Location information (GPS)
  25. 25. WebDatabases Location information (GPS) Threading
  26. 26. WebDatabases Location information (GPS) Canvas Threading
  27. 27. WebDatabases Location information (GPS) Canvas Multi-touch Threading
  28. 28. WebDatabases Location information (GPS) Offline support Canvas Multi-touch Threading
  29. 29. WebDatabases Full-screen support Location information (GPS) Offline support Canvas Multi-touch Threading
  30. 30. “ We believe the web has won and over the next several years, the browser [..] will become the platform that matters and certainly that’s where Google is investing. ” Vic Gundotra, Google VP of Engineering
  31. 31. syntax similar to
  32. 32. demo
  33. 33. entity Task { name : String (searchable) done : Bool tags : Collection<Tag> (inverse: tasks) } entity Tag { name : String (searchable) tasks : Collection<Task> (inverse: tags) }
  34. 34. function sayHello(name : String) { alert("Hello there, " + name); }
  35. 35. screen root() { basicView("Tasks") { group { list(t in Task.all()) { item { label(t.name) } } } } }
  36. 36. screen prompt(question : String) : String { var answer = "" header(question) group { inputString(answer) } button("Done", onclick={ screen return answer; }) }
  37. 37. screen root() { var firstName = prompt("First name?") var lastName = prompt("Last name?") header("Hello there") label("Hello, " + firstName + " " + lastName) }
  38. 38. data binding
  39. 39. var s = "" <span databind=s/> button("Set s", onclick={ s = "Hello"; })
  40. 40. template label(t : String) { <span databind=t/> } ... var s = "" label(s) button("Set s", onclick={ s = "Hello"; })
  41. 41. <span databind=s/> <input type="text" databind=s/> two-way binding
  42. 42. reactive/dataflow programming
  43. 43. demo
  44. 44. screen root() { var amount = 10 var percentage = 10 var total = amount * (1 + percentage/100) header("Tip calculator") group { inputNumber(amount, label="amount") inputNumber(percentage, label="%") label(total) } }
  45. 45. demo
  46. 46. implementation
  47. 47. HTML/Javascript
  48. 48. <span>64</span>
  49. 49. <span>64</span> CSS styles span events - onclick 64
  50. 50. var myspan = $("<span>"); myspan.text("64"); anotherEl.append(myspan);
  51. 51. sync vs async
  52. 52. synchronous programming var results = tx.executeQuery("SELECT * FROM Task"); for(var i = 0; i < results.length; i++) { alert(results[i].name); }
  53. 53. render page time query database and process results ...
  54. 54. render page time query database browser freeze and process results ...
  55. 55. render page send query time ... process query result ...
  56. 56. asynchronous programming tx.executeQuery("SELECT * FROM Task", function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } }); ...
  57. 57. tx.executeQuery("SELECT * FROM Task", function(results) { alert("Hello, "); }); alert("world!");
  58. 58. tx.executeQuery("SELECT * FROM Task", function(results) { tx.executeQuery("INSERT ...", function() { alert("Selected, then inserted"); }); });
  59. 59. continuation-passing style transformation
  60. 60. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return position; }
  61. 61. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return position; } function displayLocationAndReturn(callback) { mobl.location.getPosition(function(result) { var position = result; alert("Lat: " + position.latitude); alert("Long: " + position.longitude); callback(position); }); };
  62. 62. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return position; } function displayLocationAndReturn(callback) { mobl.location.getPosition(function(result) { var position = result; alert("Lat: " + position.latitude); alert("Long: " + position.longitude); callback(position); }); };
  63. 63. function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return position; } function displayLocationAndReturn(callback) { mobl.location.getPosition(function(result) { var position = result; alert("Lat: " + position.latitude); alert("Long: " + position.longitude); callback(position); }); };
  64. 64. reactive programming
  65. 65. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; }) }
  66. 66. var n = 8 var n = ref(8);
  67. 67. var n = 8 var n = ref(8); Observable - set(value) - get() - addEventListener(eventType, callback)
  68. 68. label(n * n) var node565 = $("<span>"); node565.text(n.get() * n.get()); n.addEventListener("change", function() { node565.text(n.get() * n.get()); }); root.append(node565);
  69. 69. button("Inc", onclick={ n = n + 1; }) var nodes566 = $("<span class='button'>"); node566.text("Inc"); node566.click(function() { n.set(n.get() + 1); }); root.append(node566);
  70. 70. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; }) }
  71. 71. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; }) }
  72. 72. screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; }) }
  73. 73. conclusion
  74. 74. many mobile platforms HTML5/JS avoid AppStore approval
  75. 75. mobl statically-typed WebDSL-like language generates HTML/JS CPS transform/reactive programming
  76. 76. get it? http://mobl-lang.org http://twitter.com/zef

×