Hybrid Development,
a complete fail ?

The promise of developing easily and once your app among all the platforms isn’t a success

Yacine Rezgui
Dev Rocket

--

We have to admit it. Mobile HTML5 development is not great. I already wrote an article to help people understand it and precisely one year after, here I am, still doubting of it.

Don’t get me wrong, I’m not a Mobile HTML5 hater. I even created from scratch an app in my previous job and it’s still the project that I’m the proudest of:

Made with Cordova, Angular & Ionic Framework

Let’s have a look deeper on Cordova:

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

Cordova on the paper looks great! Nevertheless honestly, the path of an idea to a real app is hell. Let me tell you why.

Looking-glass, who is fairest UI?

Please, don’t use one of the UI frameworks mentioned in the quote. Your app will look like iOS 1.0 or Android 2.x (read my article about them).

Adobe TopCoat is as complete as a car without an engine. It just focuses on form elements. In which world will you make a complete app with that ?

Screenshot taken from TopCoat documentation

Ratchet, like his brother Bootstrap, is only good for websites. It’s not made for apps where user interactions are the main purpose.

Screenshot taken from Ratchet examples

Building Blocks (Firefox OS default style) is a really promising project. They didn’t just make components. They detailed all the good/bad interactions, patterns, gestures, etc. I’m not fond of the integration within MDN (the previously dedicated website was better) and some UI components are really painful to implement (damn you DatePicker !).

I made a Buffer client for Firefox OS but 90% most of the code is good any browsers. Source code here: https://github.com/yrezgui/buffer-firefoxos

Buffer client app for Firefox OS made with Building Blocks

Polymer was one of the best surprises that I got in 2014. A lot of UI components which are as much good-looking (material design) as animations smooth but I got three problems with it. Animations are smooth only on Desktop. Shadow DOM support is poor everywhere except modern Firefox and Chrome (the polyfill doesn’t support it as well as the real API). Finally, the data binding is quite messy and hard to understand.

I made a Dropbox file tree viewer. Source code here: https://github.com/yrezgui/dropbox-polymer-demo

Dropbox file tree viewer made with Polymer

Onsen UI and Ionic Framework (I built my app with it) are the best so far. The developers behind really work hard on making their UIs looking the same as the native ones. From the components to the animations passing by gestures. But it’s facing the limits of Mobile HTML5 (yes, even with collection-repeat, I was crashing my app) in terms of rendering. You should watch the talk of Sebastian Markbåge about DOM as a Second-class Citizen.

https://twitter.com/wilsonpage/status/608319998818459649

This article is reflecting my personal opinion as a Front End developer creating mobile apps. I’m still blaming the mobile vendors for not providing us a Bootstrap-like for HTML based apps. Google just announced in July, Material Design lite: https://github.com/google/material-design-lite

Adobe work on Cordova/Phonegap is amazing, but sometimes it’s not just question of code. The ecosystem is still poor:

  • Not a lot of plugins and most of them are not maintained
  • Documentation is not complete. Some parts are documented in previous versions but not new ones
  • Cordova, Phonegap…When will we stop using these two names ? Really confusing
  • “How to test, deploy, avoid getting rejected from the stores”, these subjects should be documented and telling me to have a look to iOS and Android documentation isn’t helpful

There are other alternatives for native developers as Xamarin and Corona although both of them are proprietary solutions linked to a subscription and obviously not made for Front End developers. Not an option for me.

However everything is dark for Front End to develop for mobile. Two recent projects are really interesting that I’m going to write about them soon: NativeScript and React Native.

They are not based on HTML5 but they offer the same Developer Experience (DX, a word you are going to see more and more) as Cordova while fulfilling the promise of having a native experience for our users. Future is bright my friends, let’s embrace it :)

--

--

Yacine Rezgui
Dev Rocket

🇫🇷🇹🇳 Developer Relations Engineer 🥑 on Android working on privacy @Google in London. Hacking projects on free time