Cross Platform App Development

Transcription

1 Cross Platform App Development a technical overview Heiko Behrens

2 I want an iphone App!

3 diversity of platforms

4 94 App Stores

5 two categories

6 How can we address this diversity?

7 You can write amazing web apps that look exactly and behave exactly like apps on the iphone Steve Jobs, WWDC 2007

8 WEB APPS

9

10

11 demo

12 apple.com/webapps openappmkt.com demo

13 what s that native thing?

14 demo

15 Unreal Tech Demo demo

16 <div class= light ></div> <div id= floor class= reflection ></div>

17 the User s perspective on Apps

18 Experience

19 pre-installed downloaded online native website W3C widget hybrid interpreted generated

20 web apps

21 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.

22 Web Frameworks iwebkit, iui, jqtouch, Jo Sencha Touch 2010 Q4: JQuery mobile framework

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

24 server-side web Web Server executes application logic Web Browser Files Database Device Backend

25 client-side web Web Browser JavaScript executes application logic Files Database Device Backend

26 development easy effort known technology + processes monetization bad for user experience experience fancy UI possible, but platform specific hardware very limited offline generally possible

27 hybrid apps

28 Request Interception demo

29 hybrid app Native App Interpreter Request Interceptor JavaScript Bridge Browser executes JavaScript Device Backend

30 MIT License See also QuickConnect, Big5 (discontinued) PhoneGap/build, apparat.io

31 development as with web effort known technology + processes monetization app stores experience as with web hardware mostly accessible offline as with web

32 interpreted apps

33 interpreted app Native App interpreter Application Script Database Files Device Backend

34 HTML & CSS =

35 Apache 2 License JS programmatically native controls iphone, ipad, Android BlackBerry (soon)

36 demo

37 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

38 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.

39 development heavy API, but only once effort barely any tooling monetization app stores experience native hardware mostly accessible offline native

40 generated apps

41 generated app Generator Generator Input Native App Model describes logic and complete system Logic Database Files Logic Database Files Files Database Device Backend

42 XMLVM A CrossCompiler

43 Java (input) public class HelloWorld { static public void main(string[] args) { System.out.println("Hello World"); } }

44 XML (model) <vm:xmlvm xmlns:vm=" xmlns: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>

45 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;

46 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 World"; _sp -= 2; [((java_io_printstream*) _stack[_sp].o) println java_lang_string:_stack[_sp + 1].o]; [_pool release]; return; }

47 custom solution «Xpand»

48

49 Lists Details Custom

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

51 development huge one-time invest effort easy for aimed cases, easy to extend monetization app stores experience native hardware native offline native

52 cross platform?

53 web hybrid interpreted generated development effort monetization experience hardware offline

54 another perspective

55 native own language own culture own ecosystem field skills promotion: watch avatar - the movie!

56 not-so-native economic objectives establishment natives are endangered promotion: watch avatar - the movie

57 twitter consulting mobile.itemis.de