1. Zef Hemel, Eelco Visser

6. 230,000/day

8. 200,000/day

10. application
development

11. Objective-C

12. Objective-C Java

13. Objective-C Java J2ME/C++

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

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

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

17. AppStore

20. portability
deployment

22. WWW

27. HTML

28. WebDatabases

29. WebDatabases
Location information
(GPS)

30. WebDatabases
Location information
(GPS)
Threading

31. WebDatabases
Location information
(GPS)
Threading
Canvas

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

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

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

38. mobile web apps

39. HTML
CSS
Javascript
SQL
cache
manifests

40. HTML
CSS
Javascript
SQL
cache
manifests

45. user interface abstraction

46. user interface abstraction

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

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

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

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

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

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

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

54. mix of loosely-coupled DSLs
poor tool-support for mixed-language projects
lack of abstraction in UI
asynchronous programming

56. demo
http://confplan.zef.me

58. task 1:
user interface
http://mobl-lang.org/get.html
http://webdsl.org/zip/devnology/eclipselinux64.zip
http://webdsl.org/zip/devnology/eclipselinux.zip
http://webdsl.org/zip/devnology/eclipsemac64.zip
http://webdsl.org/zip/devnology/eclipsewin.zip

59. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

60. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

61. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

62. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

63. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

64. application tipcalculator
import mobl::ui::generic
screen root() {
var amount = 10
var percentage = 10
header("Tip calculator")
group {
item { numField(amount, label="amount") }
item { numField(percentage, label="percentage") }
item { "$" label(amount * (1 + percentage/100)) }
}
}

65. task 2:
scripting

66. application test
import mobl::ui::generic
function fac(n : Num) : Num {
if(n == 1) {
return 1;
} else {
return n * fac(n-1);
}
}
screen promptNum(question : String) : Num {
var answer = 0
header(question) {
button("Done", onclick={
screen return answer;
})
}
group {
item {
numField(answer)
}
}
}
screen root() {
header("Calculator")
var n = 2
group {
item { numField(n) }
}
button("*", onclick={ n = n * promptNum("Multiply with"); })
button("+", onclick={ n = n + promptNum("Add"); })
button("!", onclick={ n = fac(n); })
}

67. application test
import mobl::ui::generic
function fac(n : Num) : Num {
if(n == 1) {
return 1;
} else {
return n * fac(n-1);
}
}
screen promptNum(question : String) : Num {
var answer = 0
header(question) {
button("Done", onclick={
screen return answer;
})
}
group {
item {
numField(answer)
}
}
}
screen root() {
header("Calculator")
var n = 2
group {
item { numField(n) }
}
button("*", onclick={ n = n * promptNum("Multiply with"); })
button("+", onclick={ n = n + promptNum("Add"); })
button("!", onclick={ n = fac(n); })
}

68. application test
import mobl::ui::generic
function fac(n : Num) : Num {
if(n == 1) {
return 1;
} else {
return n * fac(n-1);
}
}
screen promptNum(question : String) : Num {
var answer = 0
header(question) {
button("Done", onclick={
screen return answer;
})
}
group {
item {
numField(answer)
}
}
}
screen root() {
header("Calculator")
var n = 2
group {
item { numField(n) }
}
button("*", onclick={ n = n * promptNum("Multiply with"); })
button("+", onclick={ n = n + promptNum("Add"); })
button("!", onclick={ n = fac(n); })
}

69. application todo
import mobl::ui::generic
function fac(n : Num) : Num {
if(n == 1) {
return 1;
} else {
return n * fac(n-1);
}
}
screen promptNum(question : String) : Num {
var answer = 0
header(question) {
button("Done", onclick={
screen return answer;
})
}
group {
item {
numField(answer)
}
}
}
screen root() {
header("Calculator")
var n = 2
group {
item { numField(n) }
}
button("*", onclick={ n = n * promptNum("Multiply with"); })
button("+", onclick={ n = n + promptNum("Add"); })
button("!", onclick={ n = fac(n); })
}

70. application test
import mobl::ui::generic
function fac(n : Num) : Num {
if(n == 1) {
return 1;
} else {
return n * fac(n-1);
}
}
screen promptNum(question : String) : Num {
var answer = 0
header(question) {
button("Done", onclick={
screen return answer;
})
}
group {
item {
numField(answer)
}
}
}
screen root() {
header("Calculator")
var n = 2
group {
item { numField(n) }
}
button("*", onclick={ n = n * promptNum("Multiply with"); })
button("+", onclick={ n = n + promptNum("Add"); })
button("!", onclick={ n = fac(n); })
}

71. var pos = getPosition();
alert("Your location is: " + pos);

72. var pos = getPosition();
alert("Your location is: " + pos);
var pos;
getPosition(function(result) {
pos = result;
alert("Your location is: " + pos);
...
});
continuation-passing
style transformation

73. task 3:
data modeling and query

74. entity Task {
name : String (searchable)
done : Bool
dateAdded : DateTime
}

75. entity Task {
name : String (searchable)
done : Bool
dateAdded : DateTime
category : Category (inverse: tasks)
tags : Collection<Tag> (inverse: tasks)
}
entity Category {
name : String
tasks : Collection<Task> (inverse: category)
}
entity Tag {
name : String
tasks : Collection<Task> (inverse: tags)
}

76. screen root() {
header("Tasks") {
button("Add", onclick={ addTask(); })
}
group {
list(t in Task.all() order by dateAdded desc) {
taskItem(t)
}
}
button("Search", onclick={ search(); })
}
screen search() {
var phrase = ""
header("Search") { backButton() }
searchBox(phrase)
group {
list(t in Task.searchPrefix(phrase)) {
taskItem(t)
}
}
}

77. screen root() {
header("Tasks") {
button("Add", onclick={ addTask(); })
}
group {
list(t in Task.all() order by dateAdded desc) {
taskItem(t)
}
}
button("Search", onclick={ search(); })
}
screen search() {
var phrase = ""
header("Search") { backButton() }
searchBox(phrase)
group {
list(t in Task.searchPrefix(phrase)) {
taskItem(t)
}
}
}

78. control taskItem(t : Task) {
item(onclick={ taskDetails(t); }) {
checkBox(t.done)
" "
label(t.name)
contextMenu {
button("Remove", onclick={
remove(t);
})
}
}
}

79. control taskItem(t : Task) {
item(onclick={ taskDetails(t); }) {
checkBox(t.done)
" "
label(t.name)
contextMenu {
button("Remove", onclick={
remove(t);
})
}
}
}

80. Task.all()

81. Task.all() where done == false && ...
order by dateAdded desc
limit 10
offset 5

82. Task.all() where done == false && ...
order by dateAdded desc
limit 10
offset 5

83. task 4:
higher-order controls and
native interfaces

84. control taskItem(t : Task) {
checkBox(t.done)
" "
label(t.name)
contextMenu {
button("Remove", onclick={
remove(t);
})
}
}
control taskDetail(t : Task) {
group {
item { textField(t.name, placeholder="Task name") }
item { checkBox(t.done, label="Done") }
}
}
screen root() {
header("Tasks") {
button("Add", onclick={ addTask(); })
}
masterDetail(Task.all() order by dateAdded desc, taskItem, taskDetail)
button("Search", onclick={ search(); })
}

85. control taskItem(t : Task) {
checkBox(t.done)
" "
label(t.name)
contextMenu {
button("Remove", onclick={
remove(t);
})
}
}
control taskDetail(t : Task) {
group {
item { textField(t.name, placeholder="Task name") }
item { checkBox(t.done, label="Done") }
}
}
screen root() {
header("Tasks") {
button("Add", onclick={ addTask(); })
}
masterDetail(Task.all() order by dateAdded desc, taskItem, taskDetail)
button("Search", onclick={ search(); })
}

86. control masterDetail(items : Collection<Dynamic>, masterItem : Control1<Dynamic>,
detail : Control1<Dynamic>) {
group {
list(it in items) {
item(onclick={ detailScreen(it, detail); }) {
masterItem(it)
}
}
}
}
screen detailScreen(it : Dynamic, detail : Control1<Dynamic>) {
header("Detail") {
backButton("Back", onclick={ screen return; })
}
detail(it)
}

89. external type LocalStorage {
static sync function getItem(key : String) : Dynamic
static sync function setItem(key : String, val : Object) : void
static sync function removeItem(key : String) : void
static sync function clear() : void
}
<javascript>
firstapp.LocalStorage = window.localStorage;
</javascript>

90. what else is there?

91. service DataProvider {
resource getNearbyConferences(lat : Num, long : Num) : [JSON] {
uri = "/nearbyConferences"
}
resource fetchProgram(conferenceId : String) : [JSON] {
uri = "/conferenceProgram"
}
}
web services

92. service DataProvider {
resource getNearbyConferences(lat : Num, long : Num) : [JSON] {
uri = "/nearbyConferences"
}
resource fetchProgram(conferenceId : String) : [JSON] {
uri = "/conferenceProgram"
}
}
function loadLocalConferences() {
var position = getPosition();
var nearbyConferencesJson = DataProvider.getNearbyConferences(position.latitude,
position.longitude);
foreach(jsonObj in nearbyConferencesJson) {
Conference.fromSelectJson(jsonObj);
}
}
web services

93. location & maps

94. mobl::ui::ios mobl::ui::jq

95. mobl::ui::ios mobl::ui::jq
mobl::ui

96. application confplan
offline true
title "ConfPlan"

97. future

98. adaptive user interfaces
database sync
more high-level controls
web/native hybrid (PhoneGap)

99. http://mobl-lang.org
http://twitter.com/zef
http://twitter.com/mobllang
http://zef.me