UPDATE: I have made the listagram source publically available for anyone who is interested.
If you have a billion dollar company, or very specific needs, then it may make sense to develop native mobile applications for multiple platforms. For everyone else it is hard to argue against the practicality of portable html-based applications. Such has been my uneducated opinion for some time. To prove that multi-platform web apps are a viable option I decided to build one.
The Story So Far
I travel home from work on the train. While making my way home it is not unusual for my wife to send me a list of groceries for me to pickup. I found that an SMS as a shopping list does not provide a good user experience. It is too hard to see the items and to keep track of which items remain.
Listagram
The app that I built is called Listagram. It provides two features:
- Send a list of items, to yourself or to someone else
- Receive a list, view the items and complete the items as required
Technical
Client
I built the app entirely as a standalone web application. It was nice to be able to develop without resorting to testing on a mobile device or emulator. I used chrome and its wonderful developer tools.
The client-side and server-side code is all written as commonjs modules and packaged for client-side use with browserify. The language I used is CoffeeScript, which browserify takes care of compiling.
For a client-side UI framework I used stativus. Stativus is a UI statechart very good for treating UI changes as state transition. This is helpful for preventing memory leaks and provided an interesting contract to backbone - the framework that I have most experience with.
The UI templates are rendered using underscore’s template function. To precompile the UI templates and merge them into a single file I wrote a node.js module called underscorec. Underscorec can read a directory structure of templates and compile it.
Client-side storage is provided by localStorage.
Usage is:
underscorec views/ output.js
where views/ is a directory structure containing templates. The templates can then be used be calling a function with a name matching the name of the compiled template:
templates[home/index]({name: 'Peter', age: 27})
Server
The server is written as a node.js application. The web framework is express and the data is stored in couchdb.
Server Deployment
The services that drive the app are deployed to a vps via an ssh script and git. I use forever to start the node.js app as a service.
Client Deployment
The client is packaged as a multi-platform mobile application using phonegap. I used the online service Phonegap Build to create my app packages for each mobile platform.
Final Thoughts
The experience turned out to be more work than I anticipated but it did confirm my suspicion that the cross-platform mobile solution is viable for most requirements.