Fitwatchr - Architecture Overview

Throughout the entire year I’ve been focusing heavily on web development, especially JavaScript.  When I decided to create another mobile app a few months ago, building it with web technologies made sense!  Here’s a breakdown of the tech used to build Fitwatchr:

• HTML5, CSS3 - The entire app is a web based SPA (single page application). The only HTML consists of one main file, with divs for each tab.
• Knockout.js - for easy control of dynamic HTML views
• QUnit - for unit testing and practicing a TDD development approach.
• KendoUI Mobile - An absolutely amazing HTML5 framework.  This is the real bread and butter, which gives you the ability to give your app a native looking experience.  This allowed me to focus on the core functionality of the app and not the design as much.
• PhoneGap Build - PhoneGap is an open source framework used to build native apps that are written in HTML5 and JavaScript.  PhoneGap Build is a cloud-based service by Adobe that allows you to upload your code and have it create the finished apps for you.  This was crucial for building both the Android and the iPhone/iPad version of Fitwatchr using one unified codebase.
• PhoneGap Build plugins - On the occasion that there is some common functionality not available to you via PhoneGap, you can leverage community-submitted plugins (Java or Objective C native code that exposes JavaScript endpoints).  I used ChildBrowser for the browser window that opens up during the Fitbit authentication process.

Initial thoughts on these design decisions:

I’m very happy with the decision to build an HTML5-based app.  I built the app in about 3 months, spending hardly any dedicated time, saving me many months that would have been required if I had tried to write it in both Android and Objective C (not to mention the UI headaches!).  I can definitely recommend the PhoneGap route for a lot of different app types, as JavaScript processing speed keeps increasing with each new generation of mobile devices.  Additionally, prototyping an app idea before deciding to fully invest in it is much faster with web tech, as any initial build doesn’t even have to run on a phone - a browser works just fine!