Common gotchas when working with Electron.js
Tags: electron, javascript, electronjs
Published: 2019-03-31 18:58:19

---
title: Common gotchas when working with Electron.js
published: true
description: 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.
tags: electron, javascript, electron.js
---

# 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](https://dev.chromium.org/developers/design-documents/multi-process-architecture). 	

I recommend [the official doc](https://electronjs.org/docs/tutorial/application-architecture) 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](https://electronjs.org/docs/api/ipc-main) for the main process and [ipcRenderer](https://electronjs.org/docs/api/ipc-renderer) for the renderer process(es), both these modules are based on [EventEmitter](https://nodejs.org/api/events.html#events_class_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:

```js
// 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)]
(https://github.com/typicode/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](https://twitter.com/sindresorhus) built [tons](https://github.com/sindresorhus?utf8=%E2%9C%93&tab=repositories&q=electron&type=source&language=) of utilities that can help your development workflows with Electron, my favourite ones are  [electron-util](https://github.com/sindresorhus/electron-util),  [run-electron](https://github.com/sindresorhus/run-electron) and  [electron-context-menu](https://github.com/sindresorhus/electron-context-menu).
Also to package and build your application, I recommend [electron-builder](https://www.npmjs.com/package/electron-builder) 

## Links
*  [https://electronjs.org/docs](https://electronjs.org/docs) 
*  [https://github.com/sindresorhus/awesome-electron](https://github.com/sindresorhus/awesome-electron)