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

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

NO DOM

NO Cross Compilation

JavaSript VM

Native UI/Widgets The Future of Hybrid Apps Native Javascript Candidates

Titanium React Native Nativescript TabrisJS Smartface Announce 2008 2015 2014 2014 2011 d

Version v5.0.1 v0.18 v1.5 v1.5 v4.5.0

Android Android Android Android Android 4.0.x – 6.0.x API 23 4.2.x – 6.0.x / 4.2.x – 6.0.x Platforms iOS iOS iOS iOS iOS 7.1.x – 9.2.x 6.0.x – 9.2.x 7.1.x – 9.2.x / 7.1.x – 9.2.x WP WP (soon) 11302 479 1600 253 464 Popularity 23600 1778 3349 1696 1100 2003 24243 5272 323 /

Popularity numbers are checked on 12/2015 The Future of Hybrid Apps Why Are they Special? Write Once, Run Anywhere • Beta version • Runtime • CommonJS / TypeScript / CSS / XML • Injects native APIs into Javascript VM Nativescript • 0-Day support for new platform features

Learn Once, Write Anywhere • Alfa version • UI library (V of MVC) • JSX, JS (Babel) ReactJS and React native • Virtual DOM, Re-rendering • Components, JS styling, etc.. The Future of Hybrid Apps What is next?

Higher abstraction layer resulting in a single code base for web and native apps Nativescript Angular 2

Still in Alpha with no clear roadmap available. To be continued… React native Thank You

Questions? 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 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) References – continued

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