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-prebuiltProject 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 -yIn 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.jsonmain.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 onsenuiNow, our directory should look like this.
.
├── ./bower_components
│ ├── ./OnsenUI
│ └── ./angular
├── ./index.html
├── ./main.js
└── ./package.jsonModification
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!
