An unknown Mobile “country”. A wandering developer from Web “city”. No idea about how to deal with the “droids”. The only available means of transport: the express “JavaScript” train, the most up-to-date Html Underground and the confortable and safe CSS Tram. Tension, drama, action and finally, love. This is my story getting started with Android OS. In this talk we’ll speak about the existent cross platforms for mobile development, talking openly about weaknesses, strengths and myths present in cross platforms, from the point of view of a newbie mobile developer. Talk given at Droidcon Torino 2015

1. Alberto López
Braintree_Dev.
<Advocate/>

2. ciao
source

3. @AlbertusLM@Braintree_Dev

4. @PayPalDev @AlbertusLM
@AlbertusLM@Braintree_Dev

5. battlehack.org
@AlbertusLM@Braintree_Dev

6. battlehack.org
@AlbertusLM@Braintree_Dev

7. battlehack.org
One Axe
@AlbertusLM@Braintree_Dev

8. battlehack.org
@AlbertusLM@Braintree_Dev

9. battlehack.org
100.000 USD
@AlbertusLM@Braintree_Dev

10. Alberto López
Braintree_Dev.
<Advocate/>

11. >Variations of mobile apps_
@AlbertusLM@Braintree_Dev

12. @AlbertusLM@Braintree_Dev
goo.gl/zuFRxA
Cross-Platform frameworks

13. @AlbertusLM@Braintree_Dev
goo.gl/vX4fFh
Characteristics of mobile apps

14. @AlbertusLM@Braintree_Dev
source: goo.gl/z9WMLL

15. @AlbertusLM@Braintree_Dev

16. >Native apps_
@AlbertusLM@Braintree_Dev

17. persona pensando
¿Para quién desarrollar la aplicación?

20. Top 10 mobile device vendors (Mar’14 - Feb’15)
StatCounter.com
@AlbertusLM@Braintree_Dev

21. Top 8 mobile O.S. (Mar’14 - Feb’15)
StatCounter.com
@AlbertusLM@Braintree_Dev

22. persona pensando
¿Para quién desarrollar la aplicación?
The green line

23. The green line

24. goo.gl/7ygJx
Android OS Versions (March 2015)
@AlbertusLM@Braintree_Dev

25. goo.gl/Lwfpw8
Device fragmentation by brand (Aug 2014)
@AlbertusLM@Braintree_Dev

26. Which tools can I use?
@AlbertusLM@Braintree_Dev

27. Do I have to pay for a license?
@AlbertusLM@Braintree_Dev

28. Do I have to learn yet another
programming language?
@AlbertusLM@Braintree_Dev

29. Is there a steep learning curve?
@AlbertusLM@Braintree_Dev

31. iOS
Languages
Objective C
C, C++
Swift
IDE
Xcode
Required
Apple device
Dev license
S.O.
Android
Languages
Java
C
C++
IDE
Android Studio
Required
Dev license
S.O.
Windows Phone
Languages
C#
VB.NET
…
IDE
Visual Studio
Required
Dev license
S.O.
Blackberry OS
Languages
Java
IDE
Momentics
Required
Dev license

32. Pro
flic.kr/p/rh7T7Z
@AlbertusLM@Braintree_Dev

33. Pro
flic.kr/p/rh7T7Z
@AlbertusLM@Braintree_Dev
Better performance
UI and UX are platform native
New APIs are instantly available
No internet connection required

34. Contra
@AlbertusLM@Braintree_Dev

35. Contra
@AlbertusLM@Braintree_Dev
Higher cost of development
Each platform requires maintenance
Device fragmentation
Little to none code reusability

36. @AlbertusLM@Braintree_Dev
Multiple tickets for one trip

37. >Cross-platform frameworks_
@AlbertusLM@Braintree_Dev

38. persona pensando
¿Para quién desarrollar la aplicación?

40. Top 10 most used
CP frameworks (2014)
@AlbertusLM@Braintree_Dev
source: research2guidance

41. @AlbertusLM@Braintree_Dev
Most popular CP frameworks (2014)
source: research2guidance

42. v

43. v
LanguagesPlatforms Strengths
· Apps are completely native
· UI works across multiple platforms
· Robust access to native APIs
· Native SDKs for Android & iOS
Issues
· Problems with UI control
· Expensive
· SDK managed locally
LanguagesPlatforms Strengths
· Native Apps
· Up to 90% of the code is reusable
· Native SDKs for Android & iOS
Issues
· Separated UIs
· Expensive
· Separate device APIs

45. Platforms Strengths
· Close to being native
· Big community (Open Source)
· Lots of plugins
· Access to native APIs
· # of compatible frontend frameworks
Issues
· Lower performance in big apps
· Open Source
· Only JS, CSS & HTML
Languages
Platforms Strengths
· PhoneGap / Cordova compatible
· Sencha Touch: MVC, UI lib & API
· Native packaging via Sencha´s SDK
· Interoperable products
Issues
· Lower performance
· Difficult to develop custom modules
Languages

46. Pro
@AlbertusLM@Braintree_Dev
hybrid

47. Pro
@AlbertusLM@Braintree_Dev
code reusability
faster time to market
cost reduction
fast updates across all O.S.
hybrid

48. Contra
@AlbertusLM@Braintree_Dev
hybrid

49. Contra
@AlbertusLM@Braintree_Dev
Potential performance issues
HTML5 doesn´t fulfill all needs
No native emulation
UI and UX not native
hybrid

50. @AlbertusLM@Braintree_Dev
One ticket to rule them all
flic.kr/p/bDqC1p

51. >Case study_
@AlbertusLM@Braintree_Dev

52. My story…
@AlbertusLM@Braintree_Dev
flic.kr/p/jMuatK

53. @AlbertusLM@Braintree_Dev
Meet the Candy Machine

54. @AlbertusLM@Braintree_Dev
The payment flow

55. My skill set
flic.kr/p/jMuatK
@AlbertusLM@Braintree_Dev
UX

56. The project´s stack
@AlbertusLM@Braintree_Dev
Braintree v.zero SDK

57. @AlbertusLM@Braintree_Dev
why ?
AngularJS + HTML + JS + CSS + Sass
PhoneGap serves as base
Low learning barrier
Great community support

58. @AlbertusLM@Braintree_Dev
Installing ionic
installing(ionic
npm$install$*g$ionic
starting(project
ionic$start$<project_name>
adding(Android(as(platform
ionic$platform$add$android
running(application
ionic$run$android

59. @AlbertusLM@Braintree_Dev
File schema
CandyMachine(
_platforms$
$$$_android$
_plugins$
$$$_com.phonegap.plugins.barcodescan(
$$$_cordova.plugin.inappbrowser$
_scss$
_www$
_css$
$$_candy.png$
_styles.css$
_js$
_app.js$
_ng<cordova.min.js(
_lib$
_ionic$
_angular$
_index.html$
(included(only(important(files(for(explanation)

60. @AlbertusLM@Braintree_Dev
$cordovaBarcodeScanner
Adding the barcode module
ionic$plugin$add$https://github.com/wildabeast/BarcodeScanner.git

61. @AlbertusLM@Braintree_Dev
Adding the barcode plugin
[…]$
<button$class="button"$ng*click="cmCtrl.openQRcodeScanner()">Init$scanner</button>$
[…]
<file>.html
[…]$
scope.openQRcodeScanner$=$function()${$
$$$$$cordovaBarcodeScanner.scan()$
$$$$$$$.then(function(imageData)${$CODE$IF$OK$})$
$$$$$$$.error(function(error)${$CODE$IF$ERROR$});$
$$$$})$
$$};$
[…]
<file>.js

62. Advantage of v.zero
v.zero
OFF
ON
ON
ON
ON
OFF
ON
ON
ON
ON
FUTURE
Payment Method
C&D Cards
@AlbertusLM@Braintree_Dev
Braintree

63. Scalability through v.zero
v.zero <backend/>
@AlbertusLM@Braintree_Dev
<frontend/>
Braintree

64. @AlbertusLM@Braintree_Dev
BraintreeInstalling v.zero
Installation((server)
npm$install$braintree
Credentials((<file>.js)
var$gateway$=$braintree.connect({$
$$environment:$braintree.Environment.Sandbox,$
$$merchantId:$"useYourMerchantId",$
$$publicKey:$"useYourPublicKey",$
$$privateKey:$"useYourPrivateKey"$
});

65. @AlbertusLM@Braintree_Dev
Frontend
$http.get('http://candymachine.ngrok.com/token')(
[…]$
braintree.setup(clientToken,$'dropin',${$
container:$'checkout',$
$$paymentMethodNonceReceived:$function$(event,$nonce)${$
$$http.post('http://candymachine.ngrok.com/payment',${$
$$$$amount:$amount,$
$$$$$$$payment_method_nonce:$nonce})$
[…]$
Braintree
mainFile.js((controllers)
<script$src=“https://js.braintreegateway.com/v2/braintree.js"></script>$
[…]$
<div$id="checkout"></div>
<file>.html

66. @AlbertusLM@Braintree_Dev
Backend
getting(token
router.get('/token',$function$(req,$res)${$
$$gateway.clientToken.generate(null,$function$(error,$response)${$
$$$$res.json(response);$
$$});$
});
finish(payment
router.post('/payment',$function$(req,$res)${$
$$var$sale$=${$
$$$$amount:$"10",$
$$$$payment_method_nonce:$req.param('payment_method_nonce')$
$$};$
$$gateway.transaction.sale(sale,$function$(error,$response)${$
$$$$if$(!error$&&$response.success)${$
$$$$$$res.json(response);$
$$$$}});});
Braintree

67. @AlbertusLM@Braintree_Dev
dem
BETA

68. @AlbertusLM@Braintree_Dev
SBraintree
braintreepayments.com
developers.braintree.com
Ionic Framework
ionicframework.com
Cordova
cordova.apache.org
NgCordova Plugins
ngcordova.com/docs/plugins/barcodeScanner
PhoneGap
phonegap.com
AngularJS
angularjs.org

69. >Conclusion_
@AlbertusLM@Braintree_Dev

70. @AlbertusLM@Braintree_Dev

71. @AlbertusLM@Braintree_Dev
source: goo.gl/gcGUzB

72. Which approach is preferable?
@AlbertusLM@Braintree_Dev

73. “it depends”
@AlbertusLM@Braintree_Dev

74. @AlbertusLM@Braintree_Dev
Native App Hybrid App

75. >Questions?_
@AlbertusLM@Braintree_Dev

76. Source'photo

77. Alberto López
alberto.lopez@getbraintree.com
@AlbertusLM / @Braintree_Dev