This document discusses cross-platform mobile development. It defines cross-platform development as developing applications that can run on multiple platforms simultaneously. The document then explores different cross-platform approaches like web apps, hybrid apps, interpreted apps, cross-compiled apps, and generated apps. It provides details on how each approach works and when they are involved in the development process. The document also compares the different approaches based on factors like native access, performance, cost, and tools. It concludes that cross-platform options are not fully mature but can be good choices for prototypes, existing web apps, or as a shortcut to the market.

1. Cross-platforms for Mobile Development
Vũ Phượng Hoàng
08/2013

2. Content
• What is cross-platforms development?
• Why do we need cross-platforms?
• How to go with cross-platforms?
• Comparisons
• Conclusions
• Q & A
• Resources

3. What is cross-platforms development?
• Develop for multiple platforms
• Simultaneous (or not)
• Mobile platforms:
• Android
• iOS
• Windows Phone

4. Why do we need cross-platforms?
• More customers, more $$$
• Short time to market
• Synchronization
• Simpler workflow
• Can be less headache for developers?

5. How to go with cross-platforms?

6. Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?

7. Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App

8. Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App
Cross-Compiled App

9. Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App
Cross-Compiled App
Generated App

10. Java Code-Base Objective C Code-Base C# Code-Base
(Java) Binary (Objective C) Binary (C#) Binary
Back-End
compile compile compile
Native App
Eclipse XCode Visual Studio
Android iOS Windows Phone

11. Native App Workflow
You must develop each by each platform…

12. Eclipse
Code in Android SDK BuildSetup UI
Test
Native App Workflow

13. Eclipse
Code in Android SDK BuildSetup UI
Test
XCode (Must be in MAC OS)
Code in iOS SDK BuildSetup UI
Test
Native App Workflow

14. Eclipse
Code in Android SDK BuildSetup UI
Test
XCode (Must be in MAC OS)
Code in iOS SDK BuildSetup UI
Test
Visual Studio (Must be in Windows)
Code in WP SDK BuildSetup UI
Test
Native App Workflow

15. Now, let’s have a look at
cross-platforms methods!

16. Plan Business Logic
Code
Compile
Test
Deploy
Cross-platforms at “Code” stage
Web App
Hybrid App
Interpreted App

17. Browser
Common Front-End
Common UI
Back-End
use
render
Resources @ Server
Server-side WebApp (Normal Website)
Android iOS Windows Phone

18. Eclipse
Code in Javascript BuildSetup UI
Test
Test
Test
Test & Tweak
Server-side WebApp Workflow

19. Client-side WebApp (Local HTML files)
Browser
Common Front-End
Common UI
Back-End
use
render
Resources @ Local
Android iOS Windows Phone
• How to make it
look like Native?

20. Browser
Front-End (e.g: )
Back-End
use
render
Resources @ Local
Client-side WebApp (Local HTML files)
Android iOS Windows Phone
Android UI iOS UI Windows Phone UI

21. Eclipse
Code in BuildSetup UI
Test
Test
Test
Test & Tweak
Client-side WebApp Workflow

22. Problems with WebApp
• Home screen shortcut?
• Native access?
Native
Web View (Browser)
Back-End
Javascript Code-Base
compile

23. Wrapper (e.g
PhoneGap)
Web View (Browser)
Back-End
Java Library
Objective C Library
C# Library
Javascript Code-Base
use
use
use
compile
Javascript Bridge
use
Hybrid App (Website in a wrapper)
Android
iOS
Windows Phone

24. Hybrid App Workflow
Eclipse
Code inSetup UI
Test
Test
Test
Test & Tweak
Test
Ripple
Build
Build
Build

25. Eclipse
Code inSetup UI
Test
Test
Test
Test & Tweak
Test
Ripple
Download
Hybrid App Workflow (More convenient build version)
PhoneGap Build

26. Javascript (or Lua) Code-Base
Java Bridge Objective C Bridge C# Bridge
Back-End
Abstract Layer
(e.g: )
use
use useuse
Interpreted App (Abstract API Layer)
Android iOS Windows Phone

27. Titanium Studio (Eclipse-based)
Code inSetup UI
Test
Test
Test
Build
Build
Build
Interpreted App Workflow

28. Cross-platforms at “Compile” stage
Plan Business Logic
Code
Compile
Test
Deploy
Cross-Compiled App

29. Cross-compiled App (Multiple Compilers)
This is what they advertise …

30. C# code
(Java) Binary (Objective C) Binary (C#) Binary
Back-End
Android Compiler iOS Compiler WP Compiler
compile compile compile
Cross-compiled App (Multiple Compilers)
Android iOS Windows Phone

31. Cross-compiled App (Multiple Compilers)
And this is what I had to do…

32. Shared C# code
(Java) Binary (Objective C) Binary (C#) Binary
Back-End
Android Compiler
(e.g Xamarin.Android)
iOS Compiler
(e.g Xamarin.iOS)
WP Compiler
compile compile compile
C# Code for Android C# Code for iOS C# Code for WP
use use use
Cross-compiled App (Multiple Compilers)
Android iOS Windows Phone

33. Xamarin Studio (Visual Studio-based)
Code Shared C#Setup UI
Test
Test
Test
BuildCode in C#
Xamarin.Android
Re-use Shared C#Setup UI BuildCode in C#
Xamarin.iOS
Re-use Shared C#Setup UI BuildCode in C#
Normal C#
Cross-compiled App Workflow

34. Plan Business Logic
Code
Compile
Test
Deploy
Generated App
Cross-platforms at “Logic” stage

35. Java Code-Base Objective C Code-Base C# Code-Base
(Java) Binary (Objective C) Binary (C#) Binary
Back-End
Business Logic
Generated App (Code Generator)
Android iOS Windows Phone
Android iOS Windows Phone
• Why not utilize “Business Logic”?
compile compile compile

36. Java Code-Base Objective C Code-Base C# Code-Base
(Java) Binary (Objective C) Binary (C#) Binary
Back-End
Code Generator
(e.g: Applause)
Model (DSL)
Generated App (Code Generator)
Android iOS Windows Phone
Android iOS Windows Phone
compile compile compile

37. Generated App Workflow
XText (Eclipse-based)
‘Code’ inSetup UI
Test
Test
Test
Build
Build
Build

38. Method SDK
Native
Access
Perfor-
mance
Off
-line
Sync
Human
Resource
Tools Time Ease
Native App #1 #1 #1 #6 3 teams Free? 3 unit #2
Web App
Sencha
iUI
#6 #5 #6? #1 1 team Free 1 unit #1
Hybrid App
PhoneGap
Flash
Trigger.IO
#3 #5 #5 #2 1,5 team Free 1,5 unit #3
Interpreted
App
Titanium
RhoMobile
#3 #4 #1 #5 1,5 team Free? 1,5 unit #4
Cross
Compiling
App
Xamarin
Marmalade
Strawberry
#3 #3 #1 #2 1,5 team $$$ 1,5 unit #5
Generated
App
Applause #2 #2 #1 #2
1 team
+ 3 teams
Free
1 unit
+ 3 unit
#6
Comparisons

39. Comparisons – Who uses which?
• Native App:
• Web App:
• Hybrid App:
• Interpreted App:
• Cross-Compiled Game:
• Generated App:

40. Comparisons – Demo Statistics (Lower is better)
0
5000
10000
15000
20000
25000
30000
35000
Native App
Server-side Web App
Client-side Web App
PhoneGap
Titanium

41. Native App Web App PhoneGap Titanium
Native Access Full API None Depend on framework Depend on framework
Performance Best
Worst – Depend on
browser
Worst – Depend on
browser
Good
Cost
Depend on # of
platforms
1 team + quick
development
1 team + quick
development
1 team but Coded UI?
Doc & Support
Full documentations
Large communities
Full documentation
Largest communities
Good documentation
Open forum
Have documentation
Open forum
GUI Design Acceptable Great & Many Great & Many
25$ for ForgedUI
20$ for VisualUI
Test
Has debugging tools
Has profiling tools
Great debugging tools
Great profiling tools
Great debugging tools
Great profiling tools
Has debugging tools
Has profiling tools
Short list

42. Conclusion (Now what?)
• Cross-platforms for developing mobile
applications are not mature yet
• Wise choices:
• Web App for simple products (prototype?)
• Native App for complex products
• Hybrid App for existed Web App
• Interpreted App is the market shortcut

43. • Q: How about native libraries?
A: Plugin Bridge for Cordova-based frameworks (OTT
application demo)
Titanium Modules for Titanium
• Q: Can I trust them?
A: Behind PhoneGap is Adobe
Titanium is trusted by ebay, Mitsubishi
Xamarin is managed by GNOME co-founders
• ...
Q & A

44. • Quick comparison: http://www.markus-
falk.com/mobile-frameworks-comparison-chart/
• Google, SlideShare are your friends
• And I am, too :D
More resources

45. Thank you for listening!
vuphuonghoang88@gmail.com