Hybrid app development is complicated

The other day I read on Hacker News something like:

I wanted to get into Web Development. Is it really that ugly, hard, and annoying?

I thought: What’s the problem? It ain’t that bad, but to be honest, it really is quite difficult.

Web development in 2016 means: Doing a lot of JavaScript. Setting up your JavaScript stack takes time and knowledge and sure, you can get away with a bit of jQuery and Vanilla JS.

Since I decided to make the new version of my app entirely hybrid, I’m intrigued by Ionic 2, Angular 2 and TypeScript.

Sure, you can punch out a stupid small app in no time with Ionic 2, but something with a bit more complexity requires a few more brain cycles. Obviously, my new app has to be maintainable, needs sync across devices, I want a web UI in addition to the mobile apps and all of a sudden, I find myself in the same mess as the guy who asked on Hacker News.

Doing a hybrid mobile app in 2016 means to learn:

  • Ionic 2
  • Angular 2
  • PouchDB + CouchDB for sync (at least, once this is setup, you get sync for free) and keep an eye on security
  • Node, Webpack, npm, Express (for a small Auth server)
  • TypeScript
  • that new IDE that supports TypeScript better than the old one
  • Git (I used SVN before)

So, while you can pick up each technology relatively quickly if you’re not entirely new to programming, the most frustrating part is learning how to glue everything together.

Here are a few learnings.

Ionic 2 + Angular 2

Obviously, Ionic 2 is tightly bound to Angular 2. If you’d rather use Vue.js, you can’t.

  • Ionic 2 is for mobile apps only. It’s not for web apps, because they look like mobile apps in the browser.
  • You should make as much code as possible Ionic 2-agnostic:
    • Create Angular 2 components, not Ionic 2 components.
    • Put as much code as possible in vanilla TypeScript services, models, objects, whatever
  • You won’t get the web app for free on top of your Ionic 2 app. You need to recreate it as an Angular 2 single-page app.

PouchDB + CouchDB

PouchDB and CouchDB don’t seem to be too hard, although having used relational databases only so far, NoSQL is entirely new. It took quite some time to wrap my head around the basic idea of NoSQL:

  • Make smaller docs and dump everything flat in the database. This is different from Firebase.
  • I won’t use Firebase, because Google products seem to have extremely shitty support and I’m not willing to take this business risk.
  • For multiple users, create multiple databases.
  • You still need some kind of central database for Authentication.
  • Since we shouldn’t trust user input, we can’t simply replicate the local PouchDB to the remote CouchDB. There needs to be some security or business logic on the server.

Getting Data from the Database

The toughest part for me is still: How to get data out of PouchDB and turn the received docs into JavaScript objects that map to my business logic?

The problem is: Most tutorials are helpful for simple apps only. Some kind of TODO-list app with no real data model and no business logic.

To make the app more maintainable, sooner or later, you discover Observers and Events. This means you can add another set of technologies to your stack:

  • RxJS
  • Promises

To sum it up: there are at least 10 things to learn with documentation that spans hundreds of pages in total and thousands of small little things to know. Unresolved bugs, issues, quirks.

I’m sure I’ll eventually get my app done, but right now, I have these days where I’m sitting in front of my computer for hours and just feel stunned. I don’t even know where to get started. I want to slice the problem down into it’s smallest components and steps, but this won’t work, if you have to make fundamental decisions about your architecture in the first place.

Then make a simpler app first and learn the tech might be a good approach.

I know, all of this tech exists to solve actual problems. If I don’t have these problems, I don’t need the tech. But I do have a very real problem:

I want to make a hybrid app and Ionic 2 seems to be the only good option. Since I decided for Ionic 2, the devs made a few choices for me and I need to go along that path.

Reducing the complexity isn’t linear, but happens in steps. If I up the ante only slightly (say, I want to explore PouchDB), I’m in for all the stuff that comes along with it.

Anyways, if you feel overwhelmed by all the JS stuff out there: You’re not alone. This is all I wanted to say.

Update 19.11.2016: An article on Smashing Magazine is about the very same problem and nails it: Not An Imposter: Fighting Front-End Fatigue