Electron: webové technologie na desktopu

Proč Electron a co nabízí

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ý cyklus prototypování 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, procesy rendereru a IPC

Hlavní proces – spouští aplikaci, spravuje okna (BrowserWindow), menu, systémová API, životní cyklus, automatické aktualizace, oznámení a integraci s OS.
Procesy rendereru – jeden nebo více pro každé okno/kartu; běží na jádře Chromium a vykreslují uživatelské rozhraní.
Komunikace IPC – oddělení oprávnění vyžaduje bezpečný kanál mezi rendererem a hlavním procesem. Používejte ipcMain/ipcRenderer se vzorem požadavek–odpověď, validací zpráv a minimálním počtem povolených kanálů.
Skripty preload – běží v rendereru před uživatelským rozhraním; slouží k vytvoření bezpečného rozhraní prostřednictvím contextBridge (tzv. bridging API).

Bezpečnostní model a zásady

Sandbox – zapínejte sandbox: true a contextIsolation: true; renderer tak neběží s rozhraním Node API.
Vypnutí remote – nepoužívejte historické API remote; nahraďte ho vlastním IPC a contextBridge.
Content Security Policy – omezte zdroje skriptů, zakažte unsafe-inline a eval; upřednostňujte nástroje pro sestavování, které generují skripty s hash nebo nonce.
Načítá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í – povolte pouze nezbytné metody v contextBridge.exposeInMainWorld. Každé volání validujte (schéma, typy, rozsahy).
Žádná tajemství v klientovi – nezabudovávejte klíče API a tokeny; používejte proxy backendu, systémovou keychain a tokeny s krátkou dobou platnosti.

Životní cyklus aplikace a správa oken

Spuštění: app.whenReady() → vytvoření BrowserWindow a načtení uživatelského rozhraní.
Ukončení/zavření: zachytávejte before-quit/window-all-closed; v systému macOS respektujte vzory opětovné aktivace aplikace.
Více oken: pro sdílená data používejte shared workers, vlastní store nebo hlavní proces; nespoléhejte na globální proměnné rendereru.
BrowserView versus WebView: BrowserView je plnohodnotné API v hlavním procesu; <webview> je izolovaný tag, který vyžaduje přísnou konfiguraci.

Integrace s OS: nativní menu, tray, protokoly, asociace souborů

Menu – Menu/MenuItem s rolemi pro standardní chování (kopírování, zápis, okna).
Tray – systémová ikona, kontextové menu, indikátory stavu.
Protokoly a deep linky – zaregistrujte app.setAsDefaultProtocolClient('myapp') pro spuštění aplikace z URL.
Asociace souborů – otevření souboru v aplikaci (Windows app.setUserTasks, událost open-file v systému macOS).
Oznámení – new Notification() s nativní integrací a akcemi.

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

dialog – otevření/uložení souborů, upozornění.
clipboard – práce se schránkou (text, HTML, obrázky).
screen – informace o monitorech, DPI a dostupném prostoru.
powerSaveBlocker – zabránění uspání během dlouhotrvajících operací.
desktopCapturer – snímání oken/obrazovek (při respektování oprávnění OS).

Výkon a paměť: optimalizační strategie

Jednoduché uživatelské rozhraní – vyhýbejte se nadměrnému překreslování, upřednostňujte virtualized lists a memoizaci.
Načítání podle potřeby – dynamicky importujte náročné moduly; použijte code splitting pro rychlé spuštění.
GPU – ponechte hardwarovou akceleraci zapnutou; vypínejte ji pouze při diagnostice nebo při konkrétních chybách.
Model procesů – méně oken znamená méně rendererů; sdílené objekty webContents zvažujte s ohledem na izolaci.
Detekce úniků paměti – profilujte heap snapshots, sledujte uzly detached DOM, uvolňujte BrowserWindow a při zničení rušte posluchače IPC.

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

Nástroje pro sestavování – electron-builder, electron-forge, případně vlastní skripty (CLI + archiv asar).
Výstupní balíčky – Windows: NSIS/MSIX; macOS: DMG/PKG, notarization a Gatekeeper; Linux: AppImage/deb/rpm/snap.
Podepisování – podepisování kódu (certifikát Windows, Apple Developer ID), časové razítko, 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é testy – čistá logika (store, business) v Jest/Mocha.
Integrační testy – testy kontraktů IPC, API preload a chování sandboxu.
E2E testy – automatizace pomocí Playwrightu nebo náhrad za Spectron (Spectron je zastaralý); spouštějte binární soubor electron s testovacím app dir.
CI/CD – sestavení pro různé platformy (win/macos/linux), ukládání modulů Node do mezipaměti, podepisování v zabezpečeném prostředí (HSM/Apple Notary API).

Bezpečnostní kontrolní seznam pro produkci

contextIsolation: true, nodeIntegration: false, enableRemoteModule: false.
Výhradně lokální obsah nebo striktní CSP; blokujte navigaci (will-navigate, new-window).
Preload poskytuje pouze úzké API; validace vstupů a serializace zpráv (schéma Zod/ajv).
Zakázat nepoužívané možnosti webPreferences (např. allowpopups, plugins); povolit safeDialogs.
Automatické aktualizace – pouze z podepsaných zdrojů, s ověřování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 opětovného sestavování při změně verze Node.
Předkompilované balíčky – distribuujte předkompilované binární soubory pro hlavní platformy/architektury.
Alternativy – pokud je to možné, upřednostňujte WebHID/WebUSB/WebSerial nebo služby OS prostřednictvím hlavního procesu.

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

I18n – katalogy zpráv, správa plurálů, dynamické přepínání jazyka.
A11y – respektujte standardy Chromium (ARIA, role, kontrast); nativní menu nabízí navigaci pomocí klávesnice.
Konvence jednotlivých platforem – klávesové zkratky, role menu a chování oken (macOS versus Windows) by měly odpovídat očekáváním uživatelů.

Datové úložiště, mezipaměť a offline režim

Bezpečné ukládání – systémová keychain/Keytar pro tokeny, sqlite/LevelDB/IndexedDB pro data.
Vrstvy perzistence – migrační skripty, šifrování citlivých polí, zálohy a řešení konfliktů pro scénáře synchronizace.
Mezipaměť – řízené využití session a partition k oddělení profilů/tenantů.

Observabilita: logy, telemetrie, hlášení pádů

Logy – strukturované logování v hlavním procesu/rendereru, rotace a úroveň podrobnosti podle env.
Hlášení pádů – integrace crashReporter, zdrojové mapy (sourcemaps) a nahrávání souborů minidump.
Telemetrie – výslovný souhlas, možnost odhlášení, agregované metriky (doba spuštění, studený/teplý start, chyby IPC).

Vývojový workflow: nástroje pro sestavování, moduly a ESM

Sestavování – Vite/ESBuild/Webpack pro renderer; samostatná sestavení pro main/preload s cílením na běhové prostředí Node.
ESM – sjednoťte modulární systém; u hlavního procesu zvažte type: module a mapy import.
Hot reload – bezpečný pouze pro renderer; opětovné načtení hlavního procesu může zničit stav – používejte ho uvážlivě.

Alternativy k Electronu: kdy a proč

Tauri – WebView + backend v Rustu; menší nároky na prostředky, velmi přísný bezpečnostní model. Vhodné pro menší uživatelská rozhraní a nižší nároky na nativní integraci Chromia.
NW.js – podobná filozofie jako Electron, ale s odlišnou integrací Node a webu.
Nativní multiplatformní technologie – Qt/.NET MAUI/Flutter – pokud webový ekosystém není prioritou, mohou nabídnout vyšší výkon a nižší nároky.

Typické architektonické vzory v aplikacích Electron

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

Časté chyby a anti-patterny

Povolené nodeIntegration v rendereru bez izolace kontextu.
Nekontrolovaná navigace a nevalidované zprávy IPC.
Rozsáhlé renderer bundles bez code splitting, dlouhá doba do interaktivity (time-to-interactive).
Ukládání tajemství do localStorage nebo do zdrojů aplikace.
Spoléhání na zastaralá API (remote, nenakonfigurované webview).

Plán implementace: od prototypu k produkci

PoC – základ aplikace, bezpečný preload bridge, základní okno, CSP a sestavení.
MVP – modulární IPC, logování, základní automatické aktualizace, sestavení v CI pro tři platformy.
Zabezpečení – sandbox, podepisování kódu, audit IPC, profily paměti/výkonu, hlášení pádů.
Vydání – kanály, diferenciální aktualizace, strategie návratu k předchozí verzi, telemetrické quality gates.

Závěr: kdy je Electron správnou volbou

Electron vyniká tam, kde chcete rychle dodat plnohodnotnou desktopovou aplikaci s bohatým uživatelským rozhraním, sdílet kód s webem a využít obrovský ekosystém JavaScriptu. Úspěch závisí na disciplinovaném nastavení zabezpečení, 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átkou dobou uvedení na trh (time-to-market) a udržitelnou cestou vývoje.