mobl presentation @ IHomer

http://www.mobl-lang.org

Zef Hemel

Objective-C Java J2ME/C++

HTML/Javascript Java .NET

’70-’80

Reqs C/C++ asm 10101

’90-’10 ’70-’80

Reqs 3rd gen C/C++ asm 10101
Java/C#

’90-’10 ’70-’80

Reqs DSLs 3rd gen C/C++ asm 10101
Java/C#

Webkit browser Webkit browser J2ME/C++

Webkit browser Webkit browser .NET

WebDatabases

Location information
(GPS)

WebDatabases

(GPS)

Canvas

WebDatabases

(GPS)

Canvas

Multi-touch

WebDatabases

(GPS)
Ofﬂine support
Canvas

Multi-touch

WebDatabases
Full-screen support
(GPS)
Ofﬂine support
Canvas

Multi-touch

WebDatabases
Full-screen support
(GPS)
Ofﬂine support
Canvas
Accelerator support
Multi-touch

Audio
WebDatabases
Full-screen support
(GPS)
Ofﬂine support
Canvas
Accelerator support
Multi-touch

Address book
Camera
Compass

Address book
Camera
Compass
File IO

Address book
Camera
Compass
File IO
Notiﬁcations

annotated imperative
HTML Javascript

typed declarative

integrated concise

user interface

styling

data modeling

application logic

web services

ui syntax

screen name(farg*) : ReturnType? {
screenelem*
}

control name(farg*) {
screenelem*
}

control calls

variable declarations

control structures

inline HTML

script blocks

control calls
button("Click me")

control calls
button("Click me")

button("Click me", {
alert("Click!");
})

control calls
button("Click me")

button("Click me", {
alert("Click!");
})

button("Click me", onclick={
alert("Click!");
})

control calls with body

group() {
item() { "Item 1" }
item() { "Item 2" }
}

control calls with body

group {
item { "Item 1" }
item { "Item 2" }
}


var b = true


var b = true
var b : Bool = true


var b = true
var b : Bool = true
var newTask = Task()


var b = true
var b : Bool = true
var newTask = Task()
var newTask : Task = Task()

when

var b = true

checkBox(b)

when(b) {
label("Yep")
} else {
label("Nope")
}

list

var nums = [1, 2, 3]

group {
list(n in nums) {
item { label(n) }
}
}

inline HTML

<img src="img/icon.png"/>

inline HTML

<img src="img/icon.png"/>

<div class=selected ? selectedStyle
: notSelectedStyle>
...
</div>

script blocks
avoid if possible

var n = -1
script {
n = Math.sqrt(9);
}

controls taking controls
as arguments

confused yet?

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

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

control block(style : Style) {
...
}

block(bigAndBlueStyle) {
label("I am big and blue!");
}

style $baseColor = rgb(100, 100, 100)

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

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

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

style myStyle {
color: $baseColor;
borderRadiusMixin(10px);
}

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

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

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

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

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

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

Collection<Task>
where done == true
order by date desc
limit 10;

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

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

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

logic in ui

label("Total tasks: " + Task.all().count())

logic in ui

label("Total tasks: " + Task.all().count())

button("Click me", onclick={
alert("You clicked me!");
})

var n = 7;
var n2 = Math.round(n/2);

if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}

type inference
var n = 7;
var n2 = Math.round(n/2);

if(n2 > 3) {
alert("More than three!");
} else {
alert("Less than three!");
}

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

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

var done = (Task.all()
where done == true)
.count();

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

service SomeService {
resource tasks() : JSON {
uri = "/tasks"
}

resource search(query : String) : JSON {
uri = "/search?q=" + escape(query)
}
}

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

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

type Trend {
name : String
url : String
}

function trendsMapper(json : JSON) : [Trend] {
return json.trends;
}

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

screen root() {
var trends = Twitter.trends()

header("Twitter trends")
group {
list(topic in trends) {
item {
label(topic.name)
}
}
}
}

language small

library large (and extensible)

how?

- built-in types
- built-in controls

how?

- built-in types
- built-in controls

+ native interface
+ sufﬁciently low-level primitives
+ abstraction mechanisms (screens,
controls, functions, types)

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

low-level primitives

control image(url : String, onclick : Callback = null) {
<img src=url onclick=onclick/>
}


control slideupBlock() {
div@<div onclick={
div.slideUp();
}>
elements()
</div>
}

...

slideupBlock {
label("Click me to slide up")
}


control slideupBlock() {
JQuery div@<div onclick={
div.slideUp();
}>
elements()
</div>
}

...

slideupBlock {
label("Click me to slide up")
}

code concatenation

dead-code elimination

code concatenation

dead-code elimination

code miniﬁcation

state of the

public release: jan 6, 2011

state of the

11 releases

state of the

11 releases
1000+ visitors/day

state of the

11 releases
1000+ visitors/day
ﬁrst external commits are in

future

error handling
data evolution
documentation
libraries

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

mobl presentation @ IHomer

More Related Content

What's hot

Viewers also liked

Similar to mobl presentation @ IHomer

Recently uploaded

mobl presentation @ IHomer