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,
…
...
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
1...
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 Des...
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
Loc...
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,...
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, si...
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 ...
17
Mobile Web Applications
Responsive Design examples
optimal viewing experience a wide
range of devices/screen resolution...
18
Mobile Web Applications
Mobilized examples
iOS Css StyleSheet…
designed specifically for mobile devices
-- in particula...
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...
• Web apps with native wrapper. Hybrid apps run in webview not in native
browser.
• Access to device’s capabilities happen...
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 brow...
• HTML5, CSS3 and Javascript skills
• Good for content delivery, social network, web ... app-based
• Free
• Lots of platfo...
26
Cross Compiled Application
PCL + Xamarin + MvvmCross
Portable
Class
Libraries
Xamarin MvvmCross
Portable C# Code.
Share...
27
Xamarin Application
Models
View-
Models
PCL +
MvvmCross
Android App WP App
Mainly Views, very
limited Specific
Code
28
Xamarin
Visual Studio IntegrationToolbox 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 appli...
31
Before building cross Platform applications
some good questions
Store
Monetiz
ation
All
devices ?
Skills
Look’n’
Feel
P...
Conclusion
32
Questions ?
33
Appendices & References
34
• http://www.phonegap.com/
• http://www.xamarin.com
• http://fr.slideshare.net/cirrious/dev-evening-monotouch-monodroid-mv...
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 variou...
Upcoming SlideShare
Loading in …5
×

Building Cross Platform Mobile Applications

3,834 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,834
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Building Cross Platform Mobile Applications

  1. 1. Building Cross Platform Mobile Applications yes, we can ! Maxime Lemaitre – 04/07/2013
  2. 2. 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. 3. 3 Welcome to the mobile World To be continued …
  4. 4. 4 Mobile Trends Global Stats, Source StatCounter
  5. 5. 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. 6. 6 Android Segmentation Source : Android Dev DashBoad, June 2013
  7. 7. 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. 8. 8 Business First Syndrome I want an App … … and another App … … and another App … … and another App … OK OK OK OK
  9. 9. 9 The (Default) Native Experience Each device has its own design
  10. 10. 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 Business CommonBusinessDeviceSpecific ProbabilityofChange
  11. 11. 11 Why mobile development is so complicated Multiple OS, Multiple languages Not a problem for Chuck Norris. What about you ?
  12. 12. 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. 13. 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…
  14. 14. Investigating Cross Platform Strategies & Solutions 14
  15. 15. 15 Applications Types
  16. 16. • 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. 17. 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. 18. 18 Mobile Web Applications Mobilized examples iOS Css StyleSheet… designed specifically for mobile devices -- in particular, smartphones.
  19. 19. 19 Client Side Web Application aka HTML5
  20. 20. 20 Client Side Web Application aka HTML5
  21. 21. 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
  22. 22. • 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. 23. 23 Hybrid Application Example Framework : PhoneGap/Apache Cordova
  24. 24. 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
  25. 25. • 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. 26. 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. 27. 27 Xamarin Application Models View- Models PCL + MvvmCross Android App WP App Mainly Views, very limited Specific Code
  28. 28. 28 Xamarin Visual Studio IntegrationToolbox Designer Android Specific
  29. 29. 29 Xamarin What is the difference ? What is your favorite ?
  30. 30. - 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. 31. 31 Before building cross Platform applications some good questions Store Monetiz ation All devices ? Skills Look’n’ Feel Perform ance Perform ance Sensors Shared Code Costs of devs License Fees Commun ity & Support Business
  32. 32. Conclusion 32
  33. 33. Questions ? 33
  34. 34. Appendices & References 34
  35. 35. • 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
  36. 36. Find out more • On https://techblog.betclicgroup.com/
  37. 37. 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.

×