Contenu connexe Similaire à Native vs Hybrid - Options to develop your mobile application (20) Native vs Hybrid - Options to develop your mobile application1. ©
Copyright
2015
eBusiness
Informa9on
1
Mobile development
Hybrid vs Native
Should we still develop native applications?
2. ©
Copyright
2015
eBusiness
Informa9on
2
1. The Market
Global worldwide Smartphone OS market share
3. ©
Copyright
2015
eBusiness
Informa9on
3
0%
20%
40%
60%
80%
100%
120%
2007
2008
2009
2010
2011
2012
2013
2014
Other
Windows
Phone
Android
iOS
Windows
Mobile
RIM
Symbian
Global
Worldwide
Smartphone
OS
Market
share
(in
unit
shipments)
Source:
GMAT
(2007-‐2010)
IDC
(2011-‐2015)
4. ©
Copyright
2015
eBusiness
Informa9on
4
The main platforms
2. Native development
5. ©
Copyright
2015
eBusiness
Informa9on
5
Microso'
Windows
Phone
C#
Google
Android
Java
Android
Wear
Apple
iOS
Objec9ve
C
/
SwiZ
Apple
Watch
7. ©
Copyright
2015
eBusiness
Informa9on
7
“Hybrid”
development
framework
=
Framework
allowing
to
unify
some
of
the
developments
for
mobile
applica9ons
under
the
same
programming
language.
8. ©
Copyright
2015
eBusiness
Informa9on
8
The main solutions to create hybrid applications
4. The actors of the hybrid market
9. ©
Copyright
2015
eBusiness
Informa9on
9
Main actors
• Phonegap / Cordova
• OpenSource, Apache 2.0
• Uses the “WebView” and web languages
• Titanium
• OpenSource, Apache 2.0
• Interpretes javascript business logic into native components
• Xamarin
• Closed source
• Uses Mono (.Net implementation on UNIX) to run C# on mobile devices
10. ©
Copyright
2015
eBusiness
Informa9on
10
4. Hybrid development
The case of Phonegap / Cordova
11. ©
Copyright
2015
eBusiness
Informa9on
11
According
to
Phonegap
/
Cordova,
Hybrid
=
A
“website”
in
a
fullscreen
mobile
browser
+
A
na9ve
bridge
between
the
“web”
universe
(javascript)
and
the
device.
(This
statement
is,
of
course,
very
simplified
and
incomplete).
12. ©
Copyright
2015
eBusiness
Informa9on
12
iOS
Wrapper
Android
Wrapper
Win.
Phone
Wrapper
GPS,
Wifi,
Accelerometer,
Gyroscope,
Camera…
GPS,
Wifi,
Accelerometer,
Gyroscope,
Camera…
GPS,
Wifi,
Accelerometer,
Gyroscope,
Camera…
Javascript
abstrac9on
layer
.html
scripts
/
styles
/
images…
Na9ve
world
World
of
the
Web
13. ©
Copyright
2015
eBusiness
Informa9on
13
What it is, in a few words
5. Ionic Framework
14. ©
Copyright
2015
eBusiness
Informa9on
14
Ionic
• Cordova = javascript abstraction layer + javascript/native bridge.
• Ionic = standard librairies for dev. + hybrid widgets, built on top
of cordova.
Why is it important to have “hybrid widgets”?
15. ©
Copyright
2015
eBusiness
Informa9on
15
AKA:
Why does an android user feel lost when you put an iPhone in his hands?
(and vice-versa)
6. User eXperience
16. ©
Copyright
2015
eBusiness
Informa9on
16
User eXperience
• A user subscribes to a platform, and to its ecosystem.
Different gestures
Different icons
Different wording
Different UI
www.google.com/design
17. ©
Copyright
2015
eBusiness
Informa9on
17
User eXperience
• A user subscribes to a platform, and to its ecosystem.
• Test:
• “Enable wifi”
• it’s a slide down on android, slide up on iOS. Slide up does not exist on android.
• “Put a phone in vibrate mode”
• Push volume-down on android, switch “vibrate” button on iOS.
• “Stop the music”
• Notification on android, slide up on iOS
www.google.com/design
20. ©
Copyright
2015
eBusiness
Informa9on
20
Paradigme
Clients
Technologies
Challenges
The
“legacy”
web-‐applica;on
Dynamic:
server
generates
the
complete
page
the
user
is
asking
for.
Computers
HTML,
CSS,
Javascript,
jQuery
Server
load,
Data
size
L’applica;on
web
“moderne”
Client-‐Server:
Expose
web
services,
and
have
the
en9re
applica;on
executed
client-‐side.
Computers,
Tablets,
Smartphones
HTML5,
CSS3,
SASS,
Javascript,
Angular.js,
Gulp,
Bower,
…
Heterogeneous
clients,
I9nerant
internet,
Client
app
size,
Business
logic
exposure
“HTML is so much simpler than native”
21. ©
Copyright
2015
eBusiness
Informa9on
21
“HTML is so much simpler than native”
Bower
loads
external
dependencies
Gulp
• cross-‐compiles
your
SCSS
or
LESS
styles
in
CSS
• uglifies
&
concatenates
your
.js
• minifies
your
HTML
code
• suffixes
files
for
caching
An
explosion
of
technologies
since
V8,
an
ecosystem
that
is
not
stable
yet
Source:
Google
Trends
22. ©
Copyright
2015
eBusiness
Informa9on
22
“Hybrid development is limited anyway”
• Access to basic native features is built-in
• Numerous plugins are available for more advanced features
(Notifications, SMS, In-app purchase, etc…)
• The limit is rather set around very specific uses (Intents
(contacts, calendar, …), Android Wear, Apple watch…)
23. ©
Copyright
2015
eBusiness
Informa9on
23
“Hybrid development has a better TTM”
• It depends how much UX is important to you.
This widget has just changed
transitions and the position of the
menu (iOS: bottom, Android: top).
However: the menus are the same,
and have iOS icons.
è To do it right, you would need to
develop two completely different UIs.
24. ©
Copyright
2015
eBusiness
Informa9on
24
“Native development is much faster”
• Yes, however:
• YAGNI (You Ain’t Gonna Need It): sometimes, you just don’t need
performance.
A “morning alarm” app may not need native performance.
25. ©
Copyright
2015
eBusiness
Informa9on
25
“Hybrid development is slow”
• Tout dépend du framework qui est retenu.
• New frameworks with WebGl components are being released
(Famo.us)
• Xamarin and Titanium have a reduced overhead as they rely
exclusively on native components
è Those solutions are great for an “out-of-the box” use, but are
hardly tweakable.
26. ©
Copyright
2015
eBusiness
Informa9on
26
Taking some distance
• The promises to get away from :
• With Cordova, you are developing in a complete abstraction of the
platform.
• With Ionic, you already have all the necessary multi-plateform widgets
to create any kind of app.
• Those which make more sense :
• With Cordova, you can have your dedicated web team develop your
mobile apps on all platforms.
• With Ionic, you get a framework which gives you some elements
designed to facilitate those developments.
27. ©
Copyright
2015
eBusiness
Informa9on
27
Elements to orientate your decision
8. Make up your mind
28. ©
Copyright
2015
eBusiness
Informa9on
28
Features
and
UI
Complexity
Importance
of
plaoorm-‐dedicated
UX
Importance
of
performance
Available
Budget
Pro
Hybrid
Pro
Na9ve
Pro
Na9ve
or
Hybrid
Hybrid
(no
choice)
Under
constraints
and
with
concessions.
TTM
Constraint
29. ©
Copyright
2015
eBusiness
Informa9on
29
More thoughts
• Do you need to develop for both Android and iOS and Windows phone?
• Do you have teams in place?
• If yes, what efforts to train them? What technologies do they want to work with? What about
hardware investment?
• If no, what is the market offer for the different options?
• Do you have specific native constraints (Contacts, iBeacons, Wearables, …)?
• Is your project supposed to have complex interactive views and transitions?
• Is your application for grand-public?
30. ©
Copyright
2015
eBusiness
Informa9on
30
Q&A
@LoicOrtola
fr.linkedin.com/in/loicortola
ebusinessinformation.fr
mapsquare.io