Create Cross-Platform App with Electron and Onsen UI

Image for post
Image for post

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 to install.

$ sudo npm install -g electron-prebuilt

Project Setup

Now, we need to create an dir and generate file executing the following commands:

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

In file, modify and include for Electron.

Create A Project

A minimum Electron app is structured in this way:

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

should contain the script that runs in the main process.

Right now, we simply display in .

Execution

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

$ electron .

Now, you should see something like this.

Image for post
Image for post

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 in order to display a simple Onsen UI toolbar.

Run Electron like earlier.

$ electron .
Image for post
Image for post

Displaying Tab bar

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

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

Image for post
Image for post

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…

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store