🔹 Що таке Electron.js?
Electron.js — це фреймворк для створення десктопних застосунків під Windows, macOS і Linux за допомогою HTML, CSS і JavaScript. Він дозволяє розробникам використовувати веб-технології для створення нативних застосунків без необхідності писати код на C++ або Objective-C.
Electron поєднує:
- Chromium (для рендерингу інтерфейсу)
- Node.js (для доступу до файлової системи та інших нативних API)
- Власне середовище Electron API (для інтеграції з ОС)
Таким чином, ви можете писати один код і запускати його на всіх платформах, що робить Electron популярним серед веброзробників, які хочуть створювати десктопні програми.
🔹 Головні особливості Electron.js
✅ Кросплатформність
- Один код працює на Windows, macOS і Linux.
- Просте створення
.exe,.dmgабо.AppImage.
✅ Використання веб-технологій
- Інтерфейс застосунку створюється через HTML, CSS, JavaScript.
- Можна використовувати React, Vue, Angular або чистий JS.
✅ Доступ до нативних API
- Electron надає повний доступ до файлової системи, процесів, сповіщень тощо.
- Підтримує роботу з системним трейом, контекстним меню, гарячими клавішами.
✅ Вбудований Chromium
- Використовує Chromium для рендерингу інтерфейсу.
- Застосунок виглядає та працює як звичайний вебзастосунок.
✅ Використання Node.js
- Можна використовувати будь-які NPM-бібліотеки.
- Доступ до fs, path, child_process та інших системних API.
🔹 Як працює Electron.js?
Electron працює за принципом двох процесів:
- Головний процес (Main Process)
- Запускає вікно застосунку.
- Керує взаємодією із системою (файли, меню, нотифікації).
- Використовує Node.js API.
- Рендер-процес (Renderer Process)
- Відповідає за інтерфейс застосунку.
- Використовує HTML, CSS, JavaScript та фреймворки (React, Vue).
- Працює в середовищі Chromium.
📌 Зв’язок між процесами здійснюється через IPC (Inter-Process Communication).
🔹 Основи роботи з Electron.js
📌 Встановлення Electron
Перед початком встановлюємо Node.js, а потім Electron:
npm install -g electron
Створюємо новий проєкт:
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install electron --save-dev
📌 Базова структура проєкту
/my-electron-app
├── package.json # Налаштування проєкту
├── main.js # Головний процес
├── index.html # Інтерфейс застосунку
├── renderer.js # Код для рендер-процесу
📌 1. Створення головного процесу (main.js)
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.whenReady().then(() => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
});
📌 Що тут відбувається?
- Створюється головне вікно
BrowserWindow. - Завантажується
index.html(інтерфейс застосунку). app.whenReady()запускає застосунок, коли Electron готовий.
📌 2. Створення інтерфейсу (index.html)
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Electron App</title>
</head>
<body>
<h1>Привіт, Electron!</h1>
<button id="clickButton">Натисни мене</button>
<script src="renderer.js"></script>
</body>
</html>
📌 3. Додавання логіки рендер-процесу (renderer.js)
document.getElementById('clickButton').addEventListener('click', () => {
alert('Ви натиснули кнопку!');
});
📌 Що тут відбувається?
- Додаємо подію кліку на кнопку.
- Використовуємо вбудовані браузерні API (без Node.js).
📌 Запуск застосунку
npx electron .
📌 Результат: Відкриється вікно застосунку з кнопкою “Натисни мене”. 🎉
🔹 Доступ до нативних API
📌 Читання файлів через Electron
const { dialog } = require('electron').remote;
const fs = require('fs');
document.getElementById('openFile').addEventListener('click', () => {
dialog.showOpenDialog({ properties: ['openFile'] })
.then(result => {
if (!result.canceled) {
fs.readFile(result.filePaths[0], 'utf-8', (err, data) => {
if (err) console.error(err);
console.log("Файл прочитано:", data);
});
}
});
});
📌 Що тут відбувається?
- Відкривається діалог вибору файлів.
- Читаємо файл за допомогою fs.readFile().
🔹 Створення меню в Electron
📌 Додаємо кастомне меню
const { Menu } = require('electron');
const menuTemplate = [
{
label: 'Файл',
submenu: [
{ role: 'quit', label: 'Вийти' }
]
},
{
label: 'Допомога',
submenu: [
{ label: 'Про програму', click: () => console.log('Про програму') }
]
}
];
const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);
📌 Що тут відбувається?
- Додається меню “Файл” та “Допомога”.
- Обробляємо натискання меню.
🔹 Переваги Electron.js
✅ Кросплатформність – один код для Windows, macOS, Linux.
✅ Використання веб-технологій – HTML, CSS, JS.
✅ Повний доступ до нативних API – файлові системи, меню, нотифікації.
✅ Велика спільнота – багато готових бібліотек.
✅ Простий у навчанні – ідеально для веброзробників.
🔹 Недоліки Electron.js
❌ Великий розмір застосунків – базовий .exe може важити 100+ MB.
❌ Високе споживання RAM – через Chromium.
❌ Не така висока продуктивність, як у C++ – бо працює через JS.
🔹 Для кого підходить Electron.js?
✅ Для веброзробників, які хочуть створювати десктопні застосунки.
✅ Для створення інструментів, що потребують нативного доступу (редактори, менеджери файлів).
✅ Для компаній, які хочуть один код для всіх ОС.
🔹 Висновок
Electron.js – це потужний фреймворк для створення кросплатформних десктопних застосунків, який використовує веб-технології.
Він підходить для інструментів, редакторів, месенджерів (наприклад, VS Code, Slack, Discord).
Якщо вам потрібен десктопний застосунок на основі веб-технологій, Electron – чудовий вибір! 🚀