Mind the gap! - Droidcon Torino 2015

Alberto López
Braintree_Dev.
<Advocate/>

@PayPalDev @AlbertusLM
@AlbertusLM@Braintree_Dev

battlehack.org

battlehack.org
One Axe

battlehack.org
100.000 USD

>Variations of mobile apps_

goo.gl/zuFRxA
Cross-Platform frameworks

goo.gl/vX4fFh
Characteristics of mobile apps

source: goo.gl/z9WMLL

>Native apps_

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

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

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

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

goo.gl/7ygJx
Android OS Versions (March 2015)

goo.gl/Lwfpw8
Device fragmentation by brand (Aug 2014)

Which tools can I use?

Do I have to pay for a license?

Do I have to learn yet another
programming language?

Is there a steep learning curve?

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

Pro
flic.kr/p/rh7T7Z

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

Contra

Contra
Higher cost of development
Each platform requires maintenance
Device fragmentation
Little to none code reusability

Multiple tickets for one trip

>Cross-platform frameworks_

Top 10 most used
CP frameworks (2014)
source: research2guidance

Most popular CP frameworks (2014)
source: research2guidance

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

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

Pro
hybrid

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

Contra
hybrid

Contra
Potential performance issues
HTML5 doesn´t fulfill all needs
No native emulation
UI and UX not native
hybrid

One ticket to rule them all
flic.kr/p/bDqC1p

>Case study_

My story…
flic.kr/p/jMuatK

Meet the Candy Machine

The payment flow

My skill set
flic.kr/p/jMuatK
UX

The project´s stack
Braintree v.zero SDK

why ?
AngularJS + HTML + JS + CSS + Sass
PhoneGap serves as base
Low learning barrier
Great community support

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

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)

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

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

Advantage of v.zero
v.zero
OFF
ON
ON
ON
ON
OFF
ON
ON
ON
ON
FUTURE
Payment Method
C&D Cards
Braintree

Scalability through v.zero
v.zero <backend/>
<frontend/>
Braintree

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"$
});

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

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

dem
BETA

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

>Conclusion_

source: goo.gl/gcGUzB

Which approach is preferable?

“it depends”

Native App Hybrid App

>Questions?_

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

Mind the gap! - Droidcon Torino 2015

More Related Content

What's hot

Similar to Mind the gap! - Droidcon Torino 2015

More from Alberto López Martín

Recently uploaded

Mind the gap! - Droidcon Torino 2015