Team of developers from Onsen UI and Monaca

Feb 16, 2016

Create Cross-Platform App with Electron and Onsen UI

Electron, formally known as Atom Shell, allows people to use web technologies to build cross-platform applications. Unfortunately, Electron hasn’t supported any Hybrid App Framework so here comes Onsen UI! In this blog post, we will try to integrate Onsen UI framework into a demo Electron app to see how it works.

Installation and Setup

Note that our development environment is following:

Electron: v0.36.2
OnsenUI: v1.3.14
AngularJS: v1.4.8

Installation

First, let’s install Electron. We can simply use npm to install.

$ sudo npm install -g electron-prebuilt

Project Setup

Now, we need to create an /electron-sample dir and generate package.json file executing the following commands:

$ mkdir /electron-sample 
$ cd /electron-sample 
$ npm init -y

In package.json file, modify and include main.js for Electron.

Create A Project

A minimum Electron app is structured in this way:

. 
├── ./index.html 
├── ./main.js 
└── ./package.json

main.js should contain the script that runs in the main process.

Right now, we simply display Hello World in index.html.

Execution

Under the project root directory (/electron-sample), we can run the following command:

$ electron .

Now, you should see something like this.

Integrating Onsen UI

Download Onsen UI using bower:

$ sudo npm install -g bower 
$ bower install onsenui

Now, our directory should look like this.

. 
├── ./bower_components 
│ ├── ./OnsenUI 
│ └── ./angular 
├── ./index.html 
├── ./main.js 
└── ./package.json

Modification

Let’s modify index.html in order to display a simple Onsen UI toolbar.

Run Electron like earlier.

$ electron .

Displaying Tab bar

Adding a tab bar is very easy with Onsen UI. Let’s insert it inside the <body> tag in index.html as follows:

Run electron . command in the same way. Click on any tab to see page transitions.

Compatibility

I noticed that some of the Onsen UI elements, such as sliding-menu or carousel, had conflicts with Electron due to Hammer script. Also, touch/swipe events had compatibility issues with Electron. Hopefully, those issues will be resolved in a future release, bringing also support to AngularJS directives.

Conclusion

Today we have seen how to quickly implement an Electron application with Onsen UI. There were a few conflicts which should not affect the development if your AngularJS skills are good. Onsen UI and Electron combination will certainly be a great choice for developing cross-platform applications.

I hope this tutorial helped you.

Happy coding!