Building Desktop Applications With Electron

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 framework

Electron: Brief Overview

Electron is an open-source framework for the creation of hybrid applications for Mac, Windows, Linux, as well as for mobile Android and iOS with the help of HTML, CSS, and JavaScript. Being built by GitHub for their text editor Atom, Electron was first introduced in 2013.

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.

electron js

  • Steep learning curve. As we’ve already mentioned, the framework doesn’t require any specific programming language knowledge except JavaScript, HTML and CSS. Web-developers get numerous APIs to choose from as well as business logic implementation features and UI elements. Templated principles also make testing simpler as the final app will work and look the same way when installing on any type of device and compatible OS;
  • 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
cd 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:

building desktop app with electron

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

npm start

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. 

Slack

  • 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

As you can see, it is pretty easy to create an app through Electron framework. All you need is a skilled developer with good knowledge of JavaScript, HTML and CSS. If you are looking to get a competitive commercial product as a result, it’s best to go for professional help. We possess in-depth expertise in the Electron JS and can efficiently implement a project of any complexity. 

SSA Frontend Team

ABOUT THE AUTHOR

Arcticle Rating

4.8 / 5

We hope you enjoyed this article! It's very important for us to receive your feedback. You can use these emojis to describe your feelings.

4 Reviews
comments powered by Disqus

Would you like to know more about our experience?