native vs hybrid - options to develop your mobile application
TRANSCRIPT
© Copyright 2015 eBusiness Informa9on 1
Mobile development Hybrid vs Native
Should we still develop native applications?
© 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)
© Copyright 2015 eBusiness Informa9on 5
Microso'
Windows Phone
C#
Android
Java
Android Wear
Apple
iOS
Objec9ve C / SwiZ
Apple Watch
© Copyright 2015 eBusiness Informa9on 7
“Hybrid” development framework = Framework allowing to unify some of the developments for mobile applica9ons
under the same programming language.
© Copyright 2015 eBusiness Informa9on 8
The main solutions to create hybrid applications
4. The actors of the hybrid market
© 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
© 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).
© 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
© 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”?
© 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
© 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
© 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
© 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”
© 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
© 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…)
© 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.
© 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.
© 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.
© 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.
© 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
© 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?