Embed Size (px)
DESCRIPTION
Citation preview
230,000 300,000
Objective-C Java J2ME/C++
HTML/Javascript Java .NET
portability
productivity
Reqs 10101
Reqs 10101asm
Reqs 10101asmC/C++
’70-’80
Reqs 10101asmC/C++
’70-’80
3rd genJava/C#
’90-’10
Reqs 10101asmC/C++
’70-’80
3rd genJava/C#
’90-’10
DSLs
MoDSE
Objective-C Java J2ME/C++
HTML/Javascript Java .NET
Webkit browser Webkit browser J2ME/C++
Webkit browser Webkit browser .NET
WebDatabases
WebDatabases
Location information (GPS)
WebDatabases
Location information (GPS)
Canvas
WebDatabases
Location information (GPS)
Canvas
Multi-touch
WebDatabases
Location information (GPS)
Canvas
Multi-touch
Offline support
WebDatabases
Location information (GPS)
Canvas
Multi-touch
Offline support
Full-screen support
WebDatabases
Location information (GPS)
Canvas
Multi-touch
Offline support
Full-screen support
Accelerator support
WebDatabases
Location information (GPS)
Canvas
Multi-touch
Offline support
Full-screen support
Accelerator support
Audio
Address book
Address book
Camera
Address book
Camera
Compass
Address book
Camera
Compass
File IO
Address book
Camera
Compass
File IO
Notifications
annotated HTML
annotated HTML
imperative Javascript
declarativetyped
integrated concise
mobl program
user interface
styling
data modeling
application logic
web services
user interface
demo
screen name(farg*) : ReturnType? { screenelem*}
control name(farg*) { screenelem*}
ui syntax
control calls
variable declarations
inline HTML
script blocks
control structures
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
group() { item() { "Item 1" } item() { "Item 2" }}
control calls with body
group { item { "Item 1" } item { "Item 2" }}
control calls with body
variable declarations
var b = true
variable declarations
var b = truevar b : Bool = true
variable declarations
var b = true
var newTask = Task()
var b : Bool = true
variable declarations
var b = true
var newTask = Task()
var b : Bool = true
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
var n = -1script { n = Math.sqrt(9);}
avoid if possible
higher-order controls
controls taking controlsas arguments
confused yet?
demo
styling
style bigAndBlue { color: blue; font-size: 40px;}
style bigAndBlue { color: blue; font-size: 40px;}
Style
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);}
demo
data modeling& query
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);
var doneTasks = Task.all()
var doneTasks = Task.all()
Collection<Task>
var doneTasks = Task.all()
Collection<Task>
.filter("done", "=", true)
.order("date", false)
.limit(10);
var tagDoneTasks = tag.tasks .filter("done", "=", true) .order("date", false) .limit(10);
Collection<Task>
var doneTasks = Task.all()
Collection<Task>
var doneTasks = Task.all()
Collection<Task>
where done == trueorder by date desclimit 10;
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;
Collection<Task>
screen root() { header("Tasks") group { list(t in Task.all() order by date desc) { item { label(t.name) } } }}
applicationlogic
label("Total tasks: " + Task.all().count())
logic in ui
button("Click me", onclick={ alert("You clicked me!");})
label("Total tasks: " + Task.all().count())
logic in ui
var n = 7;var n2 = Math.round(n/2);
if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
var n = 7;var n2 = Math.round(n/2);
if(n2 > 3) { alert("More than three!");} else { alert("Less than three!");}
type inference
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;}
demo: todo list
web serviceaccess
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" }}
{"trends": [{"url":"http://search.twitter.com/search?q=...", "name":"#ihaveadream"}, {"url":"http://search.twitter.com/search?q=...", "name":"#mlkday"} ... ]}
http://api.twitter.com/1/trends.json
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) } } }}
demo: twitter trends
user interface
styling
data modeling
application logic
web services
the glass ceiling
language small
library large (and extensible)
how?
- built-in types- built-in controls
how?
- built-in types- built-in controls
+ native interface+ sufficiently 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() : voidexternal function log(o : Object) : void
control image(url : String, onclick : Callback = null) { <img src=url onclick=onclick/>}
low-level primitives
control slideupBlock() { div@<div onclick={ div.slideUp(); }> elements() </div>}
...
slideupBlock { label("Click me to slide up")}
low-level primitives
control slideupBlock() { div@<div onclick={ div.slideUp(); }> elements() </div>}
...
slideupBlock { label("Click me to slide up")}
low-level primitives
JQuery
mobl::test
deployment
deployment
pure client-side
code concatenation
code concatenation
dead-code elimination
code concatenation
dead-code elimination
code minification
public release: jan 6, 2011
state of the
public release: jan 6, 2011
state of the
11 releases
public release: jan 6, 2011
state of the
11 releases
1000+ visitors/day
public release: jan 6, 2011
state of the
11 releases
1000+ visitors/day
first external commits are in
future
documentation
data evolution
libraries
error handling
http://www.mobl-lang.org
http://twitter.com/zefhttp://twitter.com/mobllang
