The document describes MOBL, a programming language for building mobile web applications. MOBL aims to provide a small core language with large and extensible libraries. It includes built-in types, controls, and abstraction mechanisms like screens and functions. The language exposes low-level primitives while providing a native interface to external APIs. MOBL code can be deployed by concatenating, eliminating dead code, and minifying for client-side execution on mobile browsers. The language has been publicly released since January 2011 and sees over 1,000 visitors per day, with ongoing development focused on error handling, data evolution, documentation and libraries.

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

9. productivity

10. Reqs 10101

11. Reqs asm 10101

12. ’70-’80
Reqs C/C++ asm 10101

13. ’90-’10 ’70-’80
Reqs 3rd gen C/C++ asm 10101
Java/C#

14. ’90-’10 ’70-’80
Reqs DSLs 3rd gen C/C++ asm 10101
Java/C#

15. MoDSE

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

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

19. WebDatabases

20. WebDatabases
Location information
(GPS)

21. WebDatabases
Location information
(GPS)
Canvas

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

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

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

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

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

28. Address book

29. Address book
Camera

30. Address book
Camera
Compass

31. Address book
Camera
Compass
File IO

32. Address book
Camera
Compass
File IO
Notifications

34. annotated
HTML

35. annotated imperative
HTML Javascript

37. typed declarative
integrated concise

42. mobl program

43. user interface
styling
data modeling
application logic
web services

44. user interface

45. demo

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

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

48. control calls
button("Click me")

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

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

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

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

53. variable declarations
var b = true

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

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

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

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

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

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

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

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

62. higher-order controls

63. controls taking controls
as arguments
confused yet?

64. demo

65. styling

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

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

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

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

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

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

72. demo

73. data modeling
& query

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

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

76. var doneTasks = Task.all()

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

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

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

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

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

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

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

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

85. application
logic

86. logic in ui
label("Total tasks: " + Task.all().count())

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

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

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

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

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

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

93. demo: todo list

94. web service
access

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

96. 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"
}
}

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

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

99. resource trends() : JSON {
uri = "http://api.twitter.com/1/trends.json"
encoding = "jsonp"
mapper = trendsMapper
}

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

101. demo: twitter trends

102. user interface
styling
data modeling
application logic
web services

103. the glass ceiling

104. language small
library large (and extensible)

105. how?
- built-in types
- built-in controls

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

107. native interface
external 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() : void
external function log(o : Object) : void

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

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

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

111. mobl::test

112. deployment

113. deployment
pure client-side

116. code concatenation

117. code concatenation
dead-code elimination

118. code concatenation
dead-code elimination
code minification

119. state of the
public release: jan 6, 2011

120. state of the
public release: jan 6, 2011
11 releases

121. state of the
public release: jan 6, 2011
11 releases
1000+ visitors/day

122. state of the
public release: jan 6, 2011
11 releases
1000+ visitors/day
first external commits are in

123. future
error handling
data evolution
documentation
libraries

124. http://www.mobl-lang.org
http://twitter.com/mobllang
http://twitter.com/zef