Mobl is a programming language for building mobile web applications. It aims to provide portability across different mobile platforms and browsers by compiling to JavaScript and HTML5. Mobl supports common mobile features like location services, camera, contacts and more through a simple object-oriented syntax. It also includes tools for building user interfaces, accessing data through entities and queries, and making web service requests. The goal is to enable complete coverage of mobile development needs while avoiding platform-specific code.

1. http://www.mobl-lang.org
Zef Hemel

3. 230,000 300,000

5. Objective-C Java J2ME/C++
HTML/Javascript Java .NET

6. portability

7. Objective-C Java J2ME/C++
HTML/Javascript Java .NET

8. Webkit browser Webkit browser J2ME/C++
Webkit browser Webkit browser .NET

10. WebDatabases

11. WebDatabases
Location information
(GPS)

12. WebDatabases
Location information
(GPS)
Canvas

13. WebDatabases
Location information
(GPS)
Canvas
Multi-touch

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

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

16. WebDatabases
Full-screen support
Location information
(GPS)
Offline support
Canvas
Accelerator support
Multi-touch

18. Address book

19. Address book
Camera

20. Address book
Camera
Compass

21. Address book
Camera
Compass
File IO

22. Address book
Camera
Compass
File IO
Audio

23. Address book
Camera
Compass
File IO
Audio
Notifications

29. mobl program

30. today
1. language
2. behind the scenes

31. language

32. user interface
styling
data modeling
scripting
web services

33. user interface

34. demo

35. ui syntax
screen name(farg*) : ReturnType? {
screenelem*
}
control name(farg*) {
screenelem*
}

36. screen root() {
...
}

37. screen root() {
...
}
screen promptString(q : String) : String {
...
}

38. screen root() {
...
}
screen promptString(q : String) : String {
...
}
control button(s : String,
onclick : Callback = {}) {
...
}

39. control calls
variable declarations
control structures
inline HTML
script blocks

40. control calls
button("Click me")

41. control calls
button("Click me")
button("Click me", {
alert("Click!");
})

42. control calls
button("Click me")
button("Click me", {
alert("Click!");
})
button("Click me", onclick={
alert("Click!");
})

43. control calls with body
group() {
item() { "Item 1" }
item() { "Item 2" }
}

44. control calls with body
group {
item { "Item 1" }
item { "Item 2" }
}

45. variable declarations
var b = true

46. variable declarations
var b = true
var b : Bool = true

47. variable declarations
var b = true
var b : Bool = true
var newTask = Task()

48. variable declarations
var b = true
var b : Bool = true
var newTask = Task()
var newTask : Task = Task()

49. when
var b = true
checkBox(b)
when(b) {
label("Yep")
} else {
label("Nope")
}

50. list
var nums = [1, 2, 3]
group {
list(n in nums) {
item { label(n) }
}
}

51. inline HTML
<img src="img/icon.png"/>

52. inline HTML
<img src="img/icon.png"/>
<div class=selected ? selectedStyle
: notSelectedStyle>
...
</div>

53. script blocks
avoid if possible
var n = -1
script {
n = Math.sqrt(9);
}

54. higher-order controls

55. demo

56. styling

57. style bigAndBlue {
color: blue;
font-size: 40px;
}

58. Style
style bigAndBlue {
color: blue;
font-size: 40px;
}

59. control block(style : Style) {
...
}
block(bigAndBlueStyle) {
label("I am big and blue!");
}

60. style $baseColor = rgb(100, 100, 100)
style myStyle {
color: rgb($baseColor.r+10,
$baseColor.g+50,
$baseColor.b-20);
font-size: 20px;
}

61. style mixin borderRadiusMixin($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}

62. style mixin borderRadiusMixin($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
style myStyle {
color: $baseColor;
borderRadiusMixin(10px);
}

63. demo

64. data modeling
& query

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

66. var newTask = Task(name="New task");
newTask.done = false;
add(newTask);

67. var doneTasks = Task.all()

68. Collection<Task>
var doneTasks = Task.all()

69. Collection<Task>
var doneTasks = Task.all()
.filter("done", "=", true)
.order("date", false)
.limit(10);

70. Collection<Task>
var tagDoneTasks = tag.tasks
.filter("done", "=", true)
.order("date", false)
.limit(10);

71. Collection<Task>
var doneTasks = Task.all()

72. Collection<Task>
var doneTasks = Task.all()
where done == true
order by date desc
limit 10;

73. Collection<Task>
var tagDoneTasks = tag.tasks
where done == true
order by date desc
limit 10;

74. Collection<Task>
var searchTasks = Task.search("task")
where done == true
limit 10;

75. screen root() {
header("Tasks")
group {
list(t in Task.all() order by date desc) {
item { label(t.name) }
}
}
}

76. scripting

77. script in ui
label("Total tasks: " + Task.all().count())

78. script in ui
label("Total tasks: " + Task.all().count())
button("Click me", onclick={
alert("You clicked me!");
})

79. var n = 7;
var n2 = Math.round(n/2);
if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}

80. type inference
var n = 7;
var n2 = Math.round(n/2);
if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}

81. var done = 0;
foreach(t in Task.all()) {
if(t.done) {
done = done + 1;
}
}

82. var done = 0;
foreach(t in Task.all()) {
if(t.done) {
done = done + 1;
}
}
var done = (Task.all()
where done == true)
.count();

83. function sqr(n : Num) : Num {
return n * n;
}

84. demo: todo list

85. web service
access

86. service SomeService {
resource tasks() : JSON {
uri = "/tasks"
}
resource search(query : String) : JSON {
uri = "/search?q=" + escape(query)
}
}

87. ajax same-source restriction
service 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)
}
}

88. 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"}
...
]
}

89. type Trend {
name : String
url : String
}
function trendsMapper(json : JSON) : [Trend] {
return json.trends;
}

90. resource trends() : JSON {
uri = "/_proxy/api.twitter.com/1/trends.json"
mapper = trendsMapper
}

91. screen root() {
var trends = Twitter.trends()
header("Twitter trends")
group {
list(topic in trends) {
item {
label(topic.name)
}
}
}
}

92. user interface
styling
data modeling
scripting
web services

93. limitations
slower than native
no native UI
not great for games

94. behind the scenes

95. goals
portability
completeness
coverage

96. goals
portability web
completeness
coverage

97. goals
portability web
completeness 100% code gen
coverage

98. design bottom-up

99. roadmap
1. design core abstractions + native interface

100. roadmap
1. design core abstractions + native interface
2. enable user land abstractions

101. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax

102. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

103. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

104. core abstraction:
synchronous programming
no more asynchronous
spaghetti code

105. synchronous programming
var results = Task.all().list();
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}

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

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

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

109. asynchronous programming
Task.all.list(function(results) {
for(var i = 0; i < results.length; i++) {
alert(results[i].name);
}
});
...

110. Task.all().list(function(results) {
alert("Hello, ");
});
alert("world!");

111. Task.all().list(function(results) {
alert("Hello, ");
}); breaks sequential
alert("world!");
execution assumption

112. Task.all().list(function(results) {
// make changes
...
persistence.flush(function() {
alert("Changes saved!");
});
});

113. continuation-passing style
transformation

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

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

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

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

118. core abstraction:
data binding
no more copying data from and
to UI

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

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

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

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

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

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

125. button("Inc", onclick={
n = n + 1;
})
var node = $("<button ...>");
node.text("Inc");
node.click(function() {
n.set(n.get() + 1);
});
root.append(node);

126. button("Inc", onclick={
n = n + 1;
})
var node = $("<button ...>");
node.text("Inc");
node.click(function() {
n.set(n.get() + 1);
});
root.append(node);

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

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

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

130. core abstraction:
data modeling & query
no more SQL

131. uses persistence.js
http://persistencejs.org

132. 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');

133. foreach(t in Task.all()) {
alert(t.name);
}
Task.all().forEach(function(t) {
alert(t.name);
});

134. foreach(t in Task.all() where done == true) {
alert(t.name);
}
Task.all().filter("done", "=", true).forEach(function(t) {
alert(t.name);
});

135. native interface

136. external entity MyEntity
external type MyType
external control contextMenu()
external screen specialScreen()
external sync function add(o : Object) : void
external style myStyle

137. external sync function add(o : Object) : void
<javascript>
__ns.add = function(o) {
persistence.add(o);
};
</javascript>

138. load styles/default.css
load js/persistence.js

139. where do abstractions
come from?

140. where do abstractions
come from?
domain

141. where do abstractions
come from?
domain
experience

142. domain

143. screen
domain

144. control
screen
domain

145. control
screen entity
domain

146. control
screen entity
domain
event

147. control
screen entity
domain
event web service

148. experience

149. other DSLs
experience

150. other DSLs
experience
programming
paradigms

151. other DSLs annoyances
experience
programming
paradigms

152. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

153. goal
compiler small
library large (and extensible)

154. how?
- built-in types
- built-in controls
+ native interface
+ sufficiently low-level primitives
+ abstraction mechanisms (screens,
controls, functions, types)

155. native interface
external 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
...
}

156. low-level primitives
control image(url : String, onclick : Callback = null) {
<img src=url onclick=onclick/>
}

157. low-level primitives
control slideupBlock() {
div@<div onclick={
div.slideUp();
}>
elements()
</div>
}
...
slideupBlock {
label("Click me to slide up")
}

158. low-level primitives
control slideupBlock() {
JQuery div@<div onclick={
div.slideUp();
}>
elements()
</div>
}
...
slideupBlock {
label("Click me to slide up")
}

159. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

160. var doneTasks = Task.all()

161. var doneTasks = Task.all()
.filter("done", "=", true)
.order("date", false)
.limit(10);

162. var doneTasks = Task.all()

163. var doneTasks = Task.all()
where done == true
order by date desc
limit 10;

164. roadmap
1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

165. load styles/default.css

166. 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;
}

167. issue
out of sight,
no checking
out of mind
<div class="headerr">
</div>

168. little abstraction
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;
}

169. little abstraction
div.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;
}

170. 1. design core abstractions + native interface
2. enable user land abstractions
3a. support successful ULAs with syntax
3b. support common native interface cases
with core abstractions

171. http://www.mobl-lang.org