Setting up Electron framework for Desktop apps

Standard

So, I recently came across a bunch beautifully designed and developed desktop apps on my Linux. Now, as a Linux user, I am used to overlooking design and aesthetics over functionality. Linux desktop developers usually don’t spend their energy on making their apps more user-friendly and appealing instead they invest it in improving its functionality. And it is generally assumed by them that the user is someone who is well versed in Linux Vedas and can handle the “rugged” nature of their desktop apps. But this notion is slowly changing with the introduction of new cross-platform desktop application frameworks like Electron. I have been using a few Electron apps for a couple of months now and I will just leave it to you to decide how aesthetically pleasing they are.

This slideshow requires JavaScript.

What is Electron ?

Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.

Want to build cross-platform desktop applications ? Here’s how you go about setting up Electron in Linux.
First, we install npm to manage Node.js packages :

$ sudo apt-get install npm

Then we install Node.js :

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Finally, we install Electron package. This command installs Electron globally but you can install it locally for your project.

$ sudo npm install -g electron

Now that we have installed Electron let us try a “Hello World” example as a part of our initiation ceremony! Any Electron app source code primarily has three important components, the JavaScript, the HTML (CSS optional) and the JSON file called package.json.

This package.json file is important with respect to Electron to define the app name, version and its main process, which usually is the JavaScript (index.js).

{
  "name" : "Hello World",
  "version" : "0.1.0",
  "main" : "main.js"
}

The JavaScrip file consists of all the Electron APIs and it is necessary to define const {app, BrowserWindow} = require('electron') in the .js file to include the Electron APIs. In this file you can include the rest of your app’s specific main process code. You can also put them in separate files and require them here.

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(`file://${__dirname}/index.html`)

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

The BrowserWindow object creates a Window using the given width and height dimensions. When Electron has finished initialization and is ready to create browser windows we call the  app.on('ready', createWindow) method. Some APIs can only be used after this event occurs.
At last, we define the HTML tags we want to use in our index.html file and design our app as per our requirements. In this example, we will stick to the h1 tag.
To execute our Electron app, go to the project directory and execute with the electron command:

$ electron .
hello-world_006

Hello World – Electron App running on Linux Mint 18

Download the Hello World example here:

image4233

Further Readings :

Let me know your thoughts and experiments with Electron in the comments section below.

Dealing with compatibility issues.

Standard

Today I was searching for an Ubuntu app called Cuttlefish. But later found out that even though it was such an important utility it was no longer maintained. So, I googled ‘Cuttlefish ubuntu no longer maintained‘ and stumbled upon this AskUbuntu.com question…

How do I develop software for Ubuntu that one could still use in future versions

This question had a very thoughtful response, this point should be kept in mind while developing your projects…

In my experience (near 30 years now), hardware and low level code (BIOS for instance) change not that much or more accurately, keep a very good ascending compatibility. (I wrote twenty five years ago a little game program in assembler, running with DOS and VGA display: it’s still running fine on modern Windows computers).

So I would say: avoid dependencies as much as possible. When planning to use a library or an API, examine thoroughly its history and evolution, and how it still run “obsolete” code or not. If you’re in doubt, try to incorporate to your project the source code (and not the compiled library). If the functionalities it provides is not strictly computer oriented (like maths libs or general algorithms), you probably need not upgrades.

Just my two cents…

Find the whole story here : Ask Ubuntu

And as always:

Make it Open Source! That way anyone can jump in and maintain, fix, whatever, when for whatever reason you just can’t anymore, although this can happen due to basic operability (stares at air apps…) some apps just need an extra hit with a hammer to keep them working.