Hybrid Apps Aren’t There Yet

Our experience in trying to take our Android Citizen Reporter app hybrid, sinking a lot of time into it, and finally scrapping all of it.

Photo by Rami Al-zayat on Unsplash

Let’s talk about the dark, unspoken, areas of software development —spending an obscene amount of time migrating your app to a new language or technology only to find out everything just became worse and throwing it all out the window for what was there before.

This post lays out the good, bad, ugly and outright nerve wrecking.

CitizenReporter is an open source Android mobile app for citizen journalists, to help them record video, take photos, and submit audio reports from the field.

The app is fully customizable, so that media networks or civic watchdog organizations can deploy branded versions of the app for their own networks of journalists for citizen reporters (including specialized ‘frontline monitors’ for elections and similar events).

One of the cooler features for newsrooms or civic watchdogs is the ability to set specific news assignments for field reporters and have them securely submit reports back. All this while protecting the metadata needed for journalistic verification.

What are hybrid apps?

A hybrid app consists of a HTML5 web app within a native ‘wrapper.’ This is a mobile app written using HTML5, CSS3 and JavaScript, and then compiled into native iOS, Android or other mobile platform using wrapper technologies such as PhoneGap or Cordova.

These apps can then be easily deployed across multiple platforms and is usually the cheaper and faster solution to build a mobile app. Some popular hybrid app frameworks include React Native, Ionic, PhoneGap/Apache Cordova and Sencha Touch.

The Good: Killing two (or more) birds with one stone

The major reason for opting to go hybrid was to have a single codebase and UI that could run on multiple devices. Ionic brags of having the capacity to run on iOS, Android, Windows Phone and Blackberry 10. This was a solid push considering some of Newsroom partners were more inclined towards CitizenReporter for iOS.

Ionic is a great framework and being able to use frameworks like angular 2 or 4 (using Typescript), which is embedded in ionic by default makes the development experience up there with the best.

Ionic comes with a bunch of default JavaScript components and CSS components that cover most of the basic things you would want to build into a mobile application like buttons, forms, alerts, prompts and navigation all with first class documentation

Ionic Lab

Debugging was the best experience for me by far, with features ‘live’ reloading as you make changes to the code combined with the emulation portion of the Chrome Developer Tools but that’s not all, Ionic also packs a feature (Ionic lab) that lets you see what your application would look like on multiple device platforms at the same time side by side. Super cool!!!!

One of the other things I loved about Ionic is that I could build stuff really fast, and when I say fast I mean it. I was able to build the layout, and basic functionality of the CitizenReporter like navigation in a few hours. But everything changed when I had to integrate some native functionality. CitizenReporter is very media centred and its core functionality is based on the camera, voice recorder and location features of mobile devices.

The Bad, Ugly and Everything In-Between:

“Our Biggest Mistake Was Betting Too Much On HTML5” — Mark Zuckerberg, 2012
I think the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native. We just were never able to get the quality we wanted (from the HTML5 apps we were building). We burned two years. That’s really painful.

We went into this with eyes wide open. Mark Zuckerberg publicly decried hybrid apps, but we said “that was 5 years ago… things have surely changed..”

They have not.

Ionic packs a plethora of native plugins most of them open source that can do anything from fingerprint recognition/touchID to power management but as is with most open source projects with a few contributors, they aren’t updated as regularly as they could be. I don’t know if it was just bad luck, but the plugins that I specifically needed to use for CitizenReporter were marked Beta by Ionic and no longer maintained by their owners. I came to a decision to developing our own plugins, this was a huge undertaking that would require building a plugin with support for all the platforms we were building for.

In the end, the CitizenReporter MVP did not have the smoothness of its native counterpart, especially on mid-range Android phones. To be fair, the app could get away with it on the latest devices (barely any difference), but as soon as we had to load a really long list with images, you would feel a sluggishness.

So where exactly does this leave you?

There’s no absolute answer, it depends on your use-case. This will in the end determine the complexity of the application you’re building.

Also, the reality is that the learning curve for any of the hybrid frameworks is gentle compared to any of the native languages.

Now the bitter truth for hybrid proponents who think/thought(me inclusive) that frameworks like Ionic, React Native, and others will one day reach the performance of their native counterparts, sad to say that this might probably never happen and is probably delusional on our end despite the claims of same day integration of new native features into their frameworks.