I recently published a post on the lessons I learned from 3 years of HTML5 mobile app development, and during that time I’ve also discovered many tools and services that have helped me throughout various phases of the development process. There’s a few tools in here that are specific to iOS development on a Windows computer, which poses its own challenges, but is certainly possible.
This article will summarise the most useful tools and services that I use, some of which I make use of almost every day and others which just solve really annoying problems that pop up every now and then. I’m going to leave out the HTML5 mobile frameworks themselves from this list (but for anyone wondering, I primarily use Ionic and Sencha Touch, with a little Phaser thrown in for game development).
1. PhoneGap Build
PhoneGap Build is the single most critical tool for me, without it I may have never even started developing mobile applications. PhoneGap Build allows you to create hybrid mobile applications by compiling a PhoneGap application on their cloud service, rather than having to have the native SDK’s installed on your computer (which is required for a standalone version of PhoneGap / Cordova).
As far as I’m aware, it is literally the only way to build iOS applications if you do not have a Mac. When I first started developing mobile applications I didn’t have a Mac, and I probably could not have afforded one at the time either. PhoneGap Build allowed me to start developing both iOS and Android applications with the tools I already had. To this day I still use PhoneGap Build in my projects and it just keeps getting better.
My free eBook is a great resource for anybody who wants to learn more about PhoneGap Build.
2. GapDebug
GapDebug is another tool that is critical to my development process. It’s easy to debug HTML5 mobile applications on a desktop computer because you can just use the browser and Chrome Dev Tools (or the debugging tools of whatever browser you are using).
It’s a different story when you install your application on a device though, you no longer have access to those debugging tools. GapDebug essentially gives you those browser debugging tools back whilst your app is installed on a device. You can debug on your computer whilst the application is running live on your device.
It also makes installing your application SUPER simple. Rather than having to install and sync iOS applications through the clunky iTunes program, you can simply drag and drop into GapDebug whilst your device is attached to your computer.
3. OpenSSL
It took me so long to figure out how to create certificates, provisioning profiles and so on for iOS until I discovered OpenSSL. OpenSSL will allow you to generate a certificate signing request for creating your iOS developer or distribution certificate and can create the .p12 personal information file required for signing your application… WITHOUT A MAC.
OpenSSL, like PhoneGap Build, is a critical tool that will allow you to build iOS applications from a Windows machine (or other operating systems).
4. BitBucket
Many people are familiar with Git and GitHub. This advice isn’t specific to HTML5 mobile app development, but if you aren’t already using some kind of version control for your projects I would highly recommend learning the basics of Git.
Git can be used with a service like GitHub or BitBucket where you can store your repositories. Like many others I used GitHub until I found BitBucket, which is essentially the same thing except free (even with multiple private repositories and team members). So if you’re not using either, checkout BitBucket, and if you’re already using GitHub… check out BitBucket.
5. Macincloud
This is the end of the “critical” tools and services that I use, and it bothers me that this has to be on the list. The final hurdle of submitting an iOS application to the Apple App Store from a non-Mac computer is uploading your .ipa file to iTunes Connect. To do this you will need to use Application Loader, which is a program that is… only available on Macs.
This means that you literally need to use a Mac for about 5 minutes. If you can’t jump on a friends Mac quickly to use Application Loader then you can use Macincloud. Macincloud allows you to rent a virtual Mac machine and connect to it remotely. The service isn’t great (it’s pretty slow and painful) but if you buy prepaid credit it’s pretty cheap and it will last you forever.
6. IcoMoon
A lot of HTML5 mobile frameworks (most UI frameworks in general) use a font set for icons. It’s much more lightweight to use a font than individual images or even a sprite sheet for all the icons within your application.
Frameworks like Sencha Touch and Ionic come with a set of icons by default that you can use, but sometimes the default icons won’t hit the spot.
IcoMoon let’s you pick out icons from a massive library and create your own customised icon pack that you can then include in your application.
7. The Ionic ‘resources’ Tool
This is probably my favourite discovery. I’ve always despised having to create all the necessary icons and splash screen sizes for iOS and Android (seriously, there’s over 40 splash screens and icons you need to create).
Before I discovered the Ionic resources tool creating icons and splash screens was a long process in Photoshop, now I can generate all the files I need in a few minutes. Rather than having to create files individually for each size, I create a single 192 x 192 icon and a 2208 x 2208 splash screen and Ionic handles the rest.
There are some limitations with how you can design the splash screen, so I’d recommend you take a look at this post for more information.
You don’t need to be using Ionic for your application to use this tool either, just create a dummy application in Ionic, use the resources tool and copy and paste the icons and splash screens into your actual project.
8. Ionic View
Ionic View is an Ionic specific tool, but it has been a massive boost for my productivity. It’s similar to Hydration for PhoneGap Build but just… better. Admittedly it has been a while since I’ve used Hydration but I always had trouble with it.
Ionic View allows you to easily test your application on a real device and it allows you to easily share it with others as well (simply by sending an email, no pestering people with iOS devices for their UDID anymore!).
All you have to do is create an ionic.io account and run the following command in your project:
ionic uploadThen just open up Ionic View on your device, download the app and take a look! This saves having to create new builds and installing them onto your device every time you want to test something, it also means that you don’t need to sign your application before viewing it on a device.
9. Command Line Tools
Some frameworks (like Ionic and Sencha Touch) offer command line tools to help you develop your application. These allow you to do things like:
- Automatically generate a new application with boiler plate code
- Build the application
- Run / Simulate the application
- Watch for changes to SASS files and automatically recompile when changes are detected
- Live editing
The above are types of things the Ionic CLI and Sencha Cmd tools offer specifically, but you can also use generic command line tools like npm (Node Package Manager) and more specifically gruntjs (Grunt – The JavaScript Task Runner) to help speed up your development process.
For example, it’s quite easy to use grunt to automatically compress a PhoneGap Build application, upload it to the PhoneGap Build servers and then automatically download it for you. After you’ve had to build your app about 20 times, imagine how much time and frustration this will save you – running one simple command instead of manually zipping and uploading to PhoneGap Build.
Some people are a little intimidated by the command line and like to avoid it, if you are one of those people I’d highly recommend giving it a go. You won’t need to remember more than about 5 simple commands (you don’t even need to remember them) and you will greatly speed up your development process).
10. MakeAppIcon
I don’t use this anymore since it’s redundant if you’re using the Ionic ‘resources’ tool. If you’re not using Ionic though it’d be understandable if you don’t want to set it up on your computer just to make use of the resources tool, in which case this would be a good option for you.
MakeAppIcon allows you to upload a 1024 x 1024 app icon and it will spit out all the different icon sizes you need for both iOS and Android. It’s a simple to use app with a very cool user interface – it won’t generate your splash screens for you though.
This summarises the tools and services I most frequently use (or used) but there’s plenty more out there. If there’s something you use frequently that helps you develop HTML5 mobile application then leave it in the comments below 🙂