Userful tools and workflow tips for building mobile apps in HTML, CSS and Javascript

Published on Sep 15, 2014

Recently I released a small app called "Stempeltje" that gives store and restaurant owners an easy way to give their clients a digital loyalty card. That way, customers can save up points and exchange those points for free (you know, buy 10 coffees, get one free).

As always, building the app started as just a simple idea but ended up taking up way more time and effort than initially estimated. In this post I'd just like to share some tips and tools that I used to get the app out there. I hope some of these links are useful to you. If you have some other tools I should get to know, let me know in the comments!

sketch + sketch mirror

First, I started drawing out the screens, a logo and the general look and feel of the application. I used to be an avid Photoshop user but since I started using Sketch for UI work, I only opened Photoshop for moronic stuff like resizing images. To me, Sketch is really the vector tool I've missed all my life. I never really enjoyed working with Illustrator and avoided it like the plague but Sketch is different.

This is no doubt a very personal choice and if you like working in Illustrator or any other tool for that matter, go for it! If you're like me and don't really feel much love for Illustrator, grab Sketch, open up Sketch Mirror on your iPhone or iPad and mirror your designs in realtime on your device. Sweet shit.

Sketch for UI work

ionic framework

Once I had a raw idea of what the UI could look like and what screens needed to be built, it all came down again to what platform I wanted to build the app in. As you might know, there's a couple of strategies you can follow here. Your first choice might be to build an app completely native to your platform of choice. For a solo developer like me, building and maintaining several separate code bases simply isn't viable so I skipped that route from the beginning. Otherwise, I would have to build the app in objective-C or Swift for iOS and then switch to Java and build the app again from scratch for Android.

I've had moderate success in the past building mobile apps with Titanium, where Javascript is your weapon of choice and a native app is rendered from that code. I am a web developer at heart and decided that for this project I wanted to stay as close to typical web development as possible and stumbled upon the ionic framework which at the time of writing is still in beta. Ionic let's you use HTML and CSS components to build your UI combined with Angular.js for your logic. To me, that combination is just perfect for building out web apps that talk to a JSON API.

Ionic builds the app on top of Cordova (used by Phonegap as well). On an iPhone 5 with iOS7, the app comes pretty close to what a native app feels like if you ask me. Sure, it may not be perfect to a lot of people but it sure gets the job done quickly if you are a web developer like me. On top of being a very productive toolkit, the ionic community and forum is booming and I've had nothing but positive experiences with the people that helped me out when I was stuck.

ionic framework

cordova-gen-icon + post build hook

One thing the ionic cli tool doesn't do yet is generate icons automatically. Creating icons in 20 different sizes to accommodate the app store requirements just ain't no fun. I'm sure ionic will catch up quickly to include this in their build process (I submitted a feature request so let's hope for the best). Until then, I just used cordova-icon which you can automatically run after each cordova build. The cordova-icon command generates all the required icons automatically, if you just feed it one high resolution icon image.

node.js + mongoose

The app talks to a JSON-backend for storing users, businesses, stamps and other stuff. This is purely a matter of choice and I picked node.js and mongodb as my backend, mainly because I wanted to get some more node.js and mongodb experience under my belt. You could have built the API just fine in any other backend technology like PHP or RoR of course. Mongoose was used as a wrapper around the mongodb functions to make it easy to talk to the mongoDB database.

Heroku + mongoHQ

Deployment of the backend app is done on Heroku, taking out the pain of hosting the app on your own servers. The MongoDB database is hosted on MongoHQ, which is now compose.io.

Robomongo

Robomongo is an excellent open-source tool for managing your MongoDB databases.

RoboMongo

ikonica

Ikonica is one of those small apps that make it easy to try out icons on your device. I'm not an experienced icon designer and I often find myself creating something that may look good on a big screen but then vanishes when I see a real live version on a small device. Ikonica makes it a lot easier to design something and try it out immediately on your device.

ikonica icon previews

Gulp.js

Gulp.js is a task runner, just like Grunt. I'm a big fan of the way gulp.js works with its easy to use Javascript syntax. I use gulp in a lot of my projects to do things like merge+minify CSS and JS, compressing images and SVG's, run mocha tests, compile SASS to CSS. There's a lot more that you can automate with gulp, but those tasks are no-brainers to me.

Gulp.js

paw 2 / visualJSON

Testing an API can be frustrating but with the right tool, you'll do just fine. VisualJSON (free!) and Paw (paid) are two tools that let you make API calls without having to go through your app. They are both very easy to use, Paw just does the job in a visually more appealing way.

Paw REST Client

Never stop learning

Web developers don't have the luxury to learn a language or craft once and then do the same thing for the rest of their lives. We're constantly learning and experimenting to get better at what we do. Hopefully you find some use for the tools mentioned above. Do you know any other tools I should definitely check out? Please leave a note in the comments and share your wisdom!

No comments? But that’s like a Gin & Tonic without the ice?

I’ve removed the comments but you can shoot me a message on LinkedIn to keep the conversation going.