Cross Platform App Development

estrapadetubacityMobile - Wireless

Dec 10, 2013 (3 years and 10 months ago)

175 views

Cross Platform
App Development
– a technical overview
#OOP2011
@HBehrens
Heiko Behrens
I want an
iPhone App
!
diversity
of platforms
94
App Stores
two
categories
How can we address
this
diversity
?
You can write amazing
web apps
that look exactly and behave
exactly like apps
on the iPhone
Steve Jobs, WWDC 2007
WEB APPS
demo
apple
.com
/webapps
openappmkt
.com
demo
what’s that

native
thing?
demo
demo
Unreal Tech Demo
div class”light”/div
div id”floor” class”reflection”/div
the
User’s
perspective
on
Apps
Experience
native
website
W3C widget
hybrid
interpreted
generated
downloaded
pre-installed
online
web apps
HTML5
CSS3
cache manifest, local storage, forms, geo location
animation, transitions, 3D transformation
Resolution
css media queries, reference, categories, float layout
URLs
mails, telephone, sms, maps, youtube, etc.
Web Frameworks
iWebKit, iUI, jQTouch, Jo
Sencha Touch
2010 Q4:
JQuery mobile framework
Sencha Touch
GPL Dual License
programmatically
aims at cross platform
complex
MIT License
declarative  JQuery
focus on iPhone
simple
See also iWebKit, iUI, jQTouch, Jo, JQuery Mobile (2010 Q4)
server-side web
Device
W
eb Browser
Backend
W
eb Server
executes application
logic
Files
Database
client-side web
Device
W
eb Browser
Backend
Database
Files
JavaScript
executes application logic
development
easy
effort
known technology  processes
monetization
bad for user experience
experience
fancy UI possible, but platform specific
hardware
very limited
offline
generally possible
hybrid apps
Request Interception
demo
hybrid app
Device
Native
App
Browser
executes JavaScript
JavaScript Bridge
Request
Interceptor
Interpreter
Backend
MIT License
See also QuickConnect, Big5 (discontinued)
PhoneGap/build, apparat.io
development
as with web
effort
known technology  processes
monetization
app stores
experience
as with web
hardware
mostly accessible
offline
as with web
interpreted apps
interpreted app
Device
Native
App
Application
Script
interpreter
Backend
Files
Database
– HTML & CSS 
Apache 2 License
JS programmatically
native controls
iPhone, iPad, Android
BlackBerry (soon)
demo
MonoTouch
starts at 399 USD
.net runtime
iOS only
Rhodes
MIT License
ruby C/S on the device
iPhone, Windows Mobile 6,
BlackBerry, Symbian and
Android
Screen Flow Interpreters
The aim of XXX is to screen the programmer
completely out from the mobile platform itself,
and transfer the entire application logic to
central application server level.
development
heavy API, but only once
effort
barely any tooling
monetization
app stores
experience
native
hardware
mostly accessible
offline
native
generated apps
Generator Input
Device
Native
App
Logic
Backend
Files
Database
Logic
Files
Database
Database
Files
Model
describes logic and
complete system
Generator
generated app
XMLVM — A CrossCompiler
public class
HelloWorld
{

static public void
main(String[] args)
{
System.
out
.println(
"Hello World"
);
}
}
Java (input)
<vm:xmlvm xmlns:vm="http://xmlvm.org"
xmlns:jvm="http://xmlvm.org/jvm">
<vm:class name="HelloWorld" extends="java.lang.Object">
<vm:method name="main" isPublic="true" isStatic="true"
stack="2" locals="1">
<vm:signature>
<vm:return type="void" />
<vm:parameter type="java.lang.String[]" />
</vm:signature>
<vm:code>
<jvm:var name="args" id="0" type="java.lang.String[]" />
<jvm:getstatic class-type="java.lang.System"
type="java.io.PrintStream" field="out" />
<jvm:ldc type="java.lang.String" value="Hello World" />
<jvm:invokevirtual class-type="java.io.PrintStream"
method="println">
<vm:signature>
<vm:return type="void" />
<vm:parameter type="java.lang.String" />
</vm:signature>
</jvm:invokevirtual>
<jvm:return />
</vm:code>
</vm:method>
</vm:class>
</vm:xmlvm>
XML (model)
<xsl:template match="jvm:irem">
<xsl:text>
_op2.i = _stack[--_sp].i; // Pop operand 1
_op1.i = _stack[--_sp].i; // Pop operand 2
_stack[_sp++].i = _op1.i % _op2.i; // Push remainder
</xsl:text>
</xsl:template>
typedef union
{

id
o;

int
i;

float
f;

double
d;
} XMLVMElem;
XSLT (generator)
+ (void) main___java_lang_String_ARRAYTYPE :(NSMutableArray*)n1
{
XMLVMElem _stack[2];
XMLVMElem _locals[1];
int _sp = 0;
XMLVMElem _op1, _op2, _op3;
int _i;
for (_i = 0; _i <1; _i++) _locals[_i].o = nil;
NSAutoreleasePool* _pool = [[NSAutoreleasePool alloc] init];
_locals[0].o = n1;
_op1.o = [java_lang_System _GET_STATIC_java_lang_System_out];
_stack[_sp++].o = _op1.o;
_stack[_sp++].o = @"Hello World";
_sp -= 2;
[((java_io_PrintStream*) _stack[_sp].o)
println___java_lang_String:_stack[_sp + 1].o];
[_pool release];
return;
}
Output
«Xpand»
custom solution
Lists
Details
Custom
tabbarApplication
itemisApp {

button
{

title=

"Tuesday"

icon=

"calendar.png"

view=
SessionList( SessionsByDay(
"0"
) )

}

button
{

title=

"Wednesday"

icon=

"calendar.png"

view=
SessionList( SessionsByDay(
"1"
) )

}


button
{

title=

"Thursday"

icon=

"calendar.png"

view=
SessionList( SessionsByDay(
"2"
) )

}


button
{

title=

"Speakers"

icon=

"person.png"

view=
SpeakersList( AllSpeakers() )

}
}
development
huge one-time invest
effort
easy for aimed cases, easy to extend
monetization
app stores
experience
native
hardware
native
offline
native
cross platform ?
web
hybrid
interpreted
generated
development
effort
monetization
experience
hardware
offline
another
perspective
native
own language
own culture
own ecosystem
field skills
promotion
: watch avatar - the movie
!
not-so-native
economic objectives
establishment

natives are endangered”
promotion
: watch avatar - the movie
@HBehrens
http://
HeikoBehrens.net
mobile.itemis.de
twitter
blog
consulting