Electron – webové technologie pro desktopové aplikace

Proč Electron a co přináší

Electron umožňuje vytvářet multiplatformní desktopové aplikace pomocí webových technologií (HTML, CSS, JavaScript). Kombinuje Chromium pro vykreslování uživatelského rozhraní a Node.js pro přístup k systému. Výsledkem je jednotný vývojový stack, rychlý prototypovací cyklus a rozsáhlý ekosystém knihoven. Electron však přináší i specifické výzvy – velikost binárních souborů, nároky na paměť a přísné bezpečnostní zásady.

Architektura: hlavní proces, renderer procesy a IPC

Hlavní proces – spouští aplikaci, spravuje okna (BrowserWindow), menu, systémová API, životní cyklus, automatické aktualizace, notifikace a integraci s operačním systémem.
Renderer procesy – jeden či více pro každé okno/záložku; běží na jádře Chromium a vykreslují uživatelské rozhraní.
IPC komunikace – oddělení oprávnění vyžaduje bezpečný kanál mezi rendererem a hlavním procesem. Používejte ipcMain/ipcRenderer s request–response vzorem, validací zpráv a minimem povolených kanálů.
Preload skripty – běží v rendereru před vykreslením UI; slouží k vytvoření bezpečného rozhraní přes contextBridge (tzv. bridging API).

Bezpečnostní model a zásady

Sandbox – aktivujte sandbox: true a contextIsolation: true; renderer tak neběží s Node API.
Disable remote – nepoužívejte historické remote API; nahraďte vlastním IPC a contextBridge.
Content Security Policy – omezujte zdroje skriptů, zakazujte unsafe-inline a eval; preferujte bundlery generující hashed či nonce skripty.
Nahrávání vzdáleného obsahu – upřednostňujte lokální soubory (file://) nebo vlastní protocol; pokud musíte načítat web, aktivujte webSecurity, allowRunningInsecureContent: false, partition a redirect blocking.
Omezená oprávnění – whitelistujte pouze nezbytné metody v contextBridge.exposeInMainWorld. Každý volání validujte (schéma, typy, rozsahy).
Bez tajemství v klientovi – nepřidávejte API klíče a tokeny do klientské aplikace; používejte backend proxy, OS keychain a krátce platné tokeny.

Životní cyklus aplikace a správa oken

Start: app.whenReady() → vytvoření BrowserWindow a načtení UI.
Exit/close: zachytávejte before-quit/window-all-closed; na macOS respektujte vzory app reactivation.
Více oken: pro sdílená data používejte shared workers, vlastní store nebo hlavní proces; nespolehejte na globály rendereru.
BrowserView vs. WebView: BrowserView je oficiální API v hlavním procesu; <webview> je izolovaný tag, vyžadující přísnou konfiguraci.

Integrace s operačním systémem: nativní menu, tray, protokoly, asociace souborů

Menu – Menu/MenuItem s rolemi pro standardní chování (kopírovat, vložit, okna).
Tray – systémová ikona, kontextové menu, indikátory stavu.
Protokoly a deep-linky – registrujte app.setAsDefaultProtocolClient('myapp') pro otevření aplikace z URL.
Asociace souborů – otevření souboru v aplikaci (Windows app.setUserTasks, macOS open-file event).
Notifikace – new Notification() s nativní integrací a akcemi.

Přístup k systému: dialogy, schránka, obrazovky, napájení

dialog – otevření/uložení souborů, upozornění.
clipboard – manipulace se schránkou (text, HTML, obrázky).
screen – informace o monitorech, DPI, dostupném prostoru.
powerSaveBlocker – zabránění uspání během dlouhých operací.
desktopCapturer – snímání oken/obrazovek (s ohledem na oprávnění OS).

Výkon a paměť: strategie optimalizace

Jednoduché UI – vyhýbejte se nadměrným repaintům, preferujte virtualizované seznamy a memoizaci.
Lazy loading – dynamicky importujte náročné moduly; code splitting pro rychlý start.
GPU – nechte hardware acceleration zapnuté; vypínejte pouze při diagnostice nebo specifických chybách.
Procesní model – méně oken znamená méně rendererů; sdílené webContents používejte s ohledem na izolaci.
Detekce úniků – profilujte heap snapshots, sledujte detached DOM uzly, uvolňujte BrowserWindow a odstraňujte IPC listenery při destrukci.

Balíčkování, podepisování a distribuce

Bundlery – electron-builder, electron-forge, případně vlastní skripty (CLI + asar archiv).
Artefakty – Windows: NSIS/MSIX; macOS: DMG/PKG, notarizace a Gatekeeper; Linux: AppImage/deb/rpm/snap.
Podepisování – code signing (Windows certifikát, Apple Developer ID), timestamp, správná identita balíčku.
Automatické aktualizace – electron-updater (diferenciální aktualizace), kanály (stable/beta), ověřování podpisů.

Testování: jednotkové, integrační a end-to-end

Jednotkové testy – čistá logika (store, business) pod Jest/Mocha.
Integrační testy – testy IPC kontraktů, preload API a sandbox chování.
End-to-end (E2E) – automatizace pomocí Playwrightu nebo náhrad za Spectron (Spectron je historický); spouštějte electron binárku s testovací složkou aplikace.
CI/CD – matrix buildy (Windows/macOS/Linux), cachování node modulů, podepisování v bezpečném prostředí (HSM/Apple Notary API).

Bezpečnostní checklist pro produkci

contextIsolation: true, nodeIntegration: false, enableRemoteModule: false.
Výhradně lokální obsah nebo přísné CSP; blokujte navigace (will-navigate, new-window).
Preload poskytuje pouze úzké API; validace vstupů a serializace zpráv (Zod/ajv schéma).
Zakázat nevyužitá nastavení webPreferences (např. allowpopups, plugins); povolit safeDialogs.
Automatické aktualizace – pouze z podepsaných zdrojů s ověřením integrity.

Práce s nativními moduly a systémovými API

Node-API (N-API) – stabilní binární rozhraní pro nativní rozšíření; minimalizuje potřebu překompilace při změně verze Node.
Prebuilds – distribuujte předkompilované binárky pro hlavní platformy a architektury.
Alternativy – pokud je to možné, preferujte WebHID/WebUSB/WebSerial nebo systémové služby přes hlavní proces.

Mezinárodní prostředí, přístupnost a UX

I18n – message catalogs, správa pluralit, dynamické přepínání jazyků.
A11y – dodržujte standardy Chromium (ARIA, role, kontrast); nativní menu zajišťuje klávesovou navigaci.
Platformní konvence – klávesové zkratky, role menu a chování oken (macOS vs. Windows) by měly odpovídat očekáváním uživatelů.

Datová úložiště, cache a offline režim

Bezpečné ukládání – OS keychain/Keytar pro tokeny, sqlite/LevelDB/IndexedDB pro data.
Persistenční vrstvy – migrační skripty, šifrování citlivých polí, zálohy a řešení konfliktů pro synchronizační scénáře.
Cache – řízené využití session a partition pro oddělení profilů nebo tenantů.

Observabilita: logy, telemetrie, crash reporty

Logy – strukturované logování v hlavním/renderer procesech, rotace a úroveň detailu dle prostředí.
Crash reporty – integrace crashReporter, zdrojové mapy (sourcemaps) a upload minidump.
Telemetrie – explicitní souhlas, možnost opt-out, agregované metriky (doba startu, cold/warm boot, chyby IPC).

Vývojový workflow: bundlery, moduly a ESM

Bundlování – Vite/ESBuild/Webpack pro renderer; oddělené buildy pro hlavní a preload s cílením na Node runtime.
ESM – sjednoťte modulární systém; u hlavního procesu zvažte type: module a import mapy.
Hot reload – bezpečný pouze pro renderer; reload hlavního procesu může zničit stav – používejte opatrně.

Alternativy k Electronu: kdy a proč

Tauri – WebView + Rust backend; nižší footprint, velmi přísný bezpečnostní model. Vhodné pro menší UI a nižší nároky na nativní integraci Chromium.
NW.js – podobná filozofie jako Electron, ale s odlišnou integrací Node a webu.
Nativní cross-platform řešení – Qt/.NET MAUI/Flutter – pokud není prioritou webový ekosystém, mohou nabídnout lepší výkon a nižší nároky.

Typické architektonické vzory v Electron aplikacích

Command bus přes IPC – centralizace volání do hlavního procesu s autorizací a auditní stopou.
Synchronizace store – jednostranný state push z hlavního procesu do rendererů (např. přes RxJS kanály).
Modulární preload – několik izolovaných mostů (filesystem, shell, updater), každý s vlastním schématem validace.

Časté chyby a antipatterny

Povoleno nodeIntegration v rendereru bez izolace kontextu.
Nekontrolovaná navigace a nevalidované IPC zprávy.
Obrovské renderer bundle bez code splitting, dlouhý time-to-interactive.
Ukládání tajemství do localStorage nebo do zdrojů aplikace.
Spoléhání na zastaralá API (remote, nekonfigurované webview).

Roadmapa implementace: od prototypu k produkci

PoC – kostra aplikace, bezpečný preload bridge, základní okno, CSP a bundlování.
MVP – modulární IPC, logging, základní automatické aktualizace, CI buildy pro tři platformy.
Hardening – sandbox, podepisování kódu, audit IPC, profily paměti/výkonu, reportování pádů.
Release – kanály, diferenciální aktualizace, rollback strategie, telemetrické quality gates.

Závěr: kdy je Electron správná volba

Electron exceluje tam, kde potřebujete rychle dodat plnohodnotnou desktopovou aplikaci s bohatým uživatelským rozhraním, sdílet kód se webem a využít rozsáhlý ekosystém JavaScriptu. Úspěch závisí na disciplíně v bezpečnostním nastavení, precizním řízení výkonu a pečlivém balíčkování. Pokud tyto aspekty zvládnete, získáte multiplatformní aplikaci s moderním UX, krátkým time-to-market a udržitelnou vývojovou cestu.