Building Desktop Applications With Electron
As major business niches are being sweepingly digitized, more and more development companies tend to launch accessible desktop apps. These are used globally and daily for solving common business tasks (i.e., Slack is intended for internal work team interaction and communication).
There are many options of frameworks to implement such solutions, with the ‘hottest shot’ of the recent years being cross-platform development-focused tools. One such prominent tool is the Electron framework. What are the peculiarities of using it and where do its advantage.
Electron: Brief Overview
It’s noticeable that apps created with this framework perform like regular web applications, except they employ the device’s local storage. And that is a decisive step towards ultimately reinforcing the personal user data protection.
Electron JS can be used without the involvement of any specific programming language, offering you instead to employ only the supported web technologies combined with solutions based on Chromium (a rendering library) and Node.js (a backend creation platform). The engine works with templated structures of web applications - both on the frontend and backend side. That allows to significantly reduce the complexity of the development process along with the total app budget.
Main competitors of Electron
For now, Electron is the most popular framework for desktop app building. However, its main competitors are:
- NW.js, a less popular framework sponsored by Intel. As well as Electron, NW.js allows building desktop applications using Node.js at the system level and web technologies for a graphical user interface layer. However, build process in Electron is a bit easier because you don’t have to involve browser scripts for every little thing;
- Neutralinojs, a rapidly developing open-source framework. Unlike Electron, Neutralinojs allows running the application without Node.js required and hundreds of package.json dependencies;
- Desktop PWA (Progressive Web Apps), Google's small-size applications with the ability of easy installation and updating from Google Chrome browser. It is expected to be a leading technology for building desktop apps in future.
Main Advantages of the Electron Framework
Let’s take a look at some major pros of developing Electron JS-based apps.
- Reliability. Electron JS-based applications are highly reliable, storing all app-employed data on the local storage (which, in fact, may not be the best solution in terms of software performance, yet makes a positive impact on the data security sustainability);
- Decreased project implementation costs. Many cross-platform developmental environments help with that, however, the framework in discussion utterly simplifies the project workflow and allows developers to focus on the building of the software carcass;
- Extensive compatibility. Electron is compatible with a good number of JS libraries and, we have to say, this is quite enough to time-efficiently create apps with even the most in-depth, complex functionality. Moreover, it is compatible with such renowned frameworks like Angular, Vue, React and many others - all in all, with everything actively employed by app developers nowadays.
As for downsides, developers notice that Electron JS-based solutions intensely load the system memory, need lots of energy to operate, and lack of the adaptiveness to concrete OSs (which, in fact, is a common characteristic for any type of cross-platform software).
How to Build an Electron Desktop App: 7-Step Guide
This is a simple, comprehensive guide on creating a cross-platform desktop application based on Electron JS.
Step #1. Manipulations with the terminal
First things first, you need to launch the terminal to create a local version of the Electron Quick Start repository directly on the device you’re working at the moment with. For that, input the following lines:
git clone https://github.com/electron/electron-quick-start
npm install && npm start
After that, you’ll see a browser window with the looks of your new, empty as of yet app. Notice, that you also get to use all the developer’s tools available in the browser (i.e., you can use browser development tools freely while building your app).
Step #2. Studying the architecture of future software
Experienced developers won’t see anything new here: you get a code structure that’s practically identical to the structure of regular web pages. In particular, it includes files index.html (which describes the visual look of the page), main.js (which describes the major operating process), package.json (which consists of dependencies, names, and everything related to the npm package), and renderer.js (a file with the code that describes rendering procedures).
The app’s operation process looks as follows:
Step #3. Creating main.js
Our next task is to describe the main app process, i.e., the process which will be launching all the rest of the app functions (including its initial launch and shut down). On top of that, due to the built-in Node.js API, you are able to implement the business logic and rendering in that file as well.
As a rule, the file has a standard name main.js, although you can rename it (just don’t forget to change the name in the dependencies’ descriptions in other files). It’s very important to keep in mind that the main file is necessary and must be one for the whole project.
Step #4 (optional). Initiating rendering
All in all, rendering in an app allows for implementing the interactive functionality, as well as the endless page scrolling that doesn’t require refreshing web content via browser tools. This is pretty handy from the UX perspective but can be quite difficult to realize. Fortunately, Electron allows handling this issue painlessly.
Take a look at the key stages of this process:
- HTML processing for the creation of a DOM tree;
- the creation of the rendering tree;
- calculation of the rendering tree’s elements’ positioning on the screen, forming of a page markup;
- visualization of the rendering tree.
You can implement several rendering scenarios - both independent and codependent - based on what the end-user wishes to get out of the finished software piece. Such processes can also be numerous and still not affect your software’s performance (which is aided by the multi-process Chromium configuration).
In order to connect the created files with the rendering, you will need to implement the data exchange between two flows of one or several different processes (IPC) via the built-in Electron tools in the main process described in the main file.
Step #5. Making the app clear for third-party developers
Leaving standard names for all files except the main file isn’t the best of practices. As your software functionality gets more complicated, files will be adding up and, with time, it’ll become quite difficult to figure out which file contains what (that'll be especially challenging to other external developers involved with the project).
To avoid that, we’d suggest coming up with some unique names for important folders storing crucial parts of the project and renaming the package.json file, defining the correct app name, description, version, author, license, etc.
If you worry about missing some new data descriptions, just input the following line in the CLI
It will launch your app and allow checking out all the changes made.
Step #6. Adding functions
We’ll leave this step of our guide utterly abstract because the app functionality depends, above everything else, on your initial tech reference and specifications.
Step #7. Testing the created app
Always test everything you build thoroughly.
The Electron-based architecture implies the absence of any reaction to user actions if the app window is inactive or minimized. So try to build the business logic during initial project stages in a way so that principle doesn’t become a critical obstacle for users trying to employ the required functionality.
Reasons to Build an Electron App: 5 World-Renowned Desktop Apps Where Electron Handled Complex Tasks
You can find over 800 desktop applications built via Electron framework. Let’s take a look at 5 famous samples:
- The desktop version of Slack. A globally-known and used freeware business messenger for macOS, Windows, and Linux. The framework helped its developers implement quite the complex and extensive functionality, which is partially set into motion due to the Chromium rendering. Slack allows to not only exchange private and public messages but also create private channels, make video and regular calls, set up conferences, upload files, etc. In general, everything a business of various scales may need for efficient in-house communication.
- The desktop version of Pexels. This app stores hundreds of thousands of freeware stock hi-res photos. Due to Electron, it has an utterly simplified option of copying images to buffer - you can do that in one click. The app is available for macOS, Windows, and Linux.
- The desktop version of WhatsApp. WhatsApp is another messenger, the desktop version of which was created for macOS and Windows. It has, really, quite an ordinary set of capabilities: user chats, video and regular calls (private or group), etc. It also has a file exchange feature and automated message deletion by time periods. With this here example, Electron helped creators do just fine with the humble budget and time boundaries.
- The desktop version of WebTorrent. WebTorrent is a popular torrent client for downloading files from networks like BitTorrent and WebTorrent that employs the P2P connection. This software product has been developed using Electron exclusively for macOS, Linux, and Windows. The ‘Electron-based approach’ saved the end product from loads of ads and made it open-source;
- The desktop version of Skype. Skype Messenger for macOS, Windows, and Linux is, perhaps, the most widely used messenger in the world: it’s used daily by both kids and old folk - it is that accessible and convenient. Electron was used to add up the existing version of this product with new features, such as the shared file access. Moreover, the older set of icons was updated and the user interface was fully reworked.
Electron App Development: Summary