hybrid app landscape release · 2016-02-04 · js. hybrid app properties native apps hybridapps web...

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