Hybrid vs native mobile development – how to choose a tech stack
-
Upload
jacques-de-vos -
Category
Software
-
view
565 -
download
0
Transcript of Hybrid vs native mobile development – how to choose a tech stack
![Page 4: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/4.jpg)
@jacdevos [email protected]
![Page 5: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/5.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/6.jpg)
@jacdevos [email protected]
You have to support multiple operating systems
Users don’t care about your preferences
![Page 9: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/9.jpg)
@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 18: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/18.jpg)
@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 20: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/20.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/21.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/22.jpg)
@jacdevos [email protected] you choose what you know?Do you choose what you know?
![Page 24: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/24.jpg)
@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 27: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/27.jpg)
@jacdevos [email protected]
![Page 29: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/29.jpg)
@jacdevos [email protected]
![Page 31: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/31.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/32.jpg)
@jacdevos [email protected]
![Page 33: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/33.jpg)
@jacdevos [email protected]
![Page 34: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/34.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/35.jpg)
@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 37: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/37.jpg)
@jacdevos [email protected]
![Page 38: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/38.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/39.jpg)
@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 41: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/41.jpg)
@jacdevos [email protected]
![Page 42: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/42.jpg)
@jacdevos [email protected]
![Page 43: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/43.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/44.jpg)
@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 46: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/46.jpg)
@jacdevos [email protected]
![Page 47: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/47.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/48.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/49.jpg)
@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 51: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/51.jpg)
@jacdevos [email protected]
Some options are not linear• Hybrid native (Turbolinks)• Cross-‐native (Xamarin Forms)• Progressive Web Apps – Service Worker• NativeScript
![Page 53: Hybrid vs native mobile development – how to choose a tech stack](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/53.jpg)
@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](https://reader031.fdocuments.net/reader031/viewer/2022022203/58729ed41a28ab07208b549f/html5/thumbnails/54.jpg)
@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