In one of my previous posts, I talked (or rather wrote) about a framework called Electron, which offers the possibility to create cross-platform desktop applications with HTML, CSS and JavaScript. As soon I saw it, I had to try it out! The first thing I asked myself, though, after I created my first Electron app was: since Electron displays web pages can I use other JavaScript frameworks (such as React) to build and render my web pages? The answer is YES, and as it turns out combining both offers amazing opportunities!

Short recap

In my blogpost about Electron, I explained that Electron uses a so-called main process to display GUI’s. Each GUI renders a web page (could be an external link or an html file inside your project). Web pages are run in separate, isolated processes called renderer processes. Electron offers IPC (inter process communication) to send messages between the main & renderer processes. Another nice feature is that the full Node.js API is exposed by Electron in both the main as the renderer processes.

Enter React

Electron displays a web page inside a GUI. As a developer you must provide the link to that web page, that page is (often) a static html page inside your project folder. There you can add your React script & container and as soon as the page is displayed, your React app will start. Your React application runs therefor in the renderer process. This is also the same if you would use any other framework (e.g. angular).

As I discussed in the recap, you can communicate between the main and renderer process(es). This provides the developers & software engineers with endless possibilities, since your React runs in that renderer process. For example, you can create a menu in the native window (runs in the main process) and when a certain menu item is clicked, the React app (runs in the renderer process) navigates to a certain page. This is done by using the IPC to send a message from the main process to the renderer process, telling which page to go to. This is amazing!

Because Electron makes it possible to use the full Node.js API in both the main as renderer process, it is possible to let React use the Node.js API. This also provides amazing opportunities, since your React app can now use any Node module. This opens many, many doors: making the React app executing bash scripts on the user's computer, reading from or writing to the user's filesystem, ...

Tons of boilerplates

Although setting up a brand-new Electron-React project is not that much work, there are however a lot of things that developers might require or desire for each project: hot reloading, linting and the usage of certain plugins. Setting those up for each project can be cumbersome and time consuming. Luckily for us, there are amazing boilerplates out there for an Electron-React project. The Electron documentation contains a list of recommended ones. Most of those boilerplates are open source so,you can help them improve if you would like.

My opinion

In my free time I’m currently building an Electron-React application and so far, I’ve liked combining them very much. Although initially it was a challenge to figure out how Electron works, especially in combination with React. I’ve used a boilerplate that has all the features I require for developing (hot reloading, linting, Sass compiler, …) so I did not have to set them up myself. In my experience it is a fast way of developing desktop applications.

There is also another, less obvious benefit: you can actually create a React application and host it online but also build a desktop version with the same source code by using Electron. You don’t have to rewrite anything, only setting up the Electron-React project might take some time. The same React application code can be used without any modifications. You can even go further, you could add additional desktop specific features (adding a menu,…) or change the behavior on desktop (saving user preferences,…) with the same code. Since this uses Electron, it is important to note that the performance issues introduced by Electron will also rise here. Therefor, picking the right technologies for a project is still an important task that must be done before starting.