First thoughts on Electron

Sarkis Peha — Wed, 08 Jan 2025 18:49:45 +0000

As a web developer, I find that whenever I'm looking to try something new, I first see if there's a way that I can leverage my knowledge foundation to find similarities play into the learning experience. Electron allows for such a cross and some wonderful analogies to getting started with desktop application development.

State management

The overlap in using a store between React and Electron is a nice getter/setter model similar to most state management systems in React. By requiring the electron-store, one can easily get going:

// electron main.js
const Store = require('electron-store');

const store = new Store({
defaults: {
  groceryList: {
    produce: ["apples", "carrots", "pears"]
    }
  }
});

ipcMain.handle('get-produce', () => {
  return store.get('groceryList.produce');
});

// ui.jsx (React component)
function ProduceListComponent() {
  const [produce, setProduce] = useState(null);

  useEffect(() => {
    window.electron.getProduce().then(setProduce);
  }, []);

// ... use 'produce' as needed

The IPC as a REST API

Poking around at the tutorials, each is quick to get talking about the IPC. The IPC (Inter-Process Communication) is similar to an internal API within a web app. Where fetch is the browser's way to make a request, electron.ipcRenderer.invoke is how this would be exposed to the Electron app's UI. As can be seen, both are async and promise-based.

// Web API Request
const fetchPriceData = async () => {
  const response = await fetch('/api/price');
  return response.json();
};

// Electron IPC
const getPriceData = async () => {
  return await window.electron.invoke('get-price');
};

Route Architecture

Similar to Node/Express, building a route for a web API is the equivalent to an IPC handler. HTTP methods are similar to the IPC channel names, and the request/response cycle is to the IPC invoke/return.

const express = require('express');
const app = express();

app.get('/api/price/:id', async (req, res) => {
  try {
    const productId = req.params.id;
    const productData = await database.getPriceById(productId);
    res.json(productData);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

const { ipcMain } = require('electron');

ipcMain.handle('get-product', async (event, productId) => {
  try {
    const productData = await database.getProductById(productId);
    return productData;
  } catch (error) {
    throw error;
  }
});

It's been a fun start with Electron, and I'm looking forward to tinkering around its extensive API for building desktop applications.

VSCode Prettier format on save

Sarkis Peha — Fri, 03 Jan 2025 03:58:40 +0000

If this serves no other person than my future self, so be it. I find I'm always forgetting simple set-ups that take a few steps and never re-visit until I'm installing settings on a new machine. To get Prettier to do all its magic upon saving a file, follow this cookbook:

1. Install Prettier extension in VSCode.
2. Cmd + shift + p and search Open User Settings (JSON)

3. Add the following to the settings.json

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. Add the file .prettierrc to the root of the project and add options as one sees fit.

{
    "tabWidth": 4
}

DEV Community: Sarkis Peha

First thoughts on Electron

State management

The IPC as a REST API

Route Architecture

VSCode Prettier format on save