Mobile App Dev Details

I'm in the process of wrapping up a re-write of the truxie food-truck location app. I figured this would be a good time to share some of the components that are used to make it all go.

Server Side

The previous version of truxie was running off 2 Rackspace boxes running Debian. One box was for node and mongodb, while the other box was for postgresql. Two boxes means $40/month for is at this point either a hobby app or a vainity app. Unsustainable.

The reason for the postgresql box was so that we could have a running tally of geo-indexed tweets. That way, users in one area would only see tweets from trucks based in their area.

Mongodb's geo-indexing had improved enough that I figured we could get by on a single server. While Rackspace was an excellent hosting service (and did in-place backups which were awesome), I decided to go to Digital Ocean and jam it all onto one of their thrifty $5/month instances. We'll stay there unless and until we find some kind of revenue stream.

Server side APIs are all in Node.js. The initial version was written using the Express framework. We're in the midst of creating a new API using Hapi. I've been quite pleased with Hapi so far, having used it on some professional dev projects.

We use pm2 to keep all of the processes running (such as our twitter live feed processor and google calendar sync).

All in all, the server side picture is pretty clear. Oh, to only have to write server side api code. Data in, data out, never a rendering to be concerned with.

Alas, full stack means full stack.

Client Side (aka The App)

Step 1 in building a cross platform mobile app is to choose a platform.

Step 2 is regretting step one until you repeat it.

The first version of truxie was written in Sencha in 2012. It is an HTML5 framework that had a complex structure and complicated build process. I found it to be so difficult to develop in that I wasn't able to add the kinds of features I wanted to in any timely fashion. It was my first experience with a javascript framework.

In order to get it to install on a phone, the app was packaged using Cordova. I can say that working with Eclipse, Cordova and Sencha was one of the worst build processes I've ever had to deal with.

Fast forward to a few months ago - I had just started with Xamarin development. Xamarin is a C# framework that compiles down to native code. I tried translating truxie into Xamarin Forms - No dice. My ability to create new screens was greatly complicated, and there was no strong support for socket.io.

I stuck with Xamarin for a while out of sheer will to avoid using Cordova again. I was even considering using Xamarin as a container for a mostly HTML5 app. I finally hit the wall with Xamarin. It is an applicable framework for certain sets of problems, but not this one.

I had done some apps in Angular in the last year, so once I found the Angular Material framework I was hooked. It has a fresh look and most of the components needed to make a good looking UI.

Just choosing a framework isn't enough - There are all kinds of other components that come into play. Here are some of the ones that made life slightly easier:

  • http://iconmonstr.com/ - great open source icons. They sell t-shirts that read 'iconmonstr saves your ass everyday'. Not sure that everyday is a word. Irregardless, they speak the truth.

  • http://gulpjs.com/ - javascript task runner. After trying to learn grunt 3x, I took a look at gulp. So great, so fast, with more capilities than I can fathom. Builds our icon fonts, compresses our html templates, minifies the js.

  • https://crosswalk-project.org/ - HTML5 on Android is always a crapshoot - Who knows what browser the phone vendor has installed? Crosswalk addresses this by installing its own browser. The resulting app is a bit larger, but should run a lot more consistently across Android platforms.

  • https://cordova.apache.org/ - Yes, even Cordova deserves a mention. V5 and using solely the command line interface (no Eclipse at all) wasn't so painful after all. Who knows - We may even add in some camera functions.

  • https://klarsys.github.io/angular-material-icons/ and https://github.com/alexk111/SVG-Morpheus - Cool spinny morphy icons. May be the only thing you notice about the new version. Delightful to kids and adults.