Mobile Application Development with AIR, a cross-platform alternative

1. Mobile Application Tech Event – September 2012
Development with AIR
Laurent Jayr
Application Development Consultant (LS)
A cross-platforms alternative
BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN
2012 © Trivadis
1 Mobile Application Development with AIR
29.09.2012

2. 1. Demonstration
2. Native and cross-platform technologies
3. The AIR alternative
4. Improving user experience (UX) and performances
5. Demonstration
2012 © Trivadis
2

3. Let’s start with a demonstration…
2012 © Trivadis
3

4. How does this demo work?
• Peer-to-Peer channel available
since Flash Player version 10.1
2012 © Trivadis
4

5. 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…)
2012 © Trivadis
5

6. 1. Demonstration
2. Native and cross-platform technologies
3. The AIR alternative
4. Improving user experience (UX) and performances
5. Demonstration
2012 © Trivadis
6

7. Native mobile application development model
A costly and inefficient development model…
Native App Native App Native App Native App
2012 © Trivadis
7

8. Introducting a new mobile development paradigm
One tool, one language, one codebase
Cross-platform application
common codebase
2012 © Trivadis
8

9. Cross-platform alternatives
• Mobile Web
• Client-Side Web
• Hybrid Apps
• Interpreted Apps
• Cross Compiled Apps
2012 © Trivadis
9

10. Alternatives comparison
Sources: Peter Friese - www.zuehlke.com
2012 © Trivadis
10

11. 1. Demonstration
2. Native and cross-platform technologies
3. The AIR alternative
4. Improving user experience (UX) and performances
5. Demonstration
2012 © Trivadis
11

12. 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)
2012 © Trivadis
12

13. The AIR alternative
AIR means Adobe Integrated Runtime
Based on Flash technology outside the browser
v3.4
2012 © Trivadis
13

14. The AIR alternative
Supported operating systems and devices:
• Windows (desktop)
v3.4 • MacOS X (desktop)
• iOS (v4 and above)
• Android (v2.2 and above)
• BlackBerry Playbook
• Connected TV (Google TV…)
• More to come… (BB10, WP8?)
2012 © Trivadis
14

15. The AIR alternative
Two development solutions:
1. Flex Mobile project:
v3.4
- 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
2012 © Trivadis
15

16. The AIR alternative
AIR provides all Flash features + additional
features:
v3.4
• 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.
2012 © Trivadis
16

17. The AIR alternative
For mobile, Captive Runtime option allows to
embed the runtime inside the application
v3.4
2012 © Trivadis
17

18. The AIR alternative
For mobile, Captive Runtime option allows to
embed the runtime inside the application
v3.4
Main issues:
• With iOS, the runtime MUST be embed
inside the app
• Final binary size with Captive Runtime is
bigger (+8MB)
2012 © Trivadis
18

19. AIR main benefits
• One codebase for all main devices
(smartphones and tablets)
v3.4
• 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)
2012 © Trivadis
19

20. No more limitation with ANE
ANE means ActionScript Native Extension
Code libraries containing native code wrapped with an
ActionScript API
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)
2012 © Trivadis
20

21. 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
2012 © Trivadis
21

22. Plan
1. Demonstration
2. Native and cross-platform technologies
3. The AIR alternative
4. Improving user experience (UX) and performances
5. Demonstration
2012 © Trivadis
22

23. 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
2012 © Trivadis
23

24. 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/
2012 © Trivadis
24

25. How to improve performances
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/
2012 © Trivadis
25

26. 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/
2012 © Trivadis
26

27. 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…
In other words:
AIR + FeathersUI + MVC patterns = efficient and
productive environment for mobile enterprise
application
2012 © Trivadis
27

28. 1. Demonstration
2. Native and cross-platform technologies
3. The AIR alternative
4. Improving user experience (UX) and performances
5. Demonstration
2012 © Trivadis
28

29. FeathersUI / Starling in action
2012 © Trivadis
29

30. 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…
2012 © Trivadis
30

31. Trivadis AG
Thank you Laurent Jayr
laurent.jayr@trivadis.com
www.trivadis.com
BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN
2012 © Trivadis
31
29.09.2012