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!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Onsen UI & Monaca Team

Written by

Team of developers from Onsen UI and Monaca

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade