2012 © Trivadis

BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN

Mobile Application Development with AIR

A cross-platforms alternative

Tech Event – September 2012

Laurent JayrApplication Development Consultant (LS)

29.09.2012Mobile Application Development with AIR1

2012 © Trivadis

1. Demonstration

2. Native and cross-platform technologies

3. The AIR alternative

4. Improving user experience (UX) and performances

5. Demonstration

2

2012 © Trivadis

Let’s start with a demonstration…

3

2012 © Trivadis

How does this demo work?

4

• Peer-to-Peer channel available since Flash Player version 10.1

2012 © Trivadis

How does this demo work?

• Peer-to-Peer channel available since Flash Player version 10.1

• With multicasting, data is broadcasted across all P2P mesh (audio, video, binary files, pure data…)

5

2012 © Trivadis

1. Demonstration

2. Native and cross-platform technologies

3. The AIR alternative

4. Improving user experience (UX) and performances

5. Demonstration

6

2012 © Trivadis

Native mobile application development model

Native App Native App

A costly and inefficient development model…

Native AppNative App

7

2012 © Trivadis

Cross-platform application

common codebase

Introducting a new mobile development paradigm

One tool, one language, one codebase

8

2012 © Trivadis

Cross-platform alternatives

• Mobile Web

• Client-Side Web

• Hybrid Apps

• Interpreted Apps

• Cross Compiled Apps

9

2012 © Trivadis

Alternatives comparison

Sources: Peter Friese - www.zuehlke.com

10

2012 © Trivadis

1. Demonstration

2. Native and cross-platform technologies

3. The AIR alternative

4. Improving user experience (UX) and performances

5. Demonstration

11

2012 © Trivadis

The Big Challenge…

One single codebase for:

• ALL devices (smartphones & tablets)

• ALL resolutions screens

• ALL orientations (portrait and landscape)

• ALL DPIs (Density Per Inch, from 160 to 320)

12

2012 © Trivadis

The AIR alternative

Based on Flash technology outside the browserv3.4

13

AIR means Adobe Integrated Runtime

2012 © Trivadis

The AIR alternative

Supported operating systems and devices:• Windows (desktop)

• MacOS X (desktop)

• iOS (v4 and above)

• Android (v2.2 and above)

• BlackBerry Playbook

• Connected TV (Google TV…)

• More to come… (BB10, WP8?)

v3.4

14

2012 © Trivadis

The AIR alternative

v3.4

Two development solutions:

1. Flex Mobile project:- Flex mobile framework- descriptive language: MXML- OOP language: ActionScript 3 (AS3)- IDE: Flash Builder 4.6

2. Pure ActionScript Mobile project:- No MXML (AS3 only)- IDE: Flash Builder 4.6 or Flash Pro CS5

15

2012 © Trivadis

The AIR alternative

AIR provides all Flash features + additional features:

• Desktop application development, offline mode possible

• Mobile application development (for App Store, Google Play, Amazon, BlackBerry…)

• Larger API (file access, local database with SQLite, device sensors access…)

• etc.

v3.4

16

2012 © Trivadis

The AIR alternative

For mobile, Captive Runtime option allows to embed the runtime inside the application

v3.4

17

2012 © Trivadis

The AIR alternative

For mobile, Captive Runtime option allows to embed the runtime inside the application

Main issues:

• With iOS, the runtime MUST be embed inside the app

• Final binary size with Captive Runtime is bigger (+8MB)

v3.4

18

2012 © Trivadis

AIR main benefits

• One codebase for all main devices (smartphones and tablets)

• Application look‘n feel can be similar to native ones or can be deeply customised

• Performances can be acceptable with good practices and optimisations (20/40 fps), but < native perf

• AIR can use all native device features (thanks to native extensions)

19

v3.4

2012 © Trivadis

No more limitation with ANE

Code libraries containing native code wrapped with an ActionScript API

ANE means ActionScript Native Extension

Provide easy access to device-specific libraries and features not available by cross-platform technologies

Bridge written in native language (ObjectiveC or Java Android SDK)

20

2012 © Trivadis

No more limitation with ANE

Specific native features and sensors examples:• Address book• Calendar• Making the device vibrate• Gyro• Compass• Native notifications, battery information, voice

command, MS Kinnect, etc.

Non exhaustive list : http://www.adobe.com/devnet/air/native-extensions-for-air.html

21

2012 © Trivadis

1. Demonstration

2. Native and cross-platform technologies

3. The AIR alternative

4. Improving user experience (UX) and performances

5. Demonstration

Plan

22

2012 © Trivadis

The User Experience issue

• For a good UX, performance is critical: never under-estimate performances impact…

• Most of cross-platforms technologies (like hybrid HTML5) do not always provide efficient performances compared to native-like UX

• User rejection issues because of bad UX feedback («the Facebook mobile app» syndrome)

“The biggest mistake we made as a company was betting too much on HTML5 rather than native…“ Mark Zuckerberg, september 2012

23

2012 © Trivadis

How to improve performances

In 2011, the Starling framework was created.

Starling is an open source game engine for Flash (Gamua - Sparrow - Angry Birds)

Website: http://gamua.com/starling/

24

2012 © Trivadis

Starling is a 2D framework working with Stage3D for multiple platforms (web browser, facebook app, iOS, Android…)

Stage3D contents are rendered by GPU (and not by CPU)

Performances with Starling are great (60 fps), several games based on it are top-seller in App Store

Showcases: http://gaming.adobe.com/showcase/

How to improve performances

25

2012 © Trivadis

Nice… but we are not developing games!

Indeed… but Starling is also the base for a Rich Mobile Application (RMA) framework

• Example: FeathersUI, a light-weight, skinnable, and extensible UI components for mobile and desktop

Website: http://feathersui.com/

26

2012 © Trivadis

FeathersUI promises

• FeathersUI goal is to provide a smooth and responsive experience, thanks to GPU powered graphics

• FeathersUI is still under active development (soon first stable release) but is going to be funded by Adobe…

27

In other words:

AIR + FeathersUI + MVC patterns = efficient and productive environment for mobile enterprise application

2012 © Trivadis

1. Demonstration

2. Native and cross-platform technologies

3. The AIR alternative

4. Improving user experience (UX) and performances

5. Demonstration

28

2012 © Trivadis

FeathersUI / Starling in action

29

2012 © Trivadis

Recommendations

Relating to your project specifications and customer expectations

Use Mobile web or Client-side web if...- you need a simple mobile landing page inside a browser

Use Hybrid apps (ex HTML5 + PhoneGap) or other alternatives if...- you need hardware access and performances are not critical

Use AIR apps with Flex Mobile if…- you need hardware access, a responsive app and a productive

IDE

Use AIR + FeathersUI if…- you need hardware access, productive IDE and a native-like

user experience

Use Native apps if…- money and delays are not important for your customer…

30

2012 © Trivadis

BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN

Thank you Trivadis AG

Laurent Jayr

laurent.jayr@trivadis.com

www.trivadis.com

29.09.2012

31