Upload
phuong-hoang-vu
View
580
Download
3
Embed Size (px)
DESCRIPTION
Comparison between cross-platforms methods for mobile development: WebApp, PhoneGap, Titanium, Xamarin, Applause!
Citation preview
Cross-platforms for Mobile Development
Vũ Phượng Hoàng 08/2013
Content
• What is cross-platforms development?
• Why do we need cross-platforms?
• How to go with cross-platforms?
• Comparisons
• Conclusions
• Q & A
• Resources
What is cross-platforms development?
• Develop for multiple platforms
• Simultaneous (or not)
• Mobile platforms:
• Android
• iOS
• Windows Phone
Why do we need cross-platforms?
• More customers, more $$$
• Short time to market
• Synchronization
• Simpler workflow
• Can be less headache for developers?
How to go with cross-platforms?
Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App
Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App
Cross-Compiled App
Plan Business Logic
Code
Compile
Test
Deploy
When do cross-platforms participate?
Web App
Hybrid App
Interpreted App
Cross-Compiled App
Generated App
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
Native App Workflow
You must develop each by each platform…
Eclipse
Code in Android SDK Build Setup UI
Test
Native App Workflow
Eclipse
Code in Android SDK Build Setup UI
Test
XCode (Must be in MAC OS)
Code in iOS SDK Build Setup UI
Test
Native App Workflow
Eclipse
Code in Android SDK Build Setup UI
Test
XCode (Must be in MAC OS)
Code in iOS SDK Build Setup UI
Test
Visual Studio (Must be in Windows)
Code in WP SDK Build Setup UI
Test
Native App Workflow
Now, let’s have a look at cross-platforms methods!
Plan Business Logic
Code
Compile
Test
Deploy
Cross-platforms at “Code” stage
Web App
Hybrid App
Interpreted App
Browser
Common Front-End
Common UI
Back-End
use
render
Resources @ Server
Server-side WebApp (Normal Website)
Android iOS Windows Phone
Eclipse
Code in Javascript Build Setup UI
Test
Test
Test
Test & Tweak
Server-side WebApp Workflow
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?
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
Eclipse
Code in Build Setup UI
Test
Test
Test
Test & Tweak
Client-side WebApp Workflow
Problems with WebApp
• Home screen shortcut?
• Native access?
Native
Web View (Browser)
Back-End
Javascript Code-Base
compile
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
Hybrid App Workflow
Eclipse
Code in Setup UI
Test
Test
Test
Test & Tweak
Test
Ripple
Build
Build
Build
Eclipse
Code in Setup UI
Test
Test
Test
Test & Tweak
Test
Ripple
Download
Hybrid App Workflow (More convenient build version)
PhoneGap Build
Javascript (or Lua) Code-Base
Java Bridge Objective C Bridge C# Bridge
Back-End
Abstract Layer
(e.g: )
use
use use use
Interpreted App (Abstract API Layer)
Android iOS Windows Phone
Titanium Studio (Eclipse-based)
Code in Setup UI
Test
Test
Test
Build
Build
Build
Interpreted App Workflow
Cross-platforms at “Compile” stage
Plan Business Logic
Code
Compile
Test
Deploy
Cross-Compiled App
Cross-compiled App (Multiple Compilers)
This is what they advertise …
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
Cross-compiled App (Multiple Compilers)
And this is what I had to do…
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
Xamarin Studio (Visual Studio-based)
Code Shared C# Setup UI
Test
Test
Test
Build Code in C#
Xamarin.Android
Re-use Shared C# Setup UI Build Code in C#
Xamarin.iOS
Re-use Shared C# Setup UI Build Code in C#
Normal C#
Cross-compiled App Workflow
Plan Business Logic
Code
Compile
Test
Deploy
Generated App
Cross-platforms at “Logic” stage
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
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
Generated App Workflow
XText (Eclipse-based)
‘Code’ in Setup UI
Test
Test
Test
Build
Build
Build
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
Comparisons – Who uses which?
• Native App:
• Web App:
• Hybrid App:
• Interpreted App:
• Cross-Compiled Game:
• Generated App:
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
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
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
• 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
• Quick comparison: http://www.markus-falk.com/mobile-frameworks-comparison-chart/
• Google, SlideShare are your friends
• And I am, too :D
More resources
Thank you for listening!