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

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

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

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.

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

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

Run Electron like earlier.

$ electron .
Image for post
Image for post

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.

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…

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.

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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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