The document discusses the mobl programming language for building mobile web applications. Mobl is a statically-typed language that compiles to HTML and JavaScript. It aims to provide features for building reactive user interfaces and uses techniques like continuation-passing style and observables to support asynchronous programming in a synchronous-looking way. The document provides examples of coding common mobile app patterns like data binding, network requests, and user input handling in mobl.

1. mobl
Zef Hemel

3. 50 million
iPhones

4. 50 million 20 million
iPhones iPod Touches

5. 50 million 20 million
iPhones iPod Touches
100 million

7. 1.5 million
G1

8. 1.5 million 1.2 million
G1 Droid

9. 1.5 million 1.2 million
G1 Droid
2013

11. application
development

12. Objective-C

13. Objective-C Java

14. Objective-C Java J2ME/C++

15. Objective-C Java J2ME/C++
HTML/Javascript

16. Objective-C Java J2ME/C++
HTML/Javascript Java

18. Objective-C
Android Java
Blackberry
Java
J2ME
HTML/JS

20. 3.3.1

21. 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).

22. 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).

25. AppStore

28. cross-platform development
arbitrary rejections
language expressivity

29. mobl

37. Webkit

38. HTML

39. WebDatabases

40. WebDatabases
Location information
(GPS)

41. WebDatabases
Location information
(GPS)
Threading

42. WebDatabases
Location information
(GPS)
Canvas
Threading

43. WebDatabases
Location information
(GPS)
Canvas
Multi-touch Threading

44. WebDatabases
Location information
(GPS)
Offline support
Canvas
Multi-touch Threading

45. WebDatabases
Full-screen support
Location information
(GPS)
Offline support
Canvas
Multi-touch Threading

46. “ 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

49. syntax similar to

50. demo

51. entity Task {
name : String (searchable)
done : Bool
tags : Collection<Tag> (inverse: tasks)
}
entity Tag {
name : String (searchable)
tasks : Collection<Task> (inverse: tags)
}

52. function sayHello(name : String) {
alert("Hello there, " + name);
}

53. screen root() {
basicView("Tasks") {
group {
list(t in Task.all()) {
item { label(t.name) }
}
}
}
}

54. screen prompt(question : String) : String {
var answer = ""
header(question)
group {
inputString(answer)
}
button("Done", onclick={
screen return answer;
})
}

55. screen root() {
var firstName = prompt("First name?")
var lastName = prompt("Last name?")
header("Hello there")
label("Hello, " + firstName + " "
+ lastName)
}

56. data binding

57. var s = ""
<span databind=s/>
button("Set s", onclick={
s = "Hello";
})

58. template label(t : String) {
<span databind=t/>
}
...
var s = ""
label(s)
button("Set s", onclick={
s = "Hello";
})

59. <span databind=s/>
<input type="text" databind=s/>
two-way binding

60. reactive/dataflow programming

61. demo

62. 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)
}
}

63. demo

64. implementation

65. HTML/Javascript

66. <span>64</span>

67. <span>64</span>
CSS styles
span
events
- onclick
64

68. var myspan = $("<span>");
myspan.text("64");
anotherEl.append(myspan);

69. sync vs async

70. synchronous programming
var results = tx.executeQuery("SELECT * FROM Task");
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}

71. render page
time
query database
and process
results
...

72. render page
time
query database
browser freeze and process
results
...

73. render page
send query
time
...
process query
result
...

74. asynchronous programming
tx.executeQuery("SELECT * FROM Task",
function(results) {
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}
});
...

75. tx.executeQuery("SELECT * FROM Task",
function(results) {
alert("Hello, ");
});
alert("world!");

76. tx.executeQuery("SELECT * FROM Task",
function(results) {
tx.executeQuery("INSERT ...", function() {
alert("Selected, then inserted");
});
});

77. continuation-passing style
transformation

78. function displayLocationAndReturn() : Coordinates {
var position = mobl::location::getPosition();
alert("Lat: " + position.latitude);
alert("Long: " + position.longitude);
return position;
}

79. 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);
});
};

80. 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);
});
};

81. 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);
});
};

82. reactive programming

83. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}

84. var n = 8
var n = ref(8);

85. var n = 8
var n = ref(8);
Observable
- set(value)
- get()
- addEventListener(eventType, callback)

86. 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);

87. 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);

88. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}

89. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}

90. screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}

91. conclusion

92. many mobile platforms
HTML5/JS
avoid AppStore approval

93. mobl
statically-typed WebDSL-like language
generates HTML/JS
CPS transform/reactive programming

94. get it?
http://mobl-lang.org
http://twitter.com/zef