Common gotchas when working with Electron.js
So I had the chance to play with Electron.js past weeks building dummy applications and wanted to share my small experience with it when building cross platform desktop apps.
Architecture
An Electron application has two processes:
The main process: there is always one and only one main process per application responsible for creating web pages, picture it like a server-client architecture with the main process being the server in this case.
The render process: representing the web pages (client) created by the main process and running on chromium multi-process architecture.
I recommend the official doc for reading in-depth about the architecture.
IPC
IPC (Short for Inter Process Communication) is a protocol used on Electron apps for enabling communication between its processes (Main and Renderer)
Electron makes this possible by providing two modules: ipcMain for the main process and ipcRenderer for the renderer process(es), both these modules are based on EventEmitter and provide functions for listening on and emitting events.
A basic example for pinging a renderer process from a main process and listening for a response can be like the following:
// in the main process
const { ipcMain } = require('electron')
myWindow.webContents.send('event_from_main', 'ping_from_main')
ipcMain.on('event_from_renderer', (event, arg) => {
console.log(arg) // ping_from_renderer
// we can use event.sender.send to reply to event
})
// in the renderer process
const { ipcRenderer } = require('electron')
ipcRenderer.on('event_from_main', (event, arg) => {
console.log(arg) // ping_from_main
ipcRenderer.send('event_from_renderer', 'ping_from_render')
})
Data persistence
Electron.js as a framework isn’t opinionated when it comes to how to store your data, it’s up to you and your needs to choose a database, be it either a local one (localStorage, indexedDB) or go big like Postgres or MongoDB (in general as long as there is a Node.js adapter for it, you’re welcome to use it)
I personally always find my self reaching out for lowdb) in small or prototype projects since it’s easy to use (lodash syntax like) and really gives you the flexibility afterwards to migrate to something bigger once you figure out what you really need.
UI and Styles
Unlike other desktop apps toolkits, views/pages in an electron application are just regular html files, this means you can bring your favorite styling friends to the party (sass, less, css grid, svgs etc…)
Also there are some boilerplates out there for using React, Vue and other UI libs with Electron.
Bonus:
@sindresorhus built tons of utilities that can help your development workflows with Electron, my favourite ones are electron-util, run-electron and electron-context-menu.
Also to package and build your application, I recommend electron-builder
Top comments (0)