building cross platform mobile applications
DESCRIPTION
Common strategies related to building cross platform mobile application : Responsive/Mobilized Web Application, Hybrid App with PhoneGap and Native App with Xamarin ; targeting both Windows Phone, iOS and Android.TRANSCRIPT
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
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.