Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
Hybrid App LandscapeRuben SmeetsES&S03/02/2016
Agenda
• Why cross-platform mobile app development?• What are hybrid apps?• Hybrid app early and current struggles• Hybrid is bigger than Cordova/Phonegap• The future of hybrid apps
Native app development is expensive…
App Store
.app
Xcode
Obj-C, C, C++
Play Store
.apk
AndroidStudio,
SDK
Java
Windows Marketplace
.xap
Visual Studio
C#, VB.NET
, etc.
BlackBerry App World
.cod
BB Java
EclipsePlug-In
Java
Separate source code and expertise (GUI toolkits, SDKs, etc.) results in Expensive development and maintenance
Releasing same app for each platform is time-consuming when resources are scarce
Cross-Platform Development Tools to the Rescue?
Source-codeTranslators
Runtime (VM approach)
Webtoolkits/Framew
orksWeb-to-native
WrappersApp
Factories
Output native native web-app hybrid-app web, hybrid, native
Which oneshould I choose?
What about Hybrid apps?
Source-codeTranslators
Runtime (VM approach)
Webtoolkits/Framew
orksWeb-to-native
WrappersApp
Factories
Output native native web-app hybrid-app web, hybrid, native
Combination of web toolkitsand Web-to-native wrappers
Native Container
What are Hybrid Apps?• Web code runs inside a thin
native wrappero Chromeless WebView
• Web portion can be downloaded from the web or packaged within the app (offline availability)
• Access device features through pluginso JS-to-native bridge
• Reuse existing web skills
Web Code
Device APIs
HTML
CSS
JS
Hybrid app propertiesNative apps Hybrid apps Web apps
Ease of discovery Through native app stores Search on referrals (Facebook, twitter, etc.)
Reach Fragmented across multiple platorms Works on almost all devices
Depth of experience Full acces to platform resources
Access to native API at the expense of UI Limited by browser sandbox
Customer ownership & terms
Apple Appstore enforceonerous terms Complete ownership of customer
Engagementandrecurring use
Notifications and homescreen icon
No notifications, difficult to get userto save the link
Monetisation potential High through Appstores No accepted method of payment(Chrome web-store)
Ease of cross-platform development
Replication developing formultiple platforms
Significant fragmentation foradvanced apps
Upgradebility & updates Through native app stores ** Web content updates require no approval*** No approval needed
Debugging & testing Full support by native development tools
Browser debugging tools automatedtesting tools
Developing experienceSmall changes requirerecompilation andreinstallation
Live-reload, instant reflection of changes
Vendor lock-in(framework)
No code sharing betweenplatforms
Limited to no code sharing betweenframeworks
Multi-platformbuild support
Local build for each platform seperately
Cloud-based build toolsoffered by frameworks No cross-platform building required
VisionMobile Cross-Platform Developer Tools 2012
Low RankingHigh Ranking
**Enterprise app stores require no update approval. They set their own terms.***Drastic functionality changes results in app being pulled from stores. (direct-updates-allowed-by-apples-guidelines?)
Hybrid App Example (Single-Page-App)Antwerp – Tax app
Agenda
• Why cross-platform mobile app development?• What are hybrid apps?• Hybrid app early and current struggles• Hybrid is bigger than Cordova/Phonegap• The future of hybrid apps
The Hybrid Landscape Early Struggles2012 – Mark Zuckerberg:
“The biggest mistake that we made, as a company, is betting too much on HTML5
as opposed to native”
The deal breakers:- The lack of tooling
- Scrolling performance
- Touch events latency
- No GPU hardware acceleration
- Better cachinghttp://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html
iOS8+, Android 4.1+ have native scrolling for WebViews
FastClick libraries, Fixed by browsers*
Live Reload, Remote debugging, Memory/FPS profiling, etc…
Hardware accelerated CSS, WebGL*
LocalStorage, IndexedDB, SQLite, File system
The Hybrid Landscape Current StrugglesDiscussed here• WebView fragmentation• Yet another framework syndrome
Others• Security• Scalability (complex apps)• Always a (few) step(s) behind native feature support• Quality of plugins and community APIs• Poor gesture recognition compared to native• App UI feels out of place
The Hybrid Landscape Current StrugglesWebView Fragmentation
31%
36%
33%
4.3 and earlier - webkit
4.4 - blink
5.0 and later - blink-updatable
5%9%
77%
9%
7.x - IE98.0 - IE108.1 - IE1110 - Edge (Chakra)
7%
18%
75%
iOS7 and earlier - UIWebView
iOS8 - WKWebView (Nitro JIT)
iOS9 - WKWebView (Nitro JIT)
As measured by the App Store on January 11, 2016.
As measured by the Play Store on January 4, 2016.
As measured by AdDuplexon December 15, 2015.
Fragmentation results in:- Inconsistent feature support- Performance implications- Lowest common denominator
for legacy support
http://caniuse.com/ or http://mobilehtml5.org/JetStream or Speedometer benchmark
The Hybrid Landscape Current StrugglesWebView Fragmentation – continued
5%9%
77%
9%
7.x - IE98.0 - IE108.1 - IE1110 - Edge (Chakra)
7%
18%
75%
iOS7 and earlier - UIWebView
iOS8 - WKWebView (Nitro JIT)
iOS9 - WKWebView (Nitro JIT)
As measured by the App Store on January 11, 2016.
As measured by the Play Store on January 4, 2016.
As measured by AdDuplexon December 15, 2015.
https://crosswalk-project.org/
Custom WebView
31%
36%
33%
4.3 and earlier - webkit
4.4 - blink
5.0 and later - blink-updatable
The Hybrid Landscape Current StrugglesWebView Fragmentation – continued
3%
97%
earlier then 4.x - webkit
4.x and later - blink-updatable
5%9%
77%
9%
7.x - IE98.0 - IE108.1 - IE1110 - Edge (Chakra)
7%
18%
75%
iOS7 and earlier - UIWebView
iOS8 - WKWebView (Nitro JIT)
iOS9 - WKWebView (Nitro JIT)
As measured by the App Store on January 11, 2016.
As measured by the Play Store on January 4, 2016.
As measured by AdDuplexon December 15, 2015.
https://crosswalk-project.org/
Custom WebView
- Distributed as Cordova-plugin- Chromium version 46 (latest stable v17)- Reduces WebView fragmentation- Controlled runtime and upgrade cycle- Larger apk size ±20 MB
The Hybrid Landscape Current StrugglesWebView Fragmentation – continued
3%
97%
earlier then 4.x - webkit
4.x and later - blink-updatable
5%9%
77%
9%
7.x - IE98.0 - IE108.1 - IE1110 - Edge (Chakra)
7%
18%
75%
iOS7 and earlier - UIWebView
iOS8 - WKWebView (Nitro JIT)
iOS9 - WKWebView (Nitro JIT)
As measured by the App Store on January 11, 2016.
As measured by the Play Store on January 4, 2016.
As measured by AdDuplexon December 15, 2015.
WKWebView (iOS8) problems:- Cannot load local files à messy workaround- Freezing main thread- Unwanted scrolling behaviour- etc..
Resulted in the continueduse of the old UIWebview
The Hybrid Landscape Current StrugglesWebView Fragmentation – continued
3%
97%
earlier then 4.x - webkit
4.x and later - blink-updatable
5%9%
77%
9%
7.x - IE98.0 - IE108.1 - IE1110 - Edge (Chakra)
7%
18%
75%
iOS7 and earlier - UIWebView
iOS8 - WKWebView (Nitro JIT)
iOS9 - WKWebView (Nitro JIT)
As measured by the App Store on January 11, 2016.
As measured by the Play Store on January 4, 2016.
As measured by AdDuplexon December 15, 2015.
WKWebView (iOS9):- Fixed local file loading problem- Cordova-plugin available since Cordova
iOS 4.0.0
- Only available on iOS9, iOS8 still requiresworkaround
- Safari View Controller
The Hybrid Landscape Current StrugglesYet Another Framework Syndrome
http://www.developereconomics.com/search/tools/to/build/
• Almost every day there are new libraries, frameworks and tools
• Trying to find a needle in a haystack
• Create something “new” rather than improve existing solutions results in reinventing the wheel
• Uncertain future of frameworks and tools
• Vendor lock-in• E.g.: Famo.us recently came to
an end (11/2015)Helpful resources:- TodoMVC project- how-to-pick-a-frontend-web-framework- front-end-handbook
Agenda
• Why cross-platform mobile app development?• What are hybrid apps?• Hybrid app early and current struggles• Hybrid is bigger than Cordova/Phonegap• The future of hybrid apps
Hybrid Apps are bigger than cordovaHybrid App Patterns
Native vs Hybrid vs Web – Kinvey & MOOVWEB ebook
Purepattern
Blendedpattern
Mulletpattern
Fallbackpattern
Properties• Single webview for
entire screen
• Content & navigationdone in HTML5
• Thin native wrapperexposing native APIs
• Use native componentsfor the main navigationUI (e.g. Tab bar)
• Use multiple webviewswith content
• Native transitionanimations
• Fully native for earlyparts of a user flow within the app(product browsing)
• Web based for later parts like checkout
• Mostly native app
• Uses hybrid webviewsfor little used or frequently changingcontent
Example Apps• Lokale Politie
Antwerpen app• Antwerp – Tax
• Apples’s App store app• Google’s Gmail app• Autosalon 2015 Brussel
• Walmart apps• Belk apps
• Facebook app• Instagram app
+ +
Hybrid Apps are bigger than cordovaPattern Examples
Pure Pattern(Single Page)
Blended Pattern(Multi Page)
Fallback PatternMullet Pattern
FacebookWalmartApple App StorePolitie Antwerpen
Hybrid Apps are bigger than cordovaTakeaways
Complex hybrid apps often start out as single-page apps. However, as the complexity increases they transistion to
larger native portions (fallback pattern)
Good hybrid apps are hard to spot (e.g. Instagram)
Native VS Hybrid war is over…Pure hybrid apps serve a different purpose than native apps
Agenda
• Why cross-platform mobile app development?• What are hybrid apps?• Hybrid app early and current struggles• Hybrid is bigger than Cordova/Phonegap• The future of hybrid apps
The Future of Hybrid AppsNative Javascript?
NO DOM
NO Cross Compilation
JavaSript VM
Native UI/Widgets
Titanium React Native Nativescript TabrisJS SmartfaceAnnounced 2008 2015 2014 2014 2011
Version v5.0.1 v0.18 v1.5 v1.5 v4.5.0
Platforms
Android 4.0.x – 6.0.x
iOS7.1.x – 9.2.x
WP
Android API 23
iOS6.0.x – 9.2.x
Android 4.2.x – 6.0.x
iOS7.1.x – 9.2.xWP (soon)
Android /
iOS/
Android 4.2.x – 6.0.x
iOS7.1.x – 9.2.x
Popularity
The Future of Hybrid AppsNative Javascript Candidates
2531696323
11302236002003
479177824243
Popularity numbers are checked on 12/2015
160033495272
4641100/
The Future of Hybrid AppsWhy Are they Special?
Nativescript
Write Once, Run Anywhere• Beta version• Runtime• CommonJS / TypeScript / CSS / XML• Injects native APIs into Javascript VM• 0-Day support for new platform features
ReactJS andReact native
Learn Once, Write Anywhere• Alfa version• UI library (V of MVC)• JSX, JS (Babel)• Virtual DOM, Re-rendering• Components, JS styling, etc..
The Future of Hybrid AppsWhat is next?
Nativescript Angular 2
Higher abstraction layerresulting in a single code base for web and nativeapps
React native
Still in Alpha with no clearroadmap available. To becontinued…
Thank YouQuestions?
ReferencesWebView• Native scrolling in hybrid apps ionic-post• faster iOS hybrid app with cordova wkwebview• 300 ms click delay explained• safari view controller and future of webviews on iOS• Summary of localstorage options in hybrid apps• Developing complex phonegap apps, lessons learned• Things to consider while developing a Phonegap app• Chrome on iOS finally switched to wkwebview• Problems with wkwebview according to chrome dev. Team• Comparison of wkwebview and uiwebview iOS• WKwebView features• Yet Another Framework Syndrome explained• State of hybrid app development tools - TJ Van Toll
References – continuedHybrid Patterns• Your favorite app isn't native• Examples of good hybrid apps• How to pick a front-end framework guide• Web-vs-native-vs-hybrid how to pick in 2015
Future of hybrid apps• Why use Angular 2 on a new project• The core concepts of Angular 2 explained• The three D's of web Development: #1 Declarative vs Imperative• Web components aren't ready for production yet• The new bread of cross platfrom mobile development (native javascript)• What to expect from JS frameworks in 2016• Facebook: Why we build React• Full stack redux tutorial (touches on the complexity of developing with React)
References – continued• Compementary tools for React• Slides on key features of react• Thoughts on the future of app development• FAQs TabrisJS