cross-platform, native mobile development with a dsl

Cross-Platform, Native Mobile Development with a DSL

Heiko Behrens, Peter Friese

Dienstag, 13. September 2011

Cross-Platform, Native Mobile Developmentwith a DSL

@HBehrens@PeterFriese


@moskovich: “Your mobile phone has more computing power than all of NASA in 1969.

NASA put a man on the moon...Dienstag, 13. September 2011

...we put a bird into pigs.”Dienstag, 13. September 2011

countless devices


diversity of platforms


Javapublic class SpeakersList extends GenericListActivity<Speaker> {

List<Speaker> speakers;

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setTitle("Speakers");

speakers = getItemsFromProvider();

ArrayList<AbstractRowAdapter> rowAdapters = new ArrayList<AbstractRowAdapter>();

Iterable<Speaker> items1 = speakers; for (Speaker i : items1) rowAdapters.add(new Cell1(i));

setListAdapter(new GenericItemAdapter(this, rowAdapters)); finishCreation();

}


C#public partial class SpeakerDetailsDetailsView : PhoneApplicationPage{ public SpeakerDetailsDetailsView() { InitializeComponent(); }

protected override void OnNavigatedTo(NavigationEventArgs e) { string selectedIndex = ""; if (NavigationContext.QueryString.TryGetValue("itemByIndex", out selectedIndex)) { int index = int.Parse(selectedIndex); DataContext = App.RootViewModelProvider.BlogpostsModelProvider().BlogItems[index]; } }}


Objective-C@implementation SpeakersListViewController

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { if(section == 0) { return [[[contentProvider valueForKeyPath:@"content"] asArray] count]; } else return 0;}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { id item = [self.items objectAtIndex: indexPath.row]; IPContentProvider *provider = [(itemisAppProviders*)contentProvider.providers

providerForSpeakerByName: [item valueForKeyPath:@"name"]]; SpeakerDetailsViewController *controller = [[SpeakerDetailsViewController alloc] init]; controller.contentProvider = provider; [self.navigationController pushViewController: controller animated: TRUE]; [controller release];}


HTML{% extends "generated/application.html" %}{% block title%}Speakers{% endblock %}{% block content_class %}table list{% endblock %}

{% block content %}<ul>{% for s in data|to_list %} <li> {% url views.SpeakerDetailsBySpeakerByName s.name|urlencode as url %} <a href="{{ url }}"> <div class="cell_text">{{s.name|safe}}</div> </a> </li>{% endfor %}</ul>{% endblock %}


server-side web

Device

Web Browser

Backend

Web Serverexecutes application

logic

Files Database


server-side web

Geräte, Plattformen, Versionen - neue Herausforderungen im mobilen MarktJan Webering, Roland GülleGutenbergsaal III

5 Things your Company can do to speed up its mobile WebsiteThomas SchlagenhauferGutenbergsaal III

Tuesday15.00

Tuesday11.45


client-side web

Device

Web Browser

Backend

DatabaseFiles

JavaScriptexecutes application logic


JavaScript Data Binding mit jQuery MobileTobias Bosch, Stefan ScheidtWatfordsaal

Lessons Learned: Mobile Business-Webanwendungen mit jQuery MobileTimo ElbertWatfordsaal

Wednesday17.15

Wednesday10.00

client-side web


hybrid app

Device

Native App

Browserexecutes JavaScript

JavaScript Bridge

Request Interceptor

Interpreter

Backend


Cross-Plattform Mobile Development mit Sencha Touch und PhoneGapStefan KolbWatfordsaal

Wednesday16.00

hybrid app


interpreted app

Device

Native App

Application Script

interpreter

Backend

Files

Database


hybrid app


Generator Input

Device

Native App

Logic

Backend

Files

Database

Logic

Files

Database

DatabaseFiles

Modeldescribes logic andcomplete system

Generator

generated app


App Anatomy 101


App Anatomy 101

ContentProviders

Sessiontitleroom

Entities

Navigation

Cells

Views


DSL for mobiletabbarApplication itemisApp {

button { title="News" icon="calendar.png" view=EventList( CurrentTimeline() ) }

button { title= "itemis" icon= "itemis.png" view= OfficeList( CompanyDescription() ) }

button { title= "Carreer" icon= "trophy.png" view= CareerView( CareerData() ) } }


Demo :)


«Xpand»


Objective-C

Simulator

Device

Java

Device

Simulator

DSLdescribes application

developer’s point of view


Grammardescribes DSL

«Xpand»Parser

Editor

TemplatesiPhone

TemplatesAndroid

EMF MM

toolsmith’s point of view


Objective-C

Simulator

Device

Java

Device

Simulator

DSLdescribes application

Grammardescribes DSL

«Xpand»Parser

Editor

TemplatesiPhone

TemplatesAndroid

EMF MM

applausehttp://applause.github.com


http://applause.github.com

http://applause.github.com

action = { log(“before”); UpdateWorkflow(item.Box.JobId, userInput("Cancel")); refresh(); log(“after”);}

reduced complexityuser interaction

server round trip


action = { log(“before”); UpdateWorkflow(item.Box.JobId, userInput("Cancel")); refresh(); log(“after”);}

[functions log: @"before"];[provider userInputOn:@"Cancel" promises:^(id promise){ IPContentProvider *provider = [providers providerForUpdateWorkflow:content.Box.JobId andUserComment:promise]; [functions provider: provider promises:^(id promise){ [functions refreshPromises:^(id promise){ [functions log: @"after"]; }]; }];}];


paradigm agnostic


More Demo :))


@HBehrenshttp://HeikoBehrens.net getBeamApp.com

twitterblog

CEO/Founder

@PeterFriesehttp://PeterFriese.de

twitterblog


http://twitter.com/HBehrens


http://HeikoBehrens.net






cross-platform, native mobile development with a dsl

Technology

list speakers

app anatomy

block title

native mobile developmentwith

mobile website11

mobile phone

webweb server

block content