1.
mobl
Zef Hemel

2.
50 million
iPhones

3.
50 million 20 million
iPhones iPod Touches

4.
50 million 20 million
iPhones iPod Touches
100 million

5.
1.5 million
G1

6.
1.5 million 1.2 million
G1 Droid

7.
1.5 million 1.2 million
G1 Droid
2013

8.
application
development

9.
Objective-C

10.
Objective-C Java

11.
Objective-C Java J2ME/C++

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

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

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

15.
3.3.1

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.
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.
AppStore

19.
cross-platform development
arbitrary rejections
language expressivity

20.
mobl

21.
Webkit

22.
HTML

23.
WebDatabases

24.
WebDatabases
Location information
(GPS)

25.
WebDatabases
Location information
(GPS)
Threading

26.
WebDatabases
Location information
(GPS)
Canvas
Threading

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

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

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

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.
syntax similar to

32.
demo

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

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

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

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

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

38.
data binding

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

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

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

42.
reactive/dataflow programming

43.
demo

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.
demo

46.
implementation

47.
HTML/Javascript

48.
<span>64</span>

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

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

51.
sync vs async

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

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

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

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

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

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

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

59.
continuation-passing style
transformation

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

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.
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.
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.
reactive programming

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

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

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

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.
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.
screen root() {
var n = 8
label(n * n)
button("Inc", onclick={
n = n + 1;
})
}

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

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

73.
conclusion

74.
many mobile platforms
HTML5/JS
avoid AppStore approval

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

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