At Meltwater, we are building mobile apps using web technologies. To access platform level APIs, we use the cordova framework, commercially known as PhoneGap. In this post we want to share what we have learned in the last months about the framework and mobile development in general.
First of all: It is fun to build mobile apps with PhoneGap!
You use technologies that you already know as a web developer. Once you have figured out the PhoneGap build and deployment process, you can relatively painlessly get the app onto your device. Doing this for Android is a bit easier than for the iPhone but that is Apple’s fault, not PhoneGap’s!
The stack for mobile application development that has proven the most useful for us so far is:
- PhoneGap
- AngularJS
- Sass + Compass
- grunt (automating tasks)
- bower (library management)
- npm (package management)
- karma (testing)
Useful Tools
We use TestFlight to distribute development builds of the app to the devices of our testers. This is especially useful when comparing and testing multiple different versions of the same app.
For error monitoring we are evaluating qbaka. Tracing the errors back to the correct place in the source code isn’t always easy but at least it is a start. Recommendations on better tools for this purpose are very welcome.
Our App: Meltwater Buzz (Mobile)
The first app that we have built using the stack outlined above is the mobile version of Meltwater Buzz. In simple terms it is phone client for the desktop version of this service, and only paying customers can use the app - therefore we cannot link to a free demo version here unfortunately. The app is now live in both the App Store, and Google Play.
Early Lessons Learned
Follow the framework update flow! Cordova/PhoneGap pushes out new releases quite frequently e.g. we upgraded from 2.x to 3.0 within a couple of months, and now 3.3.0 is around the corner. Consider the time that these upgrades take, when planning the release schedule of your own app.
Emulators are not enough for testing! You can test you app in your browser and in emulators as much as you want. Even after you think you are completely bug free, you still need to test on real devices. Due to the abundance of Android versions and devices, this can be time intensive, especially if you need to support the 2.x major branch of Android, that still about 25% of all users are on. Plan sufficient time for the hardware testing phase!
Be worried about performance! Make sure that you test out critical pieces of your application, keeping a keen eye on performance. Test how different browser on different devices render your app, and if the performance is what you need. Don’t throw JavaScript libraries at your app for minor UI/UX improvements: Be aware of the potential performance penalties of adding more and more libraries. The presentation Top 10 Performance Techniques for PhoneGap Applications by @ccoenraets gives a good introduction to this topic.
Topics of Interest
Other topics that we are taking an interest in and might be blogging about in the future are:
- How to do quality assurance for mobile apps?
- App Store deployment: What works, what does not.
- Performance improvements (Measure, then tweak.)
- Handling DB migrations in PhoneGap
- Automated build process for PhoneGap app (other than Adobe PhoneGap Build)
- ORM-like functionality in JavaScript
- Logging frameworks
- Error monitoring on mobile devices
The whole ecosystem of hybrid mobile app development is still young, so new tools that tackle individual pain points in the development process are popping up frequently. Therefore an active exchange between developers is crucial for establishing great toolchains. This is why we wrote this post, and will be writing about PhoneGap in the future.
If you have any questions about our stack, the tools above, or if you want to suggest new tools and processes that you have used successfully in your mobile development process, please leave a comment below.