Hybrid App Landscape. Ruben Smeets ES&S 03/02/2016

Transcription

1 Hybrid App Landscape Ruben Smeets ES&S 03/02/2016

2 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

3 Native app development is expensive Xcode Obj- C, C, C++ Android Studio, SDK Java Visual Studio C#, VB.NET, etc. BB Java Eclipse Plug-In Java.app.apk.xap.cod App Store Play Store Windows Marketplace BlackBerry App World 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

4 Cross-Platform Development Tools to the Rescue? Which Source-code one shouldtranslators I choose? Runtime (VM approach) Web toolkits/framew orks Web-to-native Wrappers App Factories Output native native web-app hybrid-app web, hybrid, native

5 What about Hybrid apps? Source-code Translators Runtime (VM approach) Web toolkits/framew orks Web-to-native Wrappers App Factories Output native native web-app hybrid-app web, hybrid, native Combination of web toolkits and Web-to-native wrappers

6 What are Hybrid Apps? Native Container Web Code HTML CSS JS Device APIs Web code runs inside a thin native wrapper o Chromeless WebView Web portion can be downloaded from the web or packaged within the app (offline availability) Access device features through plugins o JS-to-native bridge Reuse existing web skills

7 Hybrid app properties Low Ranking High Ranking Native 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 Engagementand recurring use Monetisation potential Ease of cross-platform development Apple Appstore enforce onerous terms Notifications and home screen icon High through Appstores Replication developing for multiple platforms Upgradebility & updates Through native app stores ** Debugging & testing Developing experience Vendor lock-in (framework) Multi-platform build support Full support by native development tools Small changes require recompilation and reinstallation No code sharing between platforms Local build for each platform seperately Web content updates require no approval*** Cloud-based build tools offered by frameworks Complete ownership of customer No notifications, difficult to get user to save the link No accepted method of payment (Chrome web-store) Significant fragmentationfor advanced apps No approval needed Browser debugging tools automated testing tools Live-reload, instant reflection of changes Limited to no code sharing between frameworks No cross-platform building required **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

8 Hybrid App Example (Single-Page-App) Antwerp Tax app

10 The Hybrid Landscape Early Struggles 2012 Mark Zuckerberg: as The biggest mistake that we made, as a company, is betting too much on HTML5 opposed to native The deal breakers: - The lack of tooling - Scrolling performance - Touch events latency - No GPU hardware acceleration Live Reload, Remote debugging, Memory/FPS profiling, etc ios8+, Android 4.1+ have native scrolling for WebViews FastClick libraries, Fixed by browsers* Hardware accelerated CSS, WebGL* - Better caching LocalStorage, IndexedDB, SQLite, File system

11 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

12 The Hybrid Landscape Current Struggles WebView Fragmentation ios7 and earlier - UIWebView 4.3 and earlier - webkit 7.x - IE blink IE10 ios8 - WKWebView (Nitro JIT) IE 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 on January 11, As measured by the Play Store on January 4, As measured by AdDuplex on December 15, Fragmentation results in: - Inconsistent feature support - Performance implications - Lowest common denominator for legacy support or JetStream or Speedometer benchmark

13 The Hybrid Landscape Current Struggles WebView Fragmentation continued ios7 and earlier - UIWebView 4.3 and earlier - webkit 7.x - IE IE10 ios8 - WKWebView (Nitro JIT) blink IE 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 on January 11, As measured by the Play Store on January 4, As measured by AdDuplex on December 15, Custom WebView

14 The Hybrid Landscape Current Struggles WebView Fragmentation continued ios7 and earlier - UIWebView 7.x - IE9 earlier then 4.x - webkit IE10 ios8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable IE11 ios9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store on January 11, As measured by the Play Store on January 4, As measured by AdDuplex on December 15, 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

15 The Hybrid Landscape Current Struggles WebView Fragmentation continued ios7 and earlier - UIWebView 7.x - IE9 earlier then 4.x - webkit IE10 ios8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable IE11 ios9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store on January 11, As measured by the Play Store on January 4, As measured by AdDuplex on December 15, WKWebView (ios8) problems: - Cannot load local files à messy workaround - Freezing main thread - Unwanted scrolling behaviour - etc.. Resulted in the continued use of the old UIWebview

16 The Hybrid Landscape Current Struggles WebView Fragmentation continued ios7 and earlier - UIWebView 7.x - IE9 earlier then 4.x - webkit IE10 ios8 - WKWebView (Nitro JIT) 4.x and later - blink-updatable IE11 ios9 - WKWebView (Nitro JIT) 10 - Edge (Chakra) 7% 3% 9% 5% 9% 18% 75% 97% 77% As measured by the App Store on January 11, As measured by the Play Store on January 4, As measured by AdDuplex on December 15, WKWebView (ios9): - Fixed local file loading problem - Cordova-plugin available since Cordova ios Only available on ios9, ios8 still requires workaround - Safari View Controller

17 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

19 Hybrid Apps are bigger than cordova Hybrid App Patterns Pure pattern Blended pattern Mullet pattern Fallback pattern + + Properties Single webview for entire screen Content & navigation done in HTML5 Thin native wrapper exposing native APIs Use native components for the main navigation UI (e.g. Tab bar) Use multiple webviews with content Native transition animations Fully native for early parts of a user flow within the app (product browsing) Web based for later parts like checkout Mostly native app Uses hybrid webviews for little used or frequently changing content 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 Native vs Hybrid vs Web Kinvey & MOOVWEB ebook

20 Hybrid Apps are bigger than cordova Pattern Examples Politie Antwerpen Pure Pattern (Single Page) Apple App Store Blended Pattern (Multi Page) Walmart Mullet Pattern Facebook Fallback Pattern

21 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)

23 The Future of Hybrid Apps Native Javascript? NO DOM NO Cross Compilation JavaSript VM Native UI/Widgets

24 The Future of Hybrid Apps Native Javascript Candidates Announce d Titanium React Native Nativescript TabrisJS Smartface Version v5.0.1 v0.18 v1.5 v1.5 v4.5.0 Platforms Android 4.0.x 6.0.x ios 7.1.x 9.2.x WP Android API 23 ios 6.0.x 9.2.x Android 4.2.x 6.0.x ios 7.1.x 9.2.x WP (soon) Android / ios / Android 4.2.x 6.0.x ios 7.1.x 9.2.x Popularity / Popularity numbers are checked on 12/2015

25 The Future of Hybrid Apps Why 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 and React native Learn Once, Write Anywhere Alfa version UI library (V of MVC) JSX, JS (Babel) Virtual DOM, Re-rendering Components, JS styling, etc..

26 The Future of Hybrid Apps What is next? Nativescript Angular 2 Higher abstraction layer resulting in a single code base for web and native apps React native Still in Alpha with no clear roadmap available. To be continued

27 Thank You Questions?

28 References WebView 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

29 References continued Hybrid 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)

30 References continued Compementary tools for React Slides on key features of react Thoughts on the future of app development FAQs TabrisJS