Coffee?

Electron JS

What is Electron?

Electron is an open-source framework that allows developers to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. It enables web developers to create native-like applications for Windows, macOS, and Linux without learning new programming languages.

GitHub initially developed Electron for the Atom text editor and is now maintained by the OpenJS Foundation.

Key Features of Electron

  1. Cross-Platform
  • Electron apps with a single codebase can run on Windows, macOS, and Linux.
  1. Uses Web Technologies
  • Developers can create desktop apps using JavaScript, HTML, and CSS, just like building a website.
  1. Integrates with Node.js
  • Electron uses Node.js, allowing access to system resources such as the file system, OS-level APIs, and databases.
  1. Chromium-Based Rendering
  • Electron runs a Chromium engine, ensuring that web content looks and behaves the same across platforms.
  1. Customizable & Extendable
  • Developers can integrate third-party Node.js modules and native C++ addons.
  1. Automatic Updates
  • Electron provides built-in mechanisms for handling auto-updates, making app distribution easier.
  1. Security Features
  • Supports sandboxing, content security policies, and process isolation to enhance security.

How Does Electron Work?

Electron consists of two main processes:

  1. Main Process
  • It runs in Node.js and has access to the operating system.
  • Manages Windows, system interactions, and IPC (Inter-Process Communication).
  • Example: Handles file operations, tray icons, notifications, and app lifecycle.
  1. Renderer Process
  • It runs in a Chromium-powered web environment.
  • Similar to how a webpage works in a browser.
  • Each Electron window (BrowserWindow) runs its renderer process.

Example Workflow:

  • The main process creates and manages application windows.
  • The renderer process loads an HTML page and interacts with the UI.

Popular Apps Built with Electron

Several major desktop applications are built using Electron, including:

  • Visual Studio Code (Microsoft)
  • Slack (Workplace communication)
  • Discord (Gaming chat)
  • Trello (Project management)
  • Figma (Design tool)
  • Postman (API testing)
  • Notion (Productivity app)
  • Spotify Desktop (Music streaming)

When to Use Electron?

✅ Use Electron when:

  • You need a desktop app with web technology skills.
  • You want a cross-platform solution with a single codebase.
  • You need access to native OS features (file system, notifications, system tray, etc.).
  • You’re building a hybrid web + desktop experience.

❌ Avoid Electron if:

  • You need a lightweight app (Electron apps tend to be resource-heavy).
  • You require high performance (native development is faster for heavy computation).
  • You want a small application size (Electron apps are usually larger due to bundling Chromium).

Getting Started with Electron

To create a basic Electron app:

1️⃣ Install Electron

npm install -g electron

2️⃣ Create a New Project

mkdir my-electron-app && cd my-electron-app
npm init -y

3️⃣ Install Electron Locally

npm install --save-dev electron

4️⃣ Create main.js

This file is the entry point of your app.

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.whenReady().then(() => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadURL('https://example.com'); // Load a website or local HTML file

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

5️⃣ Run the App

npx electron .

This will launch a basic Electron window.

Conclusion

Electron is a powerful framework that brings web technologies to desktop development, allowing developers to build feature-rich applications without learning new languages. While it has some performance drawbacks, its ease of use and cross-platform support make it a popular choice for many modern desktop applications. 🚀

adminwp