• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
mobl - model-driven engineering lecture
 

mobl - model-driven engineering lecture

on

  • 2,535 views

 

Statistics

Views

Total Views
2,535
Views on SlideShare
2,531
Embed Views
4

Actions

Likes
3
Downloads
28
Comments
0

2 Embeds 4

http://twitter.com 2
http://wiki.onakasuita.org 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    mobl - model-driven engineering lecture mobl - model-driven engineering lecture Presentation Transcript

    • http://www.mobl-lang.orgZef Hemel
    • 230,000 300,000
    • Objective-C Java J2ME/C++HTML/Javascript Java .NET
    • portability
    • Objective-C Java J2ME/C++HTML/Javascript Java .NET
    • Webkit browser Webkit browser J2ME/C++ Webkit browser Webkit browser .NET
    • WebDatabases
    • WebDatabasesLocation information (GPS)
    • WebDatabasesLocation information (GPS) Canvas
    • WebDatabasesLocation information (GPS) Canvas Multi-touch
    • WebDatabasesLocation information (GPS) Offline support Canvas Multi-touch
    • WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Multi-touch
    • WebDatabases Full-screen supportLocation information (GPS) Offline support Canvas Accelerator support Multi-touch
    • Address book
    • Address book Camera
    • Address book Camera Compass
    • Address book Camera Compass File IO
    • Address book Camera Compass File IO Audio
    • Address book Camera Compass File IO AudioNotifications
    • mobl program
    • today1. language2. behind the scenes
    • language
    • user interface stylingdata modeling scriptingweb services
    • user interface
    • demo
    • ui syntaxscreen name(farg*) : ReturnType? { screenelem*}control name(farg*) { screenelem*}
    • screen root() { ...}
    • screen root() { ...}screen promptString(q : String) : String { ...}
    • screen root() { ...}screen promptString(q : String) : String { ...}control button(s : String, onclick : Callback = {}) { ...}
    • control callsvariable declarations control structures inline HTML script blocks
    • control callsbutton("Click me")
    • control callsbutton("Click me")button("Click me", { alert("Click!");})
    • control callsbutton("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" } }
    • variable declarationsvar b = true
    • variable declarationsvar b = truevar b : Bool = true
    • variable declarationsvar b = truevar b : Bool = truevar newTask = Task()
    • variable declarationsvar b = truevar b : Bool = truevar newTask = Task()var newTask : Task = Task()
    • whenvar b = truecheckBox(b)when(b) { label("Yep")} else { label("Nope")}
    • listvar 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 possiblevar n = -1script { n = Math.sqrt(9);}
    • higher-order controls
    • demo
    • styling
    • style bigAndBlue { color: blue; font-size: 40px;}
    • Stylestyle 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);}
    • 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()
    • Collection<Task>var doneTasks = Task.all()
    • Collection<Task>var doneTasks = Task.all() .filter("done", "=", true) .order("date", false) .limit(10);
    • Collection<Task>var tagDoneTasks = tag.tasks .filter("done", "=", true) .order("date", false) .limit(10);
    • Collection<Task>var doneTasks = Task.all()
    • Collection<Task>var doneTasks = Task.all() 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) } } }}
    • scripting
    • script in uilabel("Total tasks: " + Task.all().count())
    • script in uilabel("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 inferencevar 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;}
    • demo: todo list
    • web service access
    • service SomeService { resource tasks() : JSON { uri = "/tasks" } resource search(query : String) : JSON { uri = "/search?q=" + escape(query) }}
    • ajax same-source restrictionservice Twitter { resource trends() : JSON { uri = "/_proxy/api.twitter.com/1/trends.json" } resource search(query : String) : JSON { uri = "/_proxy/search.twitter.com/search.json?q=" + escape(query) }}
    • 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 = "/_proxy/api.twitter.com/1/trends.json" mapper = trendsMapper}
    • screen root() { var trends = Twitter.trends() header("Twitter trends") group { list(topic in trends) { item { label(topic.name) } } }}
    • user interface stylingdata modeling scriptingweb services
    • limitationsslower than native no native UInot great for games
    • behind the scenes
    • goals portabilitycompleteness coverage
    • goals portability webcompleteness coverage
    • goals portability webcompleteness 100% code gen coverage
    • design bottom-up
    • roadmap1. design core abstractions + native interface
    • roadmap1. design core abstractions + native interface2. enable user land abstractions
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • core abstraction:synchronous programming no more asynchronous spaghetti code
    • synchronous programmingvar results = Task.all().list();for(var i = 0; i < results.length; i++) { alert(results[i].name);}
    • render page timequery database and process results ...
    • render page time query databasebrowser freeze and process results ...
    • render page send query time ...process query result ...
    • asynchronous programmingTask.all.list(function(results) { for(var i = 0; i < results.length; i++) { alert(results[i].name); } });...
    • Task.all().list(function(results) { alert("Hello, ");});alert("world!");
    • Task.all().list(function(results) { alert("Hello, ");}); breaks sequentialalert("world!"); execution assumption
    • Task.all().list(function(results) { // make changes ... persistence.flush(function() { alert("Changes saved!"); });});
    • continuation-passing style transformation
    • function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}
    • function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
    • function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
    • function displayLocationAndReturn() : Coordinates { var position = mobl::location::getPosition(); log("Lat: " + position.latitude); log("Long: " + position.longitude); return position;}function displayLocationAndReturn(callback) { mobl.location.getPosition(function(position) { console.log("Lat: " + position.latitude); console.log("Long: " + position.longitude); callback(position); });};
    • core abstraction: data bindingno more copying data from and to UI
    • screen root() { var n = 8 label(n * n) button("Inc", onclick={ n = n + 1; })}
    • var n = 8var n = ref(8);
    • var n = 8 var n = ref(8);Observable- set(value)- get()- addEventListener(eventType, callback)
    • label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
    • label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
    • label(n * n)var node = $("<span>");node.text(n.get() * n.get());n.addEventListener("change", function() { node.text(n.get() * n.get());});root.append(node);
    • button("Inc", onclick={ n = n + 1; })var node = $("<button ...>");node.text("Inc");node.click(function() { n.set(n.get() + 1);});root.append(node);
    • button("Inc", onclick={ n = n + 1; })var node = $("<button ...>");node.text("Inc");node.click(function() { n.set(n.get() + 1);});root.append(node);
    • 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; })}
    • core abstraction:data modeling & query no more SQL
    • uses persistence.js http://persistencejs.org
    • entity Task { name : String (searchable) description : String (searchable) done : Bool date : DateTime}var Task = persistence.define(Task, { name: VARCHAR(255), description: VARCHAR(255), done: BOOL, date: DATE});Task.textIndex(description);Task.textIndex(name);
    • foreach(t in Task.all()) { alert(t.name); }Task.all().forEach(function(t) { alert(t.name);});
    • foreach(t in Task.all() where done == true) { alert(t.name); }Task.all().filter("done", "=", true).forEach(function(t) { alert(t.name);});
    • native interface
    • external entity MyEntityexternal type MyTypeexternal control contextMenu()external screen specialScreen()external sync function add(o : Object) : voidexternal style myStyle
    • external sync function add(o : Object) : void<javascript>__ns.add = function(o) { persistence.add(o);};</javascript>
    • load styles/default.cssload js/persistence.js
    • where do abstractions come from?
    • where do abstractions come from? domain
    • where do abstractions come from? domain experience
    • domain
    • screen domain
    • controlscreen domain
    • controlscreen entity domain
    • controlscreen entity domain event
    • controlscreen entity domain event web service
    • experience
    • other DSLs experience
    • other DSLs experience programming paradigms
    • other DSLs annoyances experience programming paradigms
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • goal compiler smalllibrary large (and extensible)
    • how?- built-in types- built-in controls+ native interface+ sufficiently low-level primitives+ abstraction mechanisms (screens, controls, functions, types)
    • native interfaceexternal type Object { sync function toString() : String}external type String : Object { length : Num sync function charAt(index : Num) : String sync function charCodeAt(index : Num) : Num ...}external type Num : Object { }external type Bool : Object { }external type Dynamic : Object { }external type Style : String { }external type Array<T> { length : Num sync function get(n : Num) : T sync function push(item : T) : void sync function join(sep : String) : String ...}
    • low-level primitivescontrol image(url : String, onclick : Callback = null) { <img src=url onclick=onclick/>}
    • low-level primitivescontrol slideupBlock() { div@<div onclick={ div.slideUp(); }> elements() </div>}...slideupBlock { label("Click me to slide up")}
    • low-level primitives control slideupBlock() {JQuery div@<div onclick={ div.slideUp(); }> elements() </div> } ... slideupBlock { label("Click me to slide up") }
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • var doneTasks = Task.all()
    • var doneTasks = Task.all() .filter("done", "=", true) .order("date", false) .limit(10);
    • var doneTasks = Task.all()
    • var doneTasks = Task.all() where done == true order by date desc limit 10;
    • roadmap1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • load styles/default.css
    • div.header { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
    • issueout of sight, no checkingout of mind <div class="headerr"> </div>
    • little abstractiondiv.header { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
    • little abstractiondiv.header { mixins background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(72, 100, 180)), to(rgb(32, 60, 140))); background: -moz-linear-gradient(top, rgb(72, 100, 180), rgb(32, 60, 140)); padding: 0; height: 2.3em; font-size: 1.3em; line-height: 2.3em; font-weight: bold; text-align: center; text-shadow: #477 0px 1px 1px; color: white; font-weight: bold; margin: 0; z-index: 2;}
    • 1. design core abstractions + native interface2. enable user land abstractions3a. support successful ULAs with syntax3b. support common native interface cases with core abstractions
    • http://www.mobl-lang.org