Cross platform mobile approaches

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!

vuphuonghoang88@gmail.com