building cross platform mobile applications

Building Cross Platform

Mobile Applications yes, we can !

Maxime Lemaitre – 04/07/2013

Building Cross Platform Mobile Applications

2

Introduction

ALM, Source Control, Unit & Integration Tests, Build System, …

Android, iOS, Windows Phone, BlackBerry…

SmartPhones, Tablets, …

Enterprise Applications, Not just Tasks Lists

3

Welcome to the mobile World

To be continued …

4

Mobile Trends Global Stats, Source StatCounter

5

Mobile Trends Source : IDC Worldwide Quaterly Mobile Phone Tracker, May 2013

Mobile Operating System

1Q12 Market Share

1Q12 Shipment Volume

1Q13 Market Share

1Q13 Shipment Volume

Android 59,1% 90,3 75,0% 162,1

iOS 23,0% 35,1 17,3% 37,4

Windows Phone 2,0% 3 3,2% 7

BlackBerry 6,4% 9,7 2,9% 6,3

Linux 2,3% 3,6 1,0% 2,1

Symbian 6,8% 10,4 0,6% 1,2

Others 0,4% 0,6 0,0% 0,1

1Q2012

1Q2013

3 Os for More than 95% on the market

6

Android Segmentation Source : Android Dev DashBoad, June 2013

7

Mobile Trends Desktop Vs Mobile, Source : IDC

In 2012, Mobile represents 73%

In 2016, it will be 80%

Targetting only Desktop/Portable PC is not pertinent (now and for the future)

8

Business First Syndrome

I want an App …

… and another App …

… and another App …

… and another App …

OK

OK

OK

OK

9

The (Default) Native Experience

Each device has its own design

10

The minimum required Architecture

Data Access Layer

Business Logic

Service Layer

WP iOS Android

Service Consumption

Local Data / Services

Business Logic

UI Logic

Service Consumption

Local Data / Services

Business Logic

UI Logic

Service Consumption

Local Data / Services

Business Logic

UI Logic

Bu

sin

ess

Co

mm

on

Bu

sin

ess

De

vic

e S

pe

cific

P

rob

abili

ty o

f C

han

ge

11

Why mobile development is so complicated Multiple OS, Multiple languages

Not a problem for Chuck Norris. What about you ?

Languages Objective-C, C, C++ Java-like , C, C++ Java C#, VB.NET

Tools Xcode, iOS SDK Android Studio, SDK BB Java Eclipse, SDK VS, WP SDK

Executable Files .app .apk .code .xap

Store Apple iTunes Google Play BlackBerry App World

Windows MarketPlace

12

Mobile Os

Similar approach, but different source code, different

build , expertise and expensive maintenance costs

13

Crossroads Cross Platform+Cross Device + Cross Version +Cross Language

My Biz

1.0

1.1

1.2

2.0

2.1

A few years later, situation is uncontrollable with many applications and duplicated code…

Investigating Cross Platform Strategies & Solutions

14

15

Applications Types

• Entirely written using web technologies:

– Frontend : HTML, CSS and JavaScript

– Backend : asp.net, Php, Java, …

• Code is executed by the browser, not by the OS

• Limited access to device capabilities

• Maintain and fix bugs in real time. No cost for app store

• Runs on almost every platform

• Some frameworks may help

16

Mobile Web Applications as we know, using responsive design or mobilized version

17

Mobile Web Applications Responsive Design examples

optimal viewing experience a wide range of devices/screen resolutions … but it’s always the same web site

18

Mobile Web Applications Mobilized examples

iOS Css StyleSheet…

designed specifically for mobile devices -- in particular, smartphones.

19

Client Side Web Application aka HTML5

20

Client Side Web Application aka HTML5

21

Architecture in a perfect world

Data Access Layer

Business Logic

Service Layer

WP iOS Android

Service Consumption Local Data / Services

Business Logic

UI Logic

One language to rule them all

Native UI/Native Performance

Business Logic

• Web apps with native wrapper. Hybrid apps run in webview not in native browser.

• Access to device’s capabilities happens through a device-independent JavaScript API which talks to the OS proprietary API’s also via JavaScript.

• Can access certain/all devices capabilities

• With HTML5, Javascript, CSS3 ... it is easier to develop and maintain your app in multiple platforms

• Reuse existing in-house web development skills

22

Hybrid Applications

23

Hybrid Application Example Framework : PhoneGap/Apache Cordova

24

PhoneGap Application

The app

Bridge

• Embed a Chromeless browser in a native app

• Create a « bridge » between the browser and the native code, providing access to native APIs

• Write a web App and package it with native code

• No Cross-compiling magic, just web App

• New : PhoneGap Build Service upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and it does the work of compiling for us

Device Specific

• HTML5, CSS3 and Javascript skills

• Good for content delivery, social network, web ... app-based

• Free

• Lots of platforms supported (iOS, Android, Windows Phone, BlackBerry, WebOS, Symbian …)

• Not recommended for complex games, intensive graphics or data-intensive application

• No Native UI

• Not as performant as Native

25

Hybrid approach

26

Cross Compiled Application PCL + Xamarin + MvvmCross

Portable Class

Libraries Xamarin MvvmCross

Portable C# Code. Share SAME code between platforms

Write app in C#. Native compilation Android/iOS/WP

Cross Platform MVVM + Databinding for iOS, Android DI + services/plugins + Navigation, …

27

Xamarin Application

Models

View-Models

PCL + MvvmCross

Android App WP App

Mainly Views, very limited Specific Code

28

Xamarin Visual Studio Integration Toolbox Designer

Android Specific

29

Xamarin

What is the difference ?

What is your favorite ?

- Native UI & Performance

- Not Limited to mobile devices

- One language to rule them all

- And it’s C#

- 95% shared application logic

- 100% shared test harness

- Separation of concerns

- Overall dev time ≈ dev time per app

- Changes can be done in 1 place (most of the time)

- Pricey

- Limited platforms supported (iOS, Android, Windows Phone)

30

Xamarin approach

31

Before building cross Platform applications some good questions

Store

Monetization

All devices ?

Skills Look’n’

Feel

Performance

Performance

Sensors

Shared Code

Costs of devs

License Fees

Community &

Support

Business

Conclusion

32

Questions ?

33

Appendices & References

34

• http://www.phonegap.com/

• http://www.xamarin.com

• http://fr.slideshare.net/cirrious/dev-evening-monotouch-monodroid-mvvm-mvvmcross-and-databinding

• http://msdn.microsoft.com/en-us/magazine/hh975345.aspx

• http://fr.slideshare.net/hakimrie/phonegapcordova-vs-native-application

• https://github.com/slodge/MvvmCross-Tutorials

• http://www.slideshare.net/peterfriese/cross-platform-mobile-development-11239246

• http://fr.slideshare.net/cirrious/wpug-mvvm-and-data-binding

• http://www.developpez.com/actu/47329/Infinite-Flight-dans-les-coulisses-du-meilleur-simulateur-de-vol-mobile-une-success-story-francaise-en-terres-americaines/ (FRENCH)

• http://blogs.msdn.com/b/dsplaisted/archive/2012/08/27/how-to-make-portable-class-libraries-work-for-you.aspx

• http://fr.slideshare.net/Qframe/building-mobile-cross-platform-solutions

35

Find out more

• On https://techblog.betclicgroup.com/

About Betclic • Betclic Everest Group, one of the world leaders in online gaming, has a unique

portfolio comprising various complementary international brands: Betclic, Everest Gaming, bet-at-home.com, Expekt…

• Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).

• Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players.