You are here

Streamlining desktop and mobile app development

Posted at 18:52 on Sat, 4th July 2015 in mobiledev, ionic, electron.

Some different approaches and tips for building desktop and mobile applications from the same code base.

The first way one might try to solve this problem is building your mobile apps as mobile apps and then getting users to install an emulator on their desktop to use the app. There are many options already to do this including Bluestacks, Andyroid and the Chrome extension Arc Weldor. These all work fine but Bluestacks and Andyroid are large installs that seem to be complete virtual machines (targeted at the mobile gaming market), and Arc Weldor is in very early Beta at present.

After trying out the emulator options, one of my good friends and colleagues - Sam Hassell pointed me in the direction of Electron. It basically lets you build HTML5 apps as desktop applications by bundling a version of Chromium with your app. It’s backed by github and is used by lots of large organisations like Facebook and Microsoft.

So I took a mobile app prototype I had built with Ionic and followed the Electron Quick start guide. It was basically just a case of creating the “main.js” in the root folder and then adjusting the loadUrl() call to use the existing index.html in your www or app folder.

To demonstrate this, I’ve done the same steps to the Stamp Duty Calculator app I built earlier this year. You can see how easy this is from this commit fe57d6c. In some cases you may want to do additional functionality or sass styles specific to Electron and the user agent string is one way to determine this - check out this gist: isElectron.js.

You can then use the electron-packager tool to build a distribution. I’ve put the OSX and Windows distributions up on sourceforge if you’d like to give these a try.

So basically we have full coverage of all platforms and Operating Systems - we use Cordova and Ionic to cover iOS and Android and we use Electron to cover desktop environments for Windows, Mac and Linux - what a dream!

There are a few things to be aware with this approach though - the Cordova plugins you might typically rely on for mobile hardware API’s, won’t be available. It also seems like some common HTML5 features like Geolocation are a little buggy too.

I tried googling around to see if others had tried taking Ionic apps and building them as Electron apps, but didn’t turn up much so figured it was a good topic to blog about. If I’ve overlooked something else, feel free to point out the obvious :)