Hybrid App Landscape
Total Page:16
File Type:pdf, Size:1020Kb
Hybrid App Landscape Ruben Smeets ES&S 03/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… Obj- C#, BB C, C, Android Java VB.NET Java Xcode C++ Visual , etc. Java Studio, Studio Eclipse SDK Plug-In .app .apk .xap .cod App Store Play Store Windows Marketplace BlackBerry App World Separate source code and expertise Releasing same app for each platform is (GUI toolkits, SDKs, etc.) results in time-consuming when resources are Expensive development and scarce maintenance Cross-Platform Development Tools to the Rescue? Web WhichSourceone-code Runtime (VM Web-to-native App toolkits/Framew Translators approach) Wrappers Factories should I choose? orks web, hybrid, Output native native web-app hybrid-app native What about Hybrid apps? Web Source-code Runtime (VM Web-to-native App toolkits/Framew Translators approach) Wrappers Factories orks web, hybrid, Output native native web-app hybrid-app native Combination of web toolkits and Web-to-native wrappers What are Hybrid Apps? • Web code runs inside a thin native wrapper Native Container o Chromeless WebView Web Code • Web portion can be downloaded HTML from the web or packaged within CSS the app (offline availability) JS • Access device features through plugins o JS-to-native bridge Device APIs • Reuse existing web skills Low Ranking Hybrid app properties High Ranking Native apps Hybrid apps Web apps Search on referrals (Facebook, Ease of discovery Through native app stores twitter, etc.) Fragmented across multiple Reach Works on almost all devices platorms Full acces to platform Access to native API at Depth of experience Limited by browser sandbox resources the expense of UI Customer ownership & Apple Appstore enforce Complete ownership of customer terms onerous terms Engagementand Notifications and home No notifications, difficult to get user recurring use screen icon to save the link No accepted method of payment Monetisation potential High through Appstores (Chrome web-store) Ease of cross-platform Replication developing for Significant fragmentationfor development multiple platforms advanced apps Web content updates Upgradebility & updates Through native app stores ** No approval needed require no approval*** Full support by native Browser debugging tools automated Debugging & testing development tools testing tools Small changes require Live-reload, instant reflection of Developing experience recompilation and changes reinstallation Vendor lock-in No code sharing between Limited to no code sharing between (framework) platforms frameworks Multi-platform Local build for each platform Cloud-based build tools No cross-platform building required build support seperately offered by frameworks **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?) VisionMobile Cross-Platform Developer Tools 2012 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 Struggles 2012 – 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 Live Reload, Remote debugging, Memory/FPS profiling, etc… - Scrolling performance iOS8+, Android 4.1+ have native scrolling for WebViews - Touch events latency FastClick libraries, Fixed by browsers* - No GPU hardware acceleration Hardware accelerated CSS, WebGL* LocalStorage, IndexedDB, SQLite, File - Better caching system http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0021.html The Hybrid Landscape Current Struggles Discussed 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 Struggles WebView Fragmentation iOS7 and earlier - UIWebView 4.3 and earlier - webkit 7.x - IE9 8.0 - IE10 iOS8 - WKWebView (Nitro JIT) 4.4 - blink 8.1 - IE11 5.0 and later - blink-updatable iOS9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 9% 5% 9% 18% 33% 31% 75% 36% 77% As measured by the App Store As measured by the Play Store As measured by AdDuplex on January 11, 2016. on January 4, 2016. on December 15, 2015. Fragmentation results in: - Inconsistent feature support http://caniuse.com/ or http://mobilehtml5.org/ - Performance implications JetStream or Speedometer benchmark - Lowest common denominator for legacy support The Hybrid Landscape Current Struggles WebView Fragmentation – continued iOS7 and earlier - UIWebView 4.3 and earlier - webkit 7.x - IE9 8.0 - IE10 iOS8 - WKWebView (Nitro JIT) 4.4 - blink 8.1 - IE11 5.0 and later - blink-updatable iOS9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 9% 5% 9% 18% 33% 31% 75% 36% 77% As measured by the App Store As measured by the Play Store As measured by AdDuplex on January 11, 2016. on January 4, 2016. on December 15, 2015. Custom WebView https://crosswalk-project.org/ The Hybrid Landscape Current Struggles WebView Fragmentation – continued 7.x - IE9 iOS7 and earlier - UIWebView earlier then 4.x - webkit 8.0 - IE10 iOS8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable 8.1 - IE11 iOS9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store As measured by the Play Store As measured by AdDuplex on January 11, 2016. on January 4, 2016. on December 15, 2015. - Distributed as Cordova-plugin - Chromium version 46 (latest stable v17) - Reduces WebView fragmentation Custom WebView - Controlled runtime and upgrade cycle - Larger apk size ±20 MB https://crosswalk-project.org/ The Hybrid Landscape Current Struggles WebView Fragmentation – continued 7.x - IE9 iOS7 and earlier - UIWebView earlier then 4.x - webkit 8.0 - IE10 iOS8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable 8.1 - IE11 iOS9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store As measured by the Play Store As measured by AdDuplex on January 11, 2016. on January 4, 2016. on December 15, 2015. WKWebView (iOS8) problems: - Cannot load local files à messy workaround - Freezing main thread Resulted in the continued - Unwanted scrolling behaviour use of the old UIWebview - etc.. The Hybrid Landscape Current Struggles WebView Fragmentation – continued 7.x - IE9 iOS7 and earlier - UIWebView earlier then 4.x - webkit 8.0 - IE10 iOS8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable 8.1 - IE11 iOS9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store As measured by the Play Store As measured by AdDuplex on January 11, 2016. on January 4, 2016. on December 15, 2015. WKWebView (iOS9): - Fixed local file loading problem - Only available on iOS9, - Cordova-plugin available since Cordova iOS8 still requires iOS 4.0.0 workaround - Safari View Controller The Hybrid Landscape Current Struggles Yet Another Framework Syndrome • 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 http://www.developereconomics.com/search/tools/to/build/ 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 cordova Hybrid App Patterns Pure Blended Mullet Fallback pattern pattern pattern pattern + + Properties • Single webview for • Use native components • Fully native for early • Mostly native app entire screen for the main navigation parts of a user flow UI (e.g. Tab bar) within the app • Uses hybrid webviews • Content & navigation (product browsing) for little used or done in HTML5 • Use multiple webviews frequently changing with content • Web based for later content • Thin native wrapper parts like checkout exposing native APIs • Native transition animations Example Apps • Lokale Politie • Apples’s App store app • Walmart apps • Facebook app Antwerpen app • Google’s Gmail app • Belk apps • Instagram app • Antwerp – Tax • Autosalon 2015 Brussel Native vs Hybrid vs Web – Kinvey & MOOVWEB ebook Hybrid Apps are bigger than cordova Pattern Examples Politie Antwerpen Apple App Store Walmart Facebook Pure Pattern Blended Pattern Mullet Pattern Fallback Pattern (Single Page) (Multi Page) Hybrid Apps are bigger than cordova Takeaways Complex hybrid apps often start out as single-page apps. However, as the complexity increases they transistion to larger native portions (fallback pattern) Native VS Hybrid war is over… Pure hybrid apps serve a different purpose than native apps Good hybrid apps are hard to spot (e.g. Instagram) Agenda • Why cross-platform mobile app development? • What are hybrid apps? • Hybrid app early and current struggles • Hybrid is bigger than