Cross Platform App Development a technical overview Heiko Behrens #OOP2011 @HBehrens
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
Unreal Tech Demo demo
<div class= light ></div> <div id= floor class= reflection ></div>
the User s perspective on Apps
Experience
pre-installed downloaded online native website W3C widget hybrid interpreted generated
web apps
HTML5 cache manifest, local storage, forms, geo location CSS3 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 MIT License declarative + JQuery focus on iphone simple GPL Dual License programmatically aims at cross platform complex See also iwebkit, iui, jqtouch, Jo, JQuery Mobile (2010 Q4)
server-side web Web Server executes application logic Web Browser Files Database Device Backend
client-side web Web Browser JavaScript executes application logic Files Database Device Backend
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 Native App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device 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 Native App interpreter Application Script Database Files Device Backend
HTML & CSS =
Apache 2 License JS programmatically native controls iphone, ipad, Android BlackBerry (soon)
demo
MonoTouch starts at 399 USD.net runtime Rhodes MIT License ruby C/S on the device ios only 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
generated app Generator Generator Input Native App Model describes logic and complete system Logic Database Files Logic Database Files Files Database Device Backend
XMLVM A CrossCompiler
Java (input) public class HelloWorld { static public void main(string[] args) { System.out.println("Hello World"); } }
XML (model) <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>
XSLT (generator) <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;
Output + (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; }
custom solution «Xpand»
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
twitter blog @HBehrens http://heikobehrens.net consulting mobile.itemis.de