Over the last couple of years, a fair number of solutions have allowed programmers to utilize web technologies (e.g., HTML, JavaScript) to build desktop apps. Sadly, no matter how skilled the developers, the resulting applications always turned out perfectible and lacked a true desktop feel.
Electron turns perfectible into perfect.
![](https://webcf.waybackmachine.org/web/20211207181245im_/https://astec.net/wp-content/uploads/2021/07/electorn-logo-small.png)
Maciej from Astec uses Electron in his project. Electron constantly surprises him with powerful cross-platform capabilities and robustness. Maciej is an experienced web developer very keen on repurposing his skills to build pro desktop apps. Electron allows utilizing the web technologies know-how to build cutting-edge desktop applications, which proves the ideal solution for Maciej.
Electron uses a single codebase for Windows, Linux, and macOS. You no longer have to code and maintain separate projects for each platform. Less is more. Installing a prebuilt binary version of Electron is a piece of cake. Forget native compilation. Forget node-gyp. Electron is a paragon of painless application setup.
We curated a list that combines the hottest Electron features as searched for on the net with personal insights and code examples of Maciej. The following list should help you make your Electron app sexy and perfect.
Good Performance
Performance is key in app development. Long loading times make your app feel less native and just plain annoying to use.
Electron makes your app fast.
But there are two easy steps to make your app even faster. Remember to first measure the startup time of your app to have a point of reference. Then:
- Lazily load big modules. Either a couple of seconds after the app starts or when the module is needed.
- Bundle your application’s code into a single file to the extent possible. The require() operation is very expensive. Try to call it as seldom as possible.
These two are by far the most important things to do to improve your application’s performance. For more tips on how to improve your Electron app’s performance, refer to the official Electron Guide on Performance.
Speed is important, but you also have to provide a smooth UI experience. Flashing screens on loading or resizing the app signal bad app development. Try fade-ins instead.
One-Step Build
Electron makes the one-step build dream come true. The electron-builder packages the app, creates and signs installers, creates deltas for the auto-updater, and runs tests. Build automation has never been so simple.
The electron-builder tool is one of the recommended tools for building and distributing Electron apps.
Notifications
Desktop notifications are a handy feature, which allows the app to notify users whenever something important happens. Electron supports desktop notifications on Windows, Linux, and macOS.
![](https://webcf.waybackmachine.org/web/20211207181245im_/https://astec.net/wp-content/uploads/2021/07/electron-notification-1024x274.png)
Find the code snippet below.
Menus
Electron offers an out-of-the-box set of menus, including context menus, tray menus, and dock icon menus, for you to use and give your app a native look. Do not reestablish conventions. Follow the existing conventions and make your app correspond to the best practices of every platform.
![](https://webcf.waybackmachine.org/web/20211207181245im_/https://astec.net/wp-content/uploads/2021/07/electron-menu-1.png)
Refer to the following code snippet for creating a menu.
Minimize to Tray
Electron makes minimizing to tray as easy as ABC. An app running in the tray might be a desirable feature in background apps or applications that start automatically on system startup. In addition to tray support, Electron allows for Mac dock integration.
![](https://webcf.waybackmachine.org/web/20211207181245im_/https://astec.net/wp-content/uploads/2021/07/electron-tray.png)
The following code snippet creates a simple tray menu. For Linux, you have to use an image in either PNG or JPG format. Linux does not support the ICO format.
Shortcuts
Shortcuts make it easier to use the application. Naturally, you ought to follow keyboard shortcut conventions for each platform. Electron facilitates keyboard shortcuts by providing accelerators, which can contain multiple modifiers for a single key code. For example, CommandOrControl+S turns into Ctrl+S on Windows and Cmd+S on Mac. Furthermore, you can register a global shortcut, which works even when the application is not in focus.
Error Handling
You can set up Electron to automatically send crash reports to a remote server on every application crash.
Moreover, Electron gives you the opportunity to better handle errors with uncaught JavaScript exception notifications.
Signing Installers
We highly recommend signing your installers. Windows often detects an unsigned installer, and then opens a nasty window, which says your application cannot be trusted. Mac is most likely not going to run an unsigned installer at all.
You can solve this issue by signing your installer.
Windows
For Windows, you can get one of these two types of certificates:
- EV Code Signing Certificate
- Code Signing Certificate
We recommend getting the EV Code Signing Certificate. The Code Signing Certificate shows a warning during installation if not enough users have installed the application before. The warning goes away once your application builds enough trust. The EV Code Signing Certificate does not require your application to build trust and never displays the warning. On the downside, the EV Certificate binds to a physical USB dongle, which makes it impossible to use with continuous integration services.
macOS
For macOS, get the Apple Developer membership to get a certificate, or use the following command:codesign --force --sign "Developer ID Application:
<Developer ID>" /path/to/my.app
Drag and Drop
Sometimes clicking the Browse button, browsing through folders, and clicking Upload is too much a hassle. Drag and drop provides a sweet alternative. Electron supports various cases of drag and drop. Dragging files onto the running app window or dropping the file on the app icon regardless of whether the app is running: Electron is powerful enough to handle all those cases.
The code snippet below depicts an implementation of a simple drag and drop.
Auto Updater
A prompt that asks you to install the latest upgrade is annoying, to say the least. Electron integrates with Squirrel. Squirrel enables apps to automatically update on Windows and macOS. Updates are safe and transparent.
Use the electron-builder package to build the application. Since the electron-builder package supports the electron-updater, updating the app is a breeze.
Let’s Wrap It Up
In the modern world, computers replaced pen and paper, and man’s dream to fly into space became a reality, but one fact remains as true as ever: You can’t get water out of a stone. But you can get a sexy application out of Electron.
Electron provides a plethora of tools to make your app sexy.
We briefly went through the most important features of Electron. We offered insights and code examples to improve the quality of your Electron app.
A quick recap:
1. Provide Speed
Nobody wants to use a slow and clunky application, yourself included. Make your app fast to start and seamless to use.
2. Provide Simplicity
A simpler app is easier to maintain. Make your app simple. Don’t overdo it. Simply do it.
3. Provide Native Feel
Ensure your app feels native on all platforms. Don’t just make it eye-candy. Make it intuitive. Make it compatible. Make it count.