Electron apps

Mats Tage Axelsson dips his toes in the waters of desktop applications using Javascript and the Electron.js framework.

Mats Tage Axelsson dips your toes in the waters of desktop applications using Javascript and the Electron.js framework.

Electron is actually a browser packaged with node.js and a few APIS. Because it’s built on top of the Chromium browser, you have everything available from there to add to your application. Github developed it as part of the Atom editor; it was open-sourced in 2014 and is now popular with many open source developers. Electron is practical for building small (ish–ed), simple desktop applications since it uses web technologies. This makes it very easy for web developers to make a desktop application.

It has already been used for many productivity and development applications. The obvious use case is the

Atom editor which Github developed in parallel. Other applications lift out web pages and social media and drop them into their own application.

In this tutorial, you will learn how the parts hang together and how to create simple applications in Electron. You will end up with your own ‘To Do’ application that you can tweak to your heart’s content.

To follow this tutorial, all you need is your favourite editor prepared to handle Javascript and HTML. You should not need a browser, though the Electron system uses Chromium and Node.js. To make sure you get at least a glimpse of the ecosystem that is Electron, download https://github.com/electron/electronquick-start from Github. This repository is a very basic application that contains code to open a window. It is not useful on its own, but it contains many comments to help you get started and get your head around some principles used.

To make any Electron application, you need a Javascript development environment. In this case, you can start with the quick-start application for Electron and install node.js with npm. Other packages you need are related to the purpose of the application. Apart from for this, you just need to choose your favourite text editor or IDE for programming Javascript.

When you install Electron using npm, most libraries are included, but you need to look for the ones that are used specifically in your application. Installing Electron is simple if you have installed packages in npm before. Just run the following in your new directory:

$ npm install electron

There are several ways to install, but this way suits a local filesystem on an ordinary laptop. For this tutorial, you will need electron and spectre.css.

Processes: Main and Renderer

In Electron applications, there is one main process and only one, determined from the package.json file. The main process creates other web pages, and each of these is its own process. To create a new window, the main process uses the Browserwindow call, which creates a new renderer instance – one for each window. The renderer process is controlled by the Browserwindow API. The whole application is controlled by events inside the ‘app’ object. The full documentation for this ‘app’ object is at https:// electronjs.org/docs/api/app.

Before you start your project, it is a good idea to consider hosting it on the web: Github comes to mind. The easiest way to do this is to create the repo on Github first and then pull the almost empty project to your local disc. This also creates a comprehensive .gitignore file, which makes it a little easier to versioncontrol your work.

When that’s done, it is time to initiate the project; this actually creates your package.json file. You could write this yourself but it’s useful to have the basic info filled in for you.

$ npm init

This command is a script that will ask you for basic information about the project. Fill it in as you want – you can change it afterwards. The file contains the application’s name, version, description and how to run the project. Inside the automatically created file, there will be a scripts section. This is where you set how to test and run your application. You can also use this file to define how you version-control your file. To make this an Electron application, you should change, or add to, the start section of package.json.

While developing, you will want to start the application to see if your latest changes work. As standard, you run npm start in the project directory. What ‘start’ means is defined in the start section.

{

“name”: “taskgame”,

“version”: “1.0.0”,

“description”: “This is a task app that uses gamification to encourage you in your endeavours.”, “main”: “main.js”,

“scripts”: {

“start” : “electron .”,

“test”: “echo \”Error: no test specified\” && exit 1” },

As you can see in the script, test procedures are also defined, but that is for another time. Further down in this file, you will soon see the packages that you install to make the project. To install your dependencies, use

npm, like this:

$ npm install electron spectre.css

Note that you can install Electron globally but that may cause problems if you have several projects running and you need to keep different versions for each project. You also do not need root to install in your project directory.

Now it is time to write your first file with code in it. For anything to work, you must at least include the parts you need, in our case Electron. In this application, you will also use ‘path’, to make sure we can find our files locally.

The main purpose of this application is to have a window where you can enter your goals and a second window to see how you are doing. For this to show up nicely, you include Browserwindow; the windows need a Menu; and ipcmain and ipcrenderer are there to communicate between instances. ‘app’ is your main process, as mentioned.

In this application, you want to be able to add and remove tasks. The task list will be in the main window – you will have an add window and finally you can remove tasks. In this tutorial, you will create an HTML file with a corresponding Javascript file.

Piecing together main.js

This file creates the app instance that keeps the whole application running. In here, we define as many events as we can for a small application like this.

Things we need to cover are the creation and destruction of windows, and also catching events from forms, like this:

// The main electron Modules const {app, ipcmain} = require(‘electron’) const path = require(‘path’) const Window = require(’./window.js’) const Datastore = require(’./datastore.js’) require(‘electron-reload’);

// create the Store for my tasks const taskdata =new Datastore({name: ‘Task List’})

The top of this file initiates the first few classes, including your own class. It also creates the data store you will use. The rest of the file creates and runs the main process.

In this code, the way to store the data is defined in a separate file ./Datastore/ and the windows code is wrapped in ./Window.js/. In the main.js file, you define the main process. You need to add the event handling code inside the main process since that is the controlling one.

...Earlier code... function main () {

// Create Task list window in memory let mainwindow = new Window({

file: path.join(’./renderer’, ‘mainwindow.html’) });

// Add task Window in memory let addtaskwindow

...Code to be added later… }

// End of function main

// Listen for application to be ready app.on(‘ready’, main)

// Close all when closing main Window mainwindow.on(‘closed’, function(){ app.quit();

});

The main function is the process that handles your application and the other processes. In the code above, you only add the process and the handlers for opening and closing routines. Later, you will also add the code that opens other processes and reacts to events from those processes.

Before you write the software, you need to plan how to tie in the HTML with the Javascript code. You also will need to know what events you are handling and where the code goes to handle them.

The file Window.js creates classes that you can use in the rest of the application. With this approach, you can re-use the code more easily. If you are changing anything about window handling, you should change it here.

In Datastorage.js we define the storage; this ensures that you can change storage libraries when the code evolves and your needs change. A good example is if you want to switch to a new database.

mainwindow.html

The code here is a connection to the Javascript and an unordered list. You will populate the list when you create a new task. You will also see the list in here, including progress, failures and rewards.

In the code above you define your stylesheet framework. This framework adds a lot of styles, which is great. However, you can override the settings in your own file – hence the style.css file inserted after the framework. Note that you can override styles, but it is not as straightforward as that, as only the last definition will actually have an effect. There are specificity rules, but this article is not about CSS.

The code that adds functions is below; this page calls the Javascript at the bottom of the body text. It is usually a good idea to load the Javascript last as it may slow the loading of the site. Make sure that websites can do something even without Javascript.

task Game List

At the bottom of the body, you load the Javascript, which as mentioned improves performance. In this code, all you need to look for is the taskform identity. addtaskwindow.js In this window, you will add your tasks. The taskform identity from the HTML file is searched on the seventh row. The evt variable contains the data from the form

as an object; in this case, you have one item that you point to with zero notation [0] .

‘use strict’

//Require the basics for a window const { ipcrenderer } = require(‘electron’) //Get the form from the HTML document document.getelementbyid(‘taskform’). addeventlistener(‘submit’, (evt) => { //Prevent default refresh functionality for forms evt.preventdefault()

// Grab Input from the form const input = evt.target[0]

//Send the task to the main process ipcrenderer.send(‘add-task’, input.value) //reset Input values input.value = ‘’; })

At the end of this code, you send add-task to your main file using ipcrenderer and you bring input.value

with you. All requests go through your main process. This means you need to add the receiving code into your main.js file using ipcmain . The code has to be within the main function – check your curly brackets carefully. Use the browser developer mode and console.log() in your code to find any mistakes.

In this code, you will need to add the data to your store. You can see the addtask method that adds the data to your storage. The method is declared in the Datastore.js file so if you want to switch to another way to store your data, you change that file only. //...earlier code…

//New task incoming event ipcmain.on(‘add-task’, (event, task) => { const updatedtasks = taskdata.addtask(task).tasks //Update the window mainwindow.send(‘tasks’, updatedtasks)

})

You can see that the code has two parts only. First, the data itself is updated, and next the data is sent to the main window. In this second part, the data is sent to the mainwindow object. This object is presenting the main window at all times.

Now, you need to be able to remove tasks. This is done in the main window and the main.js file. Since this code is event-driven, you will need to add the code inside the main process – at any place that makes sense to you.

//Delete Task Event ipcmain.on(‘delete-task’, (event, task) => {

const updatedtasks = taskdata.deletetask(task). tasks

mainwindow.send(‘tasks’, updatedtasks)

})

This is, just like add-task , an event that you must trigger somewhere in your code. The main window has a listing of the tasks when it is running, so put it there. First, you create the method. This needs to be early in the file so we know it is loaded in when we use it. //Delete a task from existing list const deletetask = (e) => { ipcrenderer.send(‘delete-task’, e.target.textcontent) }; That part of the code creates the function, but it does not execute it. Inside the tasks receiving code add the below code.

// Add handlers to erase clicked tasks tasklist.queryselectorall(’.task-item’).foreach(item => {

item.addeventlistener(‘click’, deletetask)

As you can see, this code calls the deletetask code to send the work to the main process, where the data will be erased and the listing in the main window will be updated.

Now that you have all the code needed to handle your tasks, you can extend the functions in your main process. The code for this project is available at https://github.com/matstage/taskgame.

One simple way to get started is to make a new project from the already existing projects on Github. This makes it much easier to control versions.

When you start a new project with the supplied script, your package.json file will be filled in for you.

When running Electron Fiddle, you have hints available for you as you program. It’s handy for getting to know the package.

For editing your projects, you will usually need to have three files in mind for each function you want to implement.

Electron Fiddle can also edit your projects on Github – you just need to create an access token and the revision control is set for you.

When you want to package your project, Electron Fiddle can do it for you. You are not likely to use |it for bigger projects though.