Introduction to ElectronJS

ElectronJS is an open-source framework that allows developers to build cross-platform desktop applications using web technologies like HTML, CSS, and JavaScript.

Cross-Platform Development: Write code once and deploy it on Windows, macOS, and Linux.
Single Codebase: Maintains one codebase for all platforms, reducing development time and cost.
Automatic Updates: Provides built-in support for delivering application updates seamlessly.
Node.js Backend Support: Enables access to system-level features like file handling and network operations.

Working of ElectronJS

ElectronJS works in two processes

1. Main Process

The Main Process controls the core functionality and system interaction of an Electron application.

Manages the application lifecycle and communicates with the operating system using Node.js.
Creates and manages browser windows, handles system events, and coordinates with renderer processes.

2. Renderer Process

The Renderer Process is responsible for rendering the user interface of an Electron application inside a Chromium window.

Uses HTML, CSS, and JavaScript to build and display the UI.
Each Electron window runs in its own renderer process.
Allows different views or components to operate independently.

Setting Up ElectronJS

Setting up ElectronJS involves installing Node.js, initializing a project, and adding Electron as a dependency.

Step 1: Install NodeJS

Download and install NodeJS from nodejs.org.
Make sure npm (Node Package Manager) is installed along with NodeJS.

Step 2: Create a New Project

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

This will generate a basic package.json file with default values.

Step 3: Install Electron

Install Electron as a development dependency using npm:

npm install electron --save-dev

Folder Structure

index.html

<!-- src/index.html -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to Electron!</h1>
    <p>This is a basic Electron app.</p>
    <button id="changeTextButton">Change Text</button>
    <script src="renderer.js"></script>
</body>
</html>

styles.css

/* src/styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 20px;
}

main.js

// src/main.js
const { app, BrowserWindow } = require('electron');
let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    mainWindow.loadFile('src/index.html');

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

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

renderer.js

// src/renderer.js
document.getElementById('changeTextButton').addEventListener('click', () => {
    document.querySelector('h1').innerText = 'Text Changed!';
});

package.json

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "src/main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^40.2.1"
  }
}

Run the App:

npm start

Output:

Features of ElectronJS

ElectronJS provides powerful features that enable developers to build fully functional desktop applications with system-level capabilities.

Creating a Window with Local HTML: Instead of loading a webpage, you can load a local HTML file:

mainWindow.loadFile("index.html");

Adding a Custom Menu: Electron allows developers to create custom menus:

const { Menu } = require("electron");

const menuTemplate = [
    {
        label: "File",
        submenu: [{ label: "Exit", role: "quit" }]
    }
];

const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);

Using System Notifications: Electron provides native desktop notifications:

const { Notification } = require("electron");

new Notification({ title: "Hello!", body: "This is an Electron notification." }).show();

Creating a Tray Application: Electron supports tray icons for background applications:

const { Tray } = require("electron");

const tray = new Tray("icon.png");
tray.setToolTip("Electron App");

File System Access: You can read/write files using Node.js:

const fs = require("fs");

fs.writeFileSync("test.txt", "Hello Electron!");

Electron vs Other Frameworks

Electron is compared with other desktop frameworks based on performance, app size, language, and system access.

Feature	Electron.js	NW.js	Tauri	Flutter Desktop
Language	JavaScript	JavaScript	Rust (Backend)	Dart
Uses Chromium	Yes	Yes	No	No
System API Access	Yes	Yes	Yes	Yes
App Size	Large (~50MB)	Large (~50MB)	Small (~5MB)	Moderate (~10MB)
Cross-Platform	Yes	Yes	Yes	Yes

Use Cases for ElectronJS

ElectronJS is widely used for building powerful cross-platform desktop applications using web technologies.

Cross-Platform Desktop Applications: Electron allows developers to create apps that can run across all operating systems.
Web-Based Apps: Applications like GitHub Desktop or WordPress Desktop that are essentially web-based apps but packaged as native desktop applications are great examples of how Electron can be used.
Development Tools: Electron is frequently used for building development tools, such as text editors (Visual Studio Code, Atom), IDEs, or version control clients.
Custom Dashboards: Electron is ideal for building custom dashboards, such as business or analytics dashboards that integrate with various data sources and provide real-time updates.

Limitations of ElectronJS

While Electron is powerful, it has some downsides

Large Application Size: Electron apps bundle Chromium and Node.js, leading to large package sizes (~50MB+).
High Memory Usage: Since each window runs in a separate process, RAM consumption is higher than native applications.
Security Concerns: Improper configurations can expose security risks like remote code execution (RCE).