mobl
94
mobl Zef Hemel
-
Upload
zefhemel -
Category
Technology
-
view
3.608 -
download
0
description
mobl is a new language for the development of mobile applications using web technologies.
Transcript of mobl
moblZef Hemel
50 million
iPhones
50 million
iPhones
20 million
iPod Touches
50 million
iPhones
20 million
iPod Touches
100 million
1.5 million
G1
1.5 million
G1
1.2 million
Droid
1.5 million
G1
1.2 million
Droid
2013
applicationdevelopment
Objective-C
Objective-C Java
Objective-C Java J2ME/C++
Objective-C Java J2ME/C++
HTML/Javascript
Objective-C Java J2ME/C++
HTML/Javascript Java
Objective-C
Android Java
Blackberry Java
J2ME
HTML/JS
3.3.1
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).
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).
AppStore
cross-platform development
arbitrary rejections
language expressivity
mobl
Webkit
HTML
WebDatabases
WebDatabases
WebDatabases
Location information (GPS)
WebDatabases
WebDatabases
Location information (GPS)
Threading
WebDatabases
WebDatabases
Location information (GPS)
Threading
Canvas
WebDatabases
WebDatabases
Location information (GPS)
Threading
Canvas
WebDatabases
Multi-touch
WebDatabases
Location information (GPS)
Threading
Canvas
WebDatabases
Multi-touch
Offline support
WebDatabases
Location information (GPS)
Threading
Canvas
WebDatabases
Multi-touch
Offline support
Full-screen support
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
syntax similar to
demo
entity Task { name : String (searchable) done : Bool tags : Collection<Tag> (inverse: tasks)}
entity Tag { name : String (searchable) tasks : Collection<Task> (inverse: tags)}
function sayHello(name : String) { alert("Hello there, " + name);}
screen root() { basicView("Tasks") { group { list(t in Task.all()) { item { label(t.name) } } } }}
screen prompt(question : String) : String { var answer = "" header(question) group { inputString(answer) } button("Done", onclick={ screen return answer; })}
screen root() { var firstName = prompt("First name?") var lastName = prompt("Last name?") header("Hello there") label("Hello, " + firstName + " " + lastName)}
data binding
var s = ""<span databind=s/>button("Set s", onclick={ s = "Hello";})
template label(t : String) { <span databind=t/>}...var s = ""label(s)button("Set s", onclick={ s = "Hello";})
two-way binding
<span databind=s/><input type="text" databind=s/>
reactive/dataflow programming
demo
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) }}
demo
implementation
HTML/Javascript
<span>64</span>
<span>64</span>
span
64
CSS stylesevents- onclick
var myspan = $("<span>");myspan.text("64");anotherEl.append(myspan);
sync vs async
var results = tx.executeQuery("SELECT * FROM Task");for(var i = 0; i < results.length; i++) { alert(results[i].name);}
synchronous programming
render page
query database and process
results
...
time
render page
query database and process
results
...
timebrowser freeze
render page
send query
...
process query result
...
time
tx.executeQuery("SELECT * FROM Task", function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } });...
asynchronous programming
tx.executeQuery("SELECT * FROM Task", function(results) { alert("Hello, "); });alert("world!");
tx.executeQuery("SELECT * FROM Task", function(results) { tx.executeQuery("INSERT ...", function() { alert("Selected, then inserted"); }); });
continuation-passing styletransformation
function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return position;}
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); });};
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); });};
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); });};
reactive programming
screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
var n = 8
var n = ref(8);
var n = 8
var n = ref(8);
Observable- set(value)- get()- addEventListener(eventType, callback)
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);
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);
screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
conclusion
many mobile platforms
HTML5/JS
avoid AppStore approval
mobl
statically-typed WebDSL-like language
generates HTML/JS
CPS transform/reactive programming
get it?
http://mobl-lang.org
http://twitter.com/zef
