Choosing the wrong mobile tech stack sets you up for a world of pain. But how do you select the right one from a plethora of current options? As an iOS developer I am convinced that a carefully designed native app provides the best user experience. So why would we choose Ionic2/Angular2 on Cordova (a bleeding edge Hybrid JavaScript framework) for our latest mobile App? In this short talk I will share our thinking and experiences on the current landscape of mobile stack options. I will introduce the contenders: Native (iOS and Android) vs Semi-Native (Xamarin and React Native) vs Hybrid (Ionic2/Angular2 on Cordova) vs Web. We will then go through some of the prominent tradeoffs between the different options: cost, reuse, single language, speed and user experience, device support, learning curve. This should give you some (opinionated) guidelines to choosing the right mobile stack for your particular App.

1. @jacdevos jacques@nreality.com
Hybrid
vs
native
mobile
showdown!

2. @jacdevos jacques@nreality.com
Are
you
building
a
mobile
app?

3. @jacdevos jacques@nreality.com
Why
is
mobile
development
so
hard?

4. @jacdevos jacques@nreality.com

5. @jacdevos jacques@nreality.com
Mobile/tablet
operating
system
internet
usage
http://marketshare.hitslink.com

6. @jacdevos jacques@nreality.com
You
have to
support
multiple
operating
systems
Users
don’t
care
about
your
preferences

7. @jacdevos jacques@nreality.com
Platforms
are
different
We
underestimate
the
learning
costs

8. @jacdevos jacques@nreality.com
Technology
changes
fast
often
changes
before
our
project
is
complete

9. @jacdevos jacques@nreality.com
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?

10. @jacdevos jacques@nreality.com
Different
and
changing
tech
=
expensive
and
slow
to
development

11. @jacdevos jacques@nreality.com
Mobile
technology
stack
options?

12. @jacdevos jacques@nreality.com
Pure
Native

13. @jacdevos jacques@nreality.com
Who
has
done
some native
development?

14. @jacdevos jacques@nreality.com
Mobile
website
Responsively
designed

15. @jacdevos jacques@nreality.com
Semi-­‐native
C#
compiled
to
native
machine
code

16. @jacdevos jacques@nreality.com
Semi-­‐native
JavaScript
calls
native

17. @jacdevos jacques@nreality.com
Hybrid
HTML
+
Cordova
+
Angular2
+
Ionic2

18. @jacdevos jacques@nreality.com
Contenders
for
the
mobile
stack
Native
SDK
rendering:
1. Pure
Native:
iOS
and
Android
2. Semi-­‐native:
Xamarin
3. Semi-­‐native:
React
Native
Browser
HTML
rendering:
1. Hybrid:
Ionic2
or
Cordova
2. Mobile
website:
responsive
design

19. @jacdevos jacques@nreality.com
How
do
you
choose
a
technology
stack?

20. @jacdevos jacques@nreality.com
Do
you
choose
the
“new
and
shiny”
precious
one?
Do
you
choose
the
“new
and
shiny”
precious
one?

21. @jacdevos jacques@nreality.comDo
you
choose
based
on
your
fanaticismDo
you
choose
based
on
your
fanaticism

22. @jacdevos jacques@nreality.comDo
you
choose
what
you
know?Do
you
choose
what
you
know?

23. @jacdevos jacques@nreality.com
Rather:
start
with
the
business
Quality
of
Service
(QoS)
needs

24. @jacdevos jacques@nreality.com
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

25. @jacdevos jacques@nreality.com
What
are
the
trade-­‐offs?

26. @jacdevos jacques@nreality.com
The
Potential
for
User
Experience

27. @jacdevos jacques@nreality.com

28. @jacdevos jacques@nreality.com
A
great
User
Experience
is
always expected!

29. @jacdevos jacques@nreality.com

30. @jacdevos jacques@nreality.com
Native
has
a
higher
potential
for
UX

31. @jacdevos jacques@nreality.com
“the
biggest
mistake
that
we
made
as
a
company
is
betting
too
much
on
HTML5
as
opposed
to
native….”
-­‐ Mark
Zuckerberg,
CEO
of
Facebook

32. @jacdevos jacques@nreality.com

33. @jacdevos jacques@nreality.com

34. @jacdevos jacques@nreality.com
User
Experience
Potential
Pure
Native
iOS
and
Android
Semi-­‐native
Xamarin
Semi-­‐native
React
Native
Hybrid
Ionic2/Cordova
Mobi
website
Native
paradigm
Speed
of
interaction
Ease
of
using
interesting
native
SDK
Visualisation libs

35. @jacdevos jacques@nreality.com
3
2 2
0
-­‐2
PURE
NATIVE
IOS
AND
ANDROID
SEMI-­‐NATIVE
XAMARIN
SEMI-­‐NATIVE
REACT
NATIVE
HYBRID
IONIC2/CORDOVA
MOBI
WEBSITE
User
Experience
Potential

36. @jacdevos jacques@nreality.com
Learnability:
ease
of
upskilling

37. @jacdevos jacques@nreality.com

38. @jacdevos jacques@nreality.com
Learnability:
ease
of
upskilling
Pure
Native
iOS
and
Android
Semi-­‐native
Xamarin
Semi-­‐native
React
Native
Hybrid
Ionic2/Cordova
Mobi
website
Stackoverflowabiliy:
help
availability
(+
long
term
support)
Framework
knowledge
required
(multiple
teams!?)
Amount
of
tools
required

39. @jacdevos jacques@nreality.com
-­‐1 -­‐1
-­‐2
2
3
PURE
NATIVE
IOS
AND
ANDROID
SEMI-­‐NATIVE
XAMARIN
SEMI-­‐NATIVE
REACT
NATIVE
HYBRID
IONIC2/CORDOVA
MOBI
WEBSITE
Learnability:
Ease
of
development

40. @jacdevos jacques@nreality.com
Reuse:
write
once,
run
anywhere

41. @jacdevos jacques@nreality.com

42. @jacdevos jacques@nreality.com

43. @jacdevos jacques@nreality.com
Reuse:
write once,
run
anywhere
Pure
Native
iOS
and
Android
Semi-­‐native
Xamarin
Semi-­‐native
React
Native
Hybrid
Ionic2/Cordova
Mobi
website
Reuse
business
logic
Reuse
User Interface logic
Workarounds
needed

44. @jacdevos jacques@nreality.com
-­‐1
0 0
1
3
PURE
NATIVE
IOS
AND
ANDROID
SEMI-­‐NATIVE
XAMARIN
SEMI-­‐NATIVE
REACT
NATIVE
HYBRID
IONIC2/CORDOVA
MOBI
WEBSITE
Portability
and
Reuse

45. @jacdevos jacques@nreality.com
The
ability
to
deliver
quickly

46. @jacdevos jacques@nreality.com

47. @jacdevos jacques@nreality.com
Continuous
Delivery
Push
updates
without
App
Store
• Only
JavaScript
is
given
this
privilege
by
Apple
• Ionic
Platform
Deploy
for
Ionic
• AppHub Deploy
for
React
Native

48. @jacdevos jacques@nreality.com
Speed
of
development
Pure
Native
iOS
and
Android
Semi-­‐native
Xamarin
Semi-­‐native
React
Native
Hybrid
Ionic2/Cordova
Mobi
website
Speed
of
deploymentor
patch
Ease
of
testing
cross-­‐platforms
Require
multiple
version
support

49. @jacdevos jacques@nreality.com
-­‐3 -­‐3
0
2
3
PURE
NATIVE
IOS
AND
ANDROID
SEMI-­‐NATIVE
XAMARIN
SEMI-­‐NATIVE
REACT
NATIVE
HYBRID
IONIC2/CORDOVA
MOBI
WEBSITE
Speed
of
development

50. @jacdevos jacques@nreality.com
There
are
other
options
too

51. @jacdevos jacques@nreality.com
Some
options
are
not
linear
• Hybrid
native
(Turbolinks)
• Cross-­‐native
(Xamarin Forms)
• Progressive
Web
Apps
– Service
Worker
• NativeScript

52. @jacdevos jacques@nreality.com
So,
which
stack
is
right?

53. @jacdevos jacques@nreality.com
Most
native
Least
native
Cost
Effectiveness
User
Experience
Potential
There
is
a
trade-­‐off

54. @jacdevos jacques@nreality.com
When
choosing
a
tech
stack
• Be
aware
of
your
biases
and
bigotry
• Understand
your
business
needs
well
• Understand
the
subtleties
of
the
trade-­‐offs

55. @jacdevos jacques@nreality.com
Hybrid
or
native
mobile?
It
depends!