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
First, let’s install Electron. We can simply use
npm to install.
$ sudo npm install -g electron-prebuilt
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
package.json file, modify and include
main.js for Electron.
Create A Project
A minimum Electron app is structured in this way:
main.js should contain the script that runs in the main process.
Right now, we simply display
Hello World in
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.
│ ├── ./OnsenUI
│ └── ./angular
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:
electron . command in the same way. Click on any tab to see page transitions.
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.
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.