Electron: využití webových technologií 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: main proces, renderer procesy a IPC

Main 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 nebo 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 main procesem. Používejte ipcMain/ipcRenderer podle request–response vzoru, s validací zpráv a minimálním počtem 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 – zapínejte sandbox: true a contextIsolation: true; renderer tak neběží s Node API.
Zakázání remote – nepoužívejte historické remote API; nahraďte vlastní IPC a contextBridge.
Content Security Policy – omezte zdroje skriptů, zakazujte unsafe-inline a eval; preferujte bundlery generující hashed či nonce skripty.
Nahrávání vzdáleného obsahu – upřednostněte lokální soubory (file://) nebo vlastní protocol; pokud musíte načítat obsah z webu, aktivujte webSecurity, allowRunningInsecureContent: false, partition a blokování přesměrování.
Omezená oprávnění – whitelistujte pouze nezbytné metody v contextBridge.exposeInMainWorld. Každý volání validujte (schéma, datové typy, rozsahy).
Bez uložení tajemství v klientovi – API klíče a tokeny nezapisujte přímo; používejte backend proxy, OS keychain a krátkodobé tokeny.

Životní cyklus aplikace a správa oken

Start: app.whenReady() → vytvoření BrowserWindow a načtení uživatelského rozhraní.
Ukončení/zavření: zachycujte before-quit/window-all-closed; na macOS respektujte vzory reactivace aplikace.
Více oken: pro sdílená data používejte shared workers, vlastní store nebo main proces; nespoléhejte na globální proměnné rendereru.
BrowserView vs. WebView: BrowserView je first-class API v main 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, správa oken).
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 do aplikace (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í, potvrzení.
clipboard – práce 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 (za respektování 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 aplikace.
GPU – ponechte hardware acceleration zapnutou; vypínejte ji pouze při diagnostice nebo konkrétních chybách.
Process model – méně oken znamená méně rendererů; sdílení webContents zvažujte s ohledem na potřebu izolace.
Detekce úniků paměti – profilujte heap snapshots, sledujte detached DOM uzly, uvolňujte BrowserWindow a odhlašujte IPC posluchače při destrukci.

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

Bundlery – electron-builder, electron-forge nebo vlastní skripty (CLI + asar archiv).
Artefakty – Windows: NSIS/MSIX; macOS: DMG/PKG, notarizace a Gatekeeper; Linux: AppImage/deb/rpm/snap.
Podepisování – kódové podepisování (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 E2E

Jednotkové – čistá logika (store, business) pod Jest/Mocha.
Integrační – 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ím app dir.
CI/CD – matrix buildy (Windows/macOS/Linux), cachování Node modulů, podepisování v zabezpečeném prostředí (HSM/Apple Notary API).

Bezpečnostní checklist pro produkci

contextIsolation: true, nodeIntegration: false, enableRemoteModule: false.
Výhradně lokální obsah nebo striktní CSP; blokujte navigaci (will-navigate, new-window události).
Preload poskytuje pouze úzké API; validace vstupů a serializace zpráv (např. Zod/ajv schema).
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 nutnost rebuildů 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 OS služby dostupné přes main proces.

Mezinárodní prostředí, přístupnost a uživatelská zkušenost (UX)

I18n – message catalogs, správa plurálů, dynamické přepínání jazyků.
A11y – respektujte 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.
Perzistenční vrstvy – migrační skripty, šifrování citlivých polí, zálohy a conflict resolution pro sync scénáře.
Cache – řízené využívání session a partition pro oddělení profilů a tenantů.

Observabilita: logy, telemetry, crash reporty

Logy – strukturované logování v main a renderer procesech, rotace logů a úroveň detailů podle prostředí.
Crash reporty – integrace crashReporter, mapy zdrojů (sourcemaps) a upload minidump souborů.
Telemetry – explicitní souhlas uživatele, možnost opt-out, agregované metriky (doba spuštění, cold/warm boot, chyby IPC).

Vývojový workflow: bundlery, moduly a ESM

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

Alternativy k Electronu: kdy a proč

Tauri – WebView + backend v Rustu; menší stopa, 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 jinou integrací Node a webu.
Native cross-platform – Qt/.NET MAUI/Flutter – pokud prioritou není 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 main procesu s autorizací a auditní stopou.
Store synchronizace – jednostranný state push z main procesu do rendererů (např. 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 anti-patterny

Povolené nodeIntegration v rendereru bez izolace kontextu.
Nekontrolovaná navigace a nevalidované IPC zprávy.
Obrovské renderer bundles bez code splitting, dlouhá doba do interaktivity.
Ukládání tajemství do localStorage nebo v aplikaci dostupných zdrojů.
Spoléhání na zastaralá API (remote, nekonfigurované webview).

Roadmapa implementace: od prototypu k produkci

PoC – skeleton aplikace, bezpečný preload bridge, základní okno, CSP a bundling.
MVP – modulární IPC, logování, základní auto-update, CI buildy pro tři platformy.
Hardening – sandbox, podepisování kódu, audit IPC, profily paměti a výkonu, crash reporting.
Release – kanály, diferenciální aktualizace, rollback strategie, telemetrické quality gates.

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

Electron exceluje tam, kde chcete rychle dodat plnohodnotnou desktopovou aplikaci s bohatým uživatelským rozhraním, sdílet kód s webovou aplikací a využít rozsáhlý JavaScript ekosystém. Úspěch závisí na disciplinovaném 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.