hybrid vs native mobile development – how to choose a tech stack

55
@jacdevos [email protected] Hybrid vs native mobile showdown!

Upload: jacques-de-vos

Post on 09-Jan-2017

562 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Hybrid  vs  native  mobileshowdown!

Page 2: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Are  you  building  a  mobile  app?

Page 3: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Why  is  mobile  development  so  hard?

Page 4: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 5: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Mobile/tablet  operating  system  internet  usage

http://marketshare.hitslink.com

Page 6: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

You  have to  support  multiple  operating  systems

Users  don’t  care  about  your  preferences

Page 7: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Platforms  are  differentWe  underestimate  the  learning  costs

Page 8: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Technology  changes  fast  often  changes  before  our  project  is  complete

Page 9: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Evolution  of  Swift  (iOS)• June  2013  – Swift  programming  language  does  not  exist

• June  2014  – Swift  1  is  announced

• June  2015  – Swift  2  is  announced  (BREAKING  CHANGES)

• June  2016  – Swift  3  is  announced  (BREAKING  CHANGES)

• REALLY?

Page 10: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Different  and  changing  tech=

expensive  and  slow  to  development

Page 11: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Mobile  technology  stack  options?

Page 12: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Pure  Native

Page 13: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Who  has  done  some native  development?

Page 14: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Mobile  website  Responsively  designed

Page 15: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Semi-­‐nativeC#  compiled  to  native  machine  code

Page 16: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Semi-­‐nativeJavaScript  calls  native

Page 17: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

HybridHTML  +  Cordova  +  Angular2  +  Ionic2

Page 18: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Contenders  for  the  mobile  stackNative  SDK  rendering:1. Pure  Native:  iOS  and  Android2. Semi-­‐native:  Xamarin3. Semi-­‐native:  React  NativeBrowser  HTML  rendering:1. Hybrid:  Ionic2  or  Cordova2. Mobile  website:  responsive  design

Page 19: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

How  do  you  choose  a  technology  stack?

Page 20: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Do  you  choose  the  “new  and  shiny”  precious  one?

Do  you  choose  the  “new  and  shiny”  precious  one?

Page 21: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]  you  choose  based  on  your  fanaticismDo  you  choose  based  on  your  fanaticism

Page 22: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]  you  choose  what  you  know?Do  you  choose  what  you  know?

Page 23: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Rather:  start  with  the  business  Quality  of  Service  (QoS)  needs

Page 24: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Consider  the  real  QoS factors  first• User  experience• Maintenance  costs  including:– Learnability:  ease  of  upskilling– Reuse:  write  once,  run  anywhere

• The  ability  to  deliver  quickly• Other  subtle  business  needs

Page 25: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

What  are  the  trade-­‐offs?

Page 26: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

The  Potential  for  User  Experience

Page 27: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 28: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

A  great  User  Experience  is  always expected!

Page 29: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 30: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Native  has  a  higher  potential  for  UX

Page 31: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

“the  biggest  mistake  that  we  made  as  a  company  is  betting  too  much  on  HTML5  as  opposed  to  native….”

-­‐Mark  Zuckerberg,  CEO  of  Facebook

Page 32: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 33: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 34: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

User  Experience  Potential

Pure  Native

iOS  and  Android

Semi-­‐native

Xamarin

Semi-­‐native

React  Native

HybridIonic2/Cordova

Mobi  w

ebsite

Native  paradigm  

Speed  of  interaction  

Ease  of  using  interesting  native  SDK

Visualisation libs

Page 35: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

3

2 2

0

-­‐2

PURE  NATIVEIOS  AND  ANDROID

SEMI-­‐NATIVEXAMARIN

SEMI-­‐NATIVEREACT  NATIVE

HYBRIDIONIC2/CORDOVA

MOBI  WEBSITE

User  Experience  Potential

Page 36: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Learnability:  ease  of  upskilling

Page 37: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 38: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Learnability:  ease  of  upskilling

Pure  Native

iOS  and  Android

Semi-­‐native

Xamarin

Semi-­‐native

React  Native

HybridIonic2/Cordova

Mobi  w

ebsite

Stackoverflowabiliy:  help  availability(+  long  term  support)

Framework  knowledge  required  (multiple  teams!?)

Amount  of  tools  required

Page 39: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

-­‐1 -­‐1

-­‐2

2

3

PURE  NATIVEIOS  AND  ANDROID

SEMI-­‐NATIVEXAMARIN

SEMI-­‐NATIVEREACT  NATIVE

HYBRIDIONIC2/CORDOVA

MOBI  WEBSITE

Learnability:  Ease  of  development

Page 40: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Reuse:  write  once,  run  anywhere

Page 41: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 42: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 43: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Reuse:  write once,  runanywhere

Pure  Native

iOS  and  Android

Semi-­‐native

Xamarin

Semi-­‐native

React  Native

HybridIonic2/Cordova

Mobi  w

ebsite

Reuse  business  logic

Reuse  User Interface logic

Workarounds  needed

Page 44: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

-­‐1

0 0

1

3

PURE  NATIVEIOS  AND  ANDROID

SEMI-­‐NATIVEXAMARIN

SEMI-­‐NATIVEREACT  NATIVE

HYBRIDIONIC2/CORDOVA

MOBI  WEBSITE

Portability  and  Reuse

Page 45: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

The  ability  to  deliver  quickly

Page 46: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Page 47: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Continuous  DeliveryPush  updates  without  App  Store

• Only  JavaScript  is  given  this  privilege  by  Apple• Ionic  Platform  Deploy  for  Ionic• AppHub Deploy  for  React  Native

Page 48: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Speed  of  development

Pure  Native

iOS  and  Android

Semi-­‐native

Xamarin

Semi-­‐native

React  Native

HybridIonic2/Cordova

Mobi  w

ebsite

Speed  of  deploymentor  patch

Ease  of  testing  cross-­‐platforms

Require  multiple  version  support

Page 49: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

-­‐3 -­‐3

0

2

3

PURE  NATIVEIOS  AND  ANDROID

SEMI-­‐NATIVEXAMARIN

SEMI-­‐NATIVEREACT  NATIVE

HYBRIDIONIC2/CORDOVA

MOBI  WEBSITE

Speed  of  development

Page 50: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

There  are  other  options  too

Page 51: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Some  options  are  not  linear• Hybrid  native  (Turbolinks)• Cross-­‐native  (Xamarin Forms)• Progressive  Web  Apps  – Service  Worker• NativeScript

Page 52: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

So,  which  stack  is  right?

Page 53: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Most  native

Least  native

Cost  EffectivenessUser  Experience  Potential

There  is  a  trade-­‐off

Page 54: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

When  choosing  a  tech  stack• Be  aware  of  your  biases  and  bigotry• Understand  your  business  needs  well• Understand  the  subtleties  of  the  trade-­‐offs

Page 55: Hybrid vs native mobile development – how to choose a tech stack

@jacdevos [email protected]

Hybrid  or  native  mobile?It  depends!