Mobile Apps for Publishers – Native, Web or Hybrid?

Apps feel like a ambiguous topic to most Publishers. They serve the most loyal users but with a high price ticket and a lack of flexibility. So what about “Hybrid” apps?

When we started working on the Relaunch of the leading german people news portal BUNTE.de, our apps have been put to the test as well. In this post I will cover a few aspects, why we’ve picked React Native as new mobile app platform.

And here are some screenshots of the current beta (iOS): Home – Article – Embeds – Video SDK/Ads. Please note that we did not change the UI of the app in the first release as we focused on the rewrite itself.

BUNTE.de App Home

BUNTE.de App Article

BUNTE.de App Embed

BUNTE.de App Ads

The Android Beta can already be downloaded here.

 

The core use cases will define the platform

The platform discussion started with a simple but far-reaching question:

Is is still worth the money and effort to have a native app, or is a Web Container App just about good enough?

To answer this question we did quite some research and prototypes to evaluate our core use cases in addition to compelling technical comparisons out there.

To give you a few examples of core stories:

As a regular BUNTE.de visitor and I want to have quick & easy access to my favourite source of celebrity and gossip news. The app should be fast, simple and well designed.

As a product owner, I want my app to drive the user’s stickiness, generate substantial ad revenues and keep the initial and ongoing costs at a low level.

As a developer, I want to maintain an app that’s sharing the common stack of BUNTE.de and feels like a native app to provide the best experience.

“Real” Native apps perform best – but what about alternatives?

The outcome of our tests and prototypes was pretty clear – native apps rock when it comes to performance, look and feel. They suck when it comes to flexibility (e.g. embeds) and cause a high level of maintenance. Pure Web Container Apps are very flexible but performance quickly becomes a pain (we even tried Google’s AMP as rendering format) and it just feels not right.

And then there is a third option – Hybrid Apps or platforms compiling JS to native code.

Hybrid: How to gain flexibility and keep the native touch

Hybrid apps are a mix of native and web elements. A tab bar and video player might be a native, UX optimized component but an embed or simple text is rendered using Webviews. Popular frameworks include Titanium (which is a rather cluttered platform), Apache Cordova and the newest kid on the street – Facebook’s React Native.

Facebook’s React Native – the holy grail?

This framework is pretty new but very well designed and – most important – the apps really feel like native regarding the look & feel and performance – simply because they are native!

“Hybrid” as we define it, reflects the mix of React Native and WebViews rendering certain portions of the content.

And this is the Facebook’s definition: With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that’s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Of course we had some troubles along the way, especially with the integration of Native SDKs but still the overall experience is really neat.

reactive-nativingitup-png-800x600_q96

So why did we go for React Native?

  • Perfect match with our core use cases
    We’re looking for an maintainable way to build apps without the overhead and dedicated resources needed for native apps. Performance is critical but it’s no deal breaker to have slightest delays for some operations.
  • Common code base for both apps
    Easier maintenance, feature consistency among all platforms.
  • Shared Stack Know-How
    The Stack is related to our other environments (JS, CSS) so it feels like home to developers and we can share resources.
  • Native UI/UX
    Platform consistency for a native touch. Just compare scrolling content in a WebContainer app or in ReactNative (60 FPS) – the difference is amazing. Think of Hybrid on steroids.
  • State of the art technology
    Emerging and fast growing technology
  • Extensibility & Flexibility
    Support for native SDKs (e.g. Video Player or Google Tag Manager). We could even migrate crucial parts to our own native components and use JS as controller only.

So is it really the holy grail? In many ways React Native is different from the previous approaches. Facebook is releasing a new version on a monthly basis and the usage in Apps like Facebook Groups, Ad Manager and the “big” FB app is putting the spotlight on this technology. Quite a number of issues still have to be fixed (e.g. interaction with native SDKs, performance tweaks) but – again – it’s incredible given the fact React Native is still at 0.29 when writing this post.


TL;DR

For Publishers with a JSON API and enriched article content, hybrid Apps build with e.g. ReactNative are definitely the recommended way to both provide an outstanding user experience and keep the maintenance/development costs low and the technology stack clean.

Image licence/source (CC)