mobl

mobl Zef Hemel

50 million iPhones

50 million 20 million iPhones iPod Touches

50 million 20 million iPhones iPod Touches 100 million

1.5 million G1

1.5 million 1.2 million G1 Droid

1.5 million 1.2 million G1 Droid 2013

application development

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 – 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

Webkit

WebDatabases

WebDatabases Location information (GPS)

WebDatabases Location information (GPS) Threading

WebDatabases Location information (GPS) Canvas Threading

WebDatabases Location information (GPS) Canvas Multi-touch Threading

WebDatabases Location information (GPS) Ofﬂine support Canvas Multi-touch Threading

WebDatabases Full-screen support Location information (GPS) Ofﬂine support Canvas Multi-touch Threading

“ 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

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 = "" button("Set s", onclick={ s = "Hello"; })

template label(t : String) { } ... var s = "" label(s) button("Set s", onclick={ s = "Hello"; })

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

reactive/dataﬂow programming

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

implementation

HTML/Javascript

64

64 CSS styles span events - onclick 64

var myspan = $(""); myspan.text("64"); anotherEl.append(myspan);

sync vs async

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

render page time query database and process results ...

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

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

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

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 style transformation

function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); alert("Lat: " + position.latitude); alert("Long: " + position.longitude); return 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 = $(""); 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 = $(""); 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; }) }

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

http://zef.me	311
http://www.slideshare.net	15
http://feeds.feedburner.com	1
http://translate.googleusercontent.com	1

mobl

by zefhemel

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 328

Statistics

mobl Presentation Transcript