How do I make my mobile development life easier

A reduced performance spread, the pratical side, a growing community are all things that make me use  Cordova for my “simple” mobile developement. And my workflow is really making my life easier !

My best pratices

When I first developed stuff with Cordova, I was doing everything inside a single `www` folder. Even if, at the end of the day, only the compiled / concatenated sources were used, the app weight was pretty high. Not even speaking about the node_modules folder, browsed and packaged by Cordova on each build.

Noob error.

`www` folder only contains what is necessary

So, as soon as the project is created with

I create a specific folder for my original files. I call it `app` most of the time, but `src` would work fine too 🙂

In this folder, we can find:

  • assets (index.html, fonts, images, language files…), copied on build
  • styles (.css, .scss, .less, .styl etc.) compiled / concatenated in `www` on build.
  • scripts (.js, .coffee etc.) compilés / concaténés dans `www` au build.
  • bower_components: all the mess created / managed by bower
  • node_modules: all the mess created / managed by npm
  • partials / templates (.html, .jade etc) compiled as html in `www` on build

This way, my `www`folder is kept clean. Assets are copied in their own respective folders, stylesheets are compiled (if needed) and minified / concatenated in a `styles` folder (or `css`, it depends), same goes for scripts (`scripts` or `js` folder).

When building, Cordova takes `www` folder, and sort out the rest, taking only what it needs (hooks, plugins, platforms…), producing an app with a pretty reasonnable weight.

Use a task runner

I won’t provide support for the task runners “war” here, each one has some pros and cons, and the best is the one that fits your own needs !

Pretty much with Gulp, I started using Brunch , after having taken part into the Open Source project Cozy Cloud, which I recommend by the way 🙂

To me, this one is less verbose than the others and, despite pretty confusing terms / organisation at first, the tool is fast and effective, and fits the needs that result from my above best pratices. I won’t go into my configuration details here, but a lot of templates are available.

So,

and I’m not worried about modifications going from `app` to `www`.

Quick testing

Browsers

In the end, a Cordova app is just a simple, encapsulated Web app. Therefore, it’s easily testable in a browser. Most of the time, Google Chrome or Safari give results comparable to the Android / iOS browsers. Multiple tools allow us to test of our app in a ‘responsive’ mode, getting a glimpse of the obtainable result on a real device.

Live-reloading

Already widly used in classic web develomement, life-reloading is a life saver which we can no longer do without. Even if Cordova provides commands for that (serve, for instance), I personnaly use Ionic, using AngularJS for some of my apps. This framework is fast and based on Cordova, so CLI commands are pretty similar (ionic create, ionic serve / run / emulate, etc.) That being said, in my opinion Ionic provides more options, especially since the last updates.

With

Ionic opens a comparative view of iOS and Android rendering with 2 side-to-side columns, each one having its own independent behaviour.

Vue Ionic Lab

Ionic Lab View

Browsing back to the main page, most of the time http://localhost:8100, you can use your app, helped by the live reload (-l), console logs (-c) and server logs (-s) display.

Plugins

The problem with Cordova is that we’re quickly limited by what is provided by “web only”. We quickly face the need to use device’s features, and we start to have testing troubles. Because, of course, browsers can’t execute devices actions such as “vibration” or “sound” in a device way. We may then face the well known and utterly distressing repetition of

or friends, allowing you to compile and launch your app on the real device / the emulator. Plugins are then working, but the process is slow and repetitive. Even if the build only takes around 10 secs on a good computer, your productivity is slowed down.

Here again, Ionic comes to the rescue. Thanks to

Ionic modifies the `config.xml` file on its own, modifying the tag

providing it with the local server address, with live-reload activated. No need  to worry, the modification auto reverts at the end of the process. Back to a productivity worthy of the name; every modification on our sources is replicated directly on the device / emulator.

By the way, regarding Android, I highly recommend the use of GenyMotion instead of the regular emulator. The free version is efficient and usually enough for some quick tests.

If, by any chance, the live-reload was not working, make sure that Ionic is using the same IP address as your device / emulator, by typing

 Debug

With Ionic providing you with console and server logs, you already have a pretty good amount of information. But sometimes, you need to go deeper, debugging the app running on the device (css troubles for instance).

That’s not a problem: Android and iOS both provide this feature, via their respective browser, Chrome et Safari.

Android

Once USB Debugging is allowed on the device and your app is launched, just open Chrome and type

Your device should appear, with an ‘inspect” link. The web inspector behaves just like on a classic page: elements highlight, styles modifications, …

USB debug Android

USB debug Android

iOS

On an iOS device, you have to allow the Web inspector deep into Safari advanced options. Then on the “desktop” one, you need to activate Development Tools display (Prefrences -> Advance-> Show Development menu)

Once the device is connected, it should appear in the “Development” menu. When you launch your app, it appears in the sub-menu.

iOS Safari Inspecteur Web

iOS Safari Inspecteur Web

Versionning

What about versionning ? It’s as important as an efficient workflow. As a lot of us, I don’t keep node_modules or bower_components folder, which can be reinstalled using CLI thanks to package.json and bower.json files.

I usually don’t keep `www` folder either, as it can be fully compiled / created using `app` folder and brunch.

And, I don’t keep Cordova plugins folder. Since I, yet, didn’t find a good, package.json-like tool to keep trace of my installed plugins, I took the habit to create a script like `init.sh`and put my `cordova plugin add xxxxxx` stuff. Once my repo is cloned, I just have to execute this file.

We could go further, by ignoring every platform `build` folder too, but I don’t go that far.

In a nutshell

When everything works fine, editing a source file into my editor makes Brunch, the task runner, take care of them immediatly. Just after that, Ionic detects a change into the `www` folder, and replicates the modifications in my browser / my emulator / my device.

The splendid ( 😀 ) infography below illustrates the process :

Mon workflow dev mobile

Mon workflow dev mobile

The time saved is considerable. I’m sure that stuff could be modified / improved, so feel free to leave a comment !

Leave a Reply

Your email address will not be published. Required fields are marked *